Tailwind CSS
/Intermediate
Extracting Common Styles (@apply)
Definition
Using the `@apply` directive to combine multiple Tailwind utilities into a single custom CSS class. (A practice that should be used very sparingly).
Explain Like I'm New
If you are NOT using React/Vue, and you are building a static HTML site, you can't build a `<Button>` component. To avoid copy-pasting 15 classes on every button, you go to your CSS file, create a `.btn-primary` class, and use `@apply bg-blue-500 text-white rounded;` to suck the Tailwind styles into it.
Real World Example
Creating a global `.btn` class for a legacy Laravel or Ruby on Rails application.
Common Use Cases
- •Legacy server-side rendered apps
- •Global styling of third-party HTML
Interactive Example
Loading...
Console output will appear here...
Interview Questions
basic
- What Tailwind directive allows you to write Tailwind utilities inside a standard CSS file?
intermediate
- Why does the creator of Tailwind explicitly tell developers NOT to use `@apply` if they are using React or Vue?