2

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?

Improve this question

1 Answer 1

Reset to default
1

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.