In this section we will see how to use @apply directive in tailwind css. Tailwind @apply directive using for create short and reusable class. If you are using framework like laravel, react or vue then do not use @apply directive. this framework have there own reusable style. but you can use small components like button, color and style classes.
Before start you need to first install & setup tailwind css.
How to install & setup Tailwind CSS v3
Example 1
Create button using @apply directive
src/input.css or main.css or tailwind.css
@tailwind base;
@tailwind components;
.btn {
@apply px-4 py-2 font-bold rounded;
}
.btn-blue {
@apply px-4 py-2 font-bold text-white bg-blue-500 rounded hover:bg-blue-700;
}
@tailwind utilities;
use .btn and .btn-blue.
<button class="btn btn-blue">Button</button>
tailwind @apply class
If you like bootstrap class name style then you can use @apply to create button like this.
@tailwind base;
@tailwind components;
.btn {
@apply px-4 py-2 font-bold rounded;
}
.btn-blue {
@apply px-4 py-2 font-bold text-white bg-blue-500 rounded hover:bg-blue-700;
}
.btn-success {
@apply px-4 py-2 font-bold text-white bg-green-500 rounded hover:bg-green-700;
}
.btn-danger {
@apply px-4 py-2 font-bold text-white bg-red-500 rounded hover:bg-red-700;
}
@tailwind utilities;
Bootstrap like button style using @apply.
<button class="btn btn-blue">Button</button>
<button class="btn btn-success">Success Button</button>
<button class="btn btn-danger">Danger Button</button>
tailwind @apply class
Example 2
You can also create base typography value.
src/input.css or main.css or tailwind.css
@tailwind base;
@layer base {
h1 {
@apply text-5xl;
}
h2 {
@apply text-4xl;
}
h3 {
@apply text-3xl;
}
h4 {
@apply text-2xl;
}
h5 {
@apply text-xl;
}
h6 {
@apply text-lg;
}
}
@tailwind components;
@tailwind utilities;
Set default value h1,h2...h6 using tailwind @apply directive.
<div>
<h1>h1 set deafult value using @apply directive</h1>
<h2>h2 set deafult value using @apply directive</h2>
<h3>h3 set deafult value using @apply directive</h3>
<h4>h4 set deafult value using @apply directive</h4>
<h5>h5 set deafult value using @apply directive</h5>
<h6>h4 set deafult value using @apply directive</h6>
</div>
tailwind reusable style
Read Also
Tailwind CSS 3 FAQ Accordion UI Example
Tailwind CSS 3 Alert Message Example
Tailwind CSS 3 Avatars Example
Tailwind CSS 3 Breadcrumb Example
Tailwind CSS Gradient Button Example
Tailwind CSS 3D Button Example
Tailwind CSS Loading Button Example
Tailwind CSS v3 Cards Examples
Tailwind CSS Checkbox Form Examples
Tailwind CSS Dropdowns (Menu) on Hover Example
Tailwind CSS Multiselect Dropdown Example
How to use dark mode toggle switch in Tailwind CSS 3
How to use @apply directive in Tailwind CSS
Tailwind CSS sticky header & fixed navbar example
Tailwind CSS Navbar UI Example
Tailwind CSS 3 Login Page UI Example
Tailwind CSS Login Modal Example
Tailwind CSS 3 Overlay Image Example
Tailwind CSS Thank You Page Example
Tailwind CSS Timeline UI Example
Tailwind CSS Responsive Footer Section Example
Tailwind CSS Background Image Header Example
