Is there a way to compose css classes using other css classes?

user_4323908 0
Viewed 130

I have been looking at tailwind CSS, when I am using it, it feels like writing style inside HTML. Which makes this an awkward library to use for me. But while I was looking at it I got an idea.

Instead of using tailwind like this

<div class="p-4 flex text-lg">Something</div>

Is it possible for me to do this using some CSS preprocessor:

// in html
<div class="some">Something</div>

// in css (with a preprocessor)
.some {
  include: .p-4;
  include: .flex;
  include: .text-lg;
}

This way I don't have to write style in HTML but still get the benefits of tailwind's utility classes.

I know Scss has mixins, but as far as I know tailwind only provides classes and not mixins, and I have no experience with any other CSS preprocessor. So is there any preprocessor that supports this feature?

tailwind-css sass css
1 Answers

With SCSS, @extend could do the job. However, it will only work if you have access to the classes you want to extend. As for Tailwind CSS, I think @apply is the built-in way to do what you want.

user_97180560
Related