Am I Wrong about @apply?

[shawnwildermuth]

I've talked to a lot of people about the use of @apply and I think it's the magic sauce of the library. But others think it's an anti-pattern. Here's my take:

• @apply let's me use the utility classes when i design them move them into traditional CSS classes/ids.
• During development I usually just use the utility classes, but as I find duplication, I move them to the @apply.
• Using @apply also finds bad class names (if I misspell as class name in the markup, it just doesn't match)
• I also suspect (though I haven't done any real perf tests) that fewer classes should be more performant than lots of utility classes
• Some opponents of the library complain about the noise of the class names, and I think @apply (in production) answers that.

I am curious others opinions (especially @adamwathan and other authors of Tailwind). Since I teach tailwind, I'd love to know if I am wrong and how I am wrong.

[adamwathan]

Hey! I’ve written about this quite a bit in the docs:

https://tailwindcss.com/docs/reusing-styles#avoiding-premature-abstraction

The way Tailwind is intended to be used is as utility classes directly in your HTML. Making a distinction between development and production I think is a bad idea — raw utility classes are by far easier to maintain than custom classes created with @apply, so switching to that style after you’re done prototyping just increases your CSS build size and makes your site harder to maintain.

Happy to answer any other questions 👍🏻

[shawnwildermuth]

Not sure I agree, but I understand what you're saying here. Not all usage I think is within frameworks where this can make sense, but it feels like for people who want to never touch CSS. But the real question is whether we can both be right ; ) I'll have a video about this soon to see if my viewers agree. Maybe we could do a video chat about it (recorded and released to help people understand including me)?

[thraizz]

@adamwathan the @apply directive is now not actively discouraged anymore in the docs, did your opinion towards this also change? :)

[shawnwildermuth]

@apply is an easy exceptional case. For some basic theming. I like that it also checks that the classes are valid during build. I still like it.

[simesy]

I tend to use @apply as a staging ground during development. I work in a really abstracted CMS so if I go and put some speculative tailwind classes in 10 templates and then realise that was a mistake (or there's a better way with prose say), it's a bit of a pain to refactor. Once I'm happy that something is going well, I'll move those things to where they need to live directly on the elements.

After a couple of projects I think the advice makes a lot of sense, but I was also really overthinking it at the start. I'm not afraid to leave a few @apply 's in my main.pcss, but I have a better feel for the smellyness of it.

[Pawel-IT]

I really like the @apply option. For me having the css in one place makes things so much easier. It also helps that you can group things, for example things like hover/focus/etc

<a href="#">Some link</a>
<style scoped>
.a {
	@apply text-red-800;
}

.a:hover {
	@apply text-red-600 underline;
}
</style>

You can immediately see what that is and your HTML code stays nice and short. VS something like this which your brain has to process:

<a href="#" class="text-red-800 hover:text-red-600 hover:underline">Some link</a>

When you have a dozen or more utility classes this type of grouping is so much easier to reason with.

I also hate code polluted with inline classes. To me the class name can actually help guide you as to what the element is.

<a class="btn-icon"></a>

is so much more rational in my brain than this:

<a class="w-6 h-6 border border-2 border-gray-800 text-gray-800 dark:text-white dark:border-white"></a>

You know immediately that's an icon for a button. Yes in most cases you would have a separate component for this making it obvious. But that's not always possible when using other people's libraries.

Finally you're always going to have some duplication that components aren't going to solve for you. Maybe you want to have a consistent padding or margin or text style (size, line height, font, etc) for similar but different components that can't be children of the same parent. Do people use variables for this if not using apply?

I made the mistake of typing this on a phone so sorry for any obvious formatting issues

[adamwathan]

I also hate code polluted with inline classes.

I would probably recommend not using Tailwind then, that's kind of the whole point of the framework 😄

[Pawel-IT]

Is that really the ONLY point?

What about utilities like text-primary/80?
The well made defaults for things like spacing, padding, etc?
The awesome animation helpers?
@apply flex being much faster to write than doing it in plain CSS.
Even the colors out of the box are great for rapid prototypes

I always argued with people that Tailwind is much more than just in-line css. But maybe I'm wrong on that.

Edit: forgot one more. The sane naming right out of the box that is standardized so everyone else familiar with tailwind will immediately know it. Naming things is probably one of the hardest things we do. Yes you can eventually do this without tailwinds but tailwind trains you on this convention if you use it long enough.

[adamwathan]

Is that really the ONLY point?

It's the main point, yeah. It's a workflow of styling elements directly instead of putting your styles in another file.

To me doing this:

.a {
  @apply text-red-800;
}

...is just an unnecessary layer of abstraction over doing this:

.a {
  color: var(--color-red-800);
}

...and introduces a bunch of tooling and complexity into your project for no real reason. If you're going to write most of the CSS, just write it all IMO.

Naming things is probably one of the hardest things we do.

Agree on this which is why the inline workflow is the selling point of the framework. If you use @apply for everything, now you have to name everything again.

The sane naming right out of the box that is standardized

CSS properties are standardized too, display: block is the same across every CSS project, even non-Tailwind projects, so it's even more standardized than Tailwind you know?

Definitely don't think anyone should use Tailwind if they don't want to put utility classes directly in their HTML, absolutely just feels like unnecessary complexity to me if you aren't using it that way 👍

[Pawel-IT]

Appreciate your thoughts on this. I need to try going back to regular CSS on my next project and see if there is anything major I'm missing . Maybe I've just gotten too used to tailwind.