Tailwind CSS
/Advanced
Custom Utilities
Definition
Adding your own bespoke CSS classes directly into the Tailwind compilation engine using the `@layer utilities` directive or a Plugin.
Explain Like I'm New
Sometimes you just need a weird CSS property that Tailwind doesn't have, like `scrollbar-width: none`. You don't want to create a separate CSS file. You can inject it directly into Tailwind, and it will magically work with `hover:` and `md:` prefixes!
Real World Example
Adding a `.no-scrollbar` class to hide ugly scrollbars on a horizontal scrolling carousel.
Common Use Cases
- •Niche CSS properties
- •Bridging legacy CSS
Interactive Example
Loading...
Console output will appear here...
Interview Questions
basic
- Which Tailwind directive (`@tailwind`, `@apply`, or `@layer`) is used to inject custom classes so they can be purged properly?
intermediate
- If you define a custom utility like `.text-shadow-glow` in your CSS, will `hover:text-shadow-glow` automatically work?