How to use @Apply from tailwind in plain CSS?

user_7551963 0
Viewed 6546

I'm using tailwindcss in a React project.

I call classes in this way :

<p className="text-gray-600 text-base-14">
        <Link to="/code">{props.name}</Link>
</p>

In fact sometimes I need many classes ( 15 -20 ) and It's not good practice to write them in JS file.

In Nuxt.js I was using in :

 <style type="postcss">
   .prg{
     @apply text-gray-600;
     @apply text-base-14;
   }
   </style>

Then I use the class prg in the component ( Vue component )

I tried the same on React but it does not work!

 <p className="prg">
            <Link to="/code">{props.name}</Link>
        </p>

What's the issue?

tailwind-css css
2 Answers

As of the tailwindcss docs, if you want to use custom classes based on Tailwind classes, add them to your global CSS file (where your @tailwind directives are).

user_112365230

You will have to define a utility class to your src/index.css file like this:

.prg{
    @apply text-gray-600;
    @apply text-base-14;
}
user_54679480
Related