How to use @apply directive in Tailwind-CSS ?
Last Updated :
31 Jan, 2023
Tailwind CSS is a popular utility-first CSS framework. It is a set of pre-defined CSS classes that can be used to quickly and easily style your HTML elements without having to write custom CSS code. The classes are organized into a set of utility classes that can be used to control the layout, spacing, typography, and other aspects of your design.
The @apply directive in Tailwind CSS allows you to apply multiple utility classes to a single CSS class. This can help to reduce the amount of CSS code and make your styles more readable. Here’s an example of how to use the @apply directive in Tailwind CSS:
Steps to use @apply directive in tailwind:
Step 1: Create a new CSS class: In your CSS file, create a new class in which you want to apply the utility classes. For example:
.my-button {
}
Step 2: Apply the utility classes: Inside the .my-button class, use the @apply directive to apply the utility classes that you want to use. For example:
.my-button {
@apply py-2 px-4 rounded-lg bg-blue-500 text-white;
}
This will apply the py-2, px-4, rounded-lg, bg-blue-500, and text-white utility classes to the .my-button class.
Step 3: Use the class in your HTML: Once you’ve created your new class and applied the utility classes to it, you can use it in your HTML like this:
<button class="my-button">Click me</button>
It’s important to note that when you use the @apply directive, the CSS properties are copied and pasted directly into the new class, so any changes made to the original utility classes will not be reflected in the new class.
Now you have learned how to use the @apply directive, it’s time to test out the skill you have learned with an example.
Example: In this example, we are using @apply to apply utility classes to a specific class and I have changed the following lines of code with gfg_center
flex justify-center items-center min-h-screen
Also, I have changed the following lines of code with gfg_background
bg-green-700 p-4 text-3xl text-white rounded-xl shadow-2xl
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Welcome to GFG</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="gfg_center">
<div class="gfg_background">
<p>Hello Geeks</p>
</div>
</div>
</body>
</html>
|
CSS file will contain tailwind directives along with apply directives
CSS
@tailwind base;
@tailwind components;
@tailwind utilities;
.gfg_center{
@apply flex justify-center items-center min-h-screen
}
.gfg_background{
@apply bg-green-700 p-4 text-3xl text-white rounded-xl shadow-2xl
}
|
Output:
Conclusion: The @apply directive in Tailwind CSS allows you to apply multiple utility classes to a single CSS class, which can help to reduce the amount of CSS code and make your styles more readable. To use the @apply directive, you need to create a new CSS class, apply the utility classes to it using the @apply directive and then use it in your HTML. This feature can be useful in cases where you want to create custom styles that are a combination of multiple utility classes and make it easier to maintain and update your code.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...