how can i add many tailwind classes at once in some common class so that i dont have to use long class names everytime

Question

I am working with tailwind CSS.
I don't know react or next.js.

I want to give each anchor tag five-six tailwind classes, but i dont want to write all anchor tag then add classes manually,

what I want is to give them a common class name, like class="link" then in style.css, I will add all tailwind classes to link class.

its not working, but is there any way

home.html

<!-- Old --> <div> <a href="" class="duration-500 hover:scale-110 hover:bg-slate-100 p-2 rounded-lg">A</a> <a href="" class="duration-500 hover:scale-110 hover:bg-slate-100 p-2 rounded-lg">B</a> <a href="" class="duration-500 hover:scale-110 hover:bg-slate-100 p-2 rounded-lg">C</a> <a href="" class="duration-500 hover:scale-110 hover:bg-slate-100 p-2 rounded-lg">D</a> <a href="" class="duration-500 hover:scale-110 hover:bg-slate-100 p-2 rounded-lg">E</a> </div> <!-- New --> <div> <a href="" class="link">A</a> <a href="" class="link">B</a> <a href="" class="link">C</a> <a href="" class="link">D</a> <a href="" class="link">E</a> </div>

style.css

.link{ /* all tailwind classes */ duration-500 hover:scale-110 hover:bg-slate-100 p-2 rounded-lg }

Ben · Accepted Answer · 2022-05-28 20:49:09Z

You can use @apply to inline any existing utility classes into your own custom CSS.

This is useful when you need to write custom CSS like you want in your case.

You should be able to use @apply directive like this:

.link{ @apply duration-500 hover:scale-110 hover:bg-slate-100 p-2 rounded-lg; }

You can read more about it here: https://tailwindcss.com/docs/functions-and-directives#apply

Collectives™ on Stack Overflow

how can i add many tailwind classes at once in some common class so that i dont have to use long class names everytime

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related