How to use @apply from tailwind in plain css?

by ryan.murray , in category: HTML & CSS , a year ago

How to use @apply from tailwind in plain css?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

by dalton_moen , a year ago

@ryan.murray 

To use @apply from Tailwind CSS in plain CSS, you can create a custom CSS class that applies the Tailwind utility classes using @apply. Here's an example:

  1. Define your custom CSS class:
1
2
3
.custom-class {
  @apply bg-blue-500 text-white p-4 rounded-md;
}


  1. Use your custom class in your HTML:
1
2
3
<div class="custom-class">
  This is a styled div
</div>


When you apply the custom class to an element, it will automatically apply all the utility classes specified in the @apply directive. Note that this method may not work in all cases, as @apply is a PostCSS feature and may not be fully supported in all browsers.

Related Threads:

How to apply smooth animation to conic-gradient() using tailwind css?
How to use css variables with tailwind css?
How to use calc() in tailwind css?
How to use grid in tailwind css?
How to use props variables in tailwind css?
How to convert use transform css property into tailwind css?