Using class names in HTML vs using @apply in SCSS

[hrishikesh-k]

Hi all!

I really appreciate the work that has been put into Tailwind and even though I'm just getting started, it seems amazing!

I just wanted to ask tips from the community.

We can apply styles using the Tailwind class names by adding required classes to the HTML elements, or in our SCSS file, we can select the element(s) and use @apply. So far so good. I am just wondering what are the best practices when it comes to the following:

Consider a case where I want to style the <header> element. Considering there's going to be just one such element on the entire page, would it be better applying styles in the markup or by using @apply in SCSS? I'm talking in regards to the final production bundle size. Are there any considerations I should keep in mind before just applying styles using @apply to a large number of elements?

I'm asking this because in my current setup, I have added a lot of classes to many elements and my HTML is looking kinda unreadable to me. Thus, I was planning to keep styles in the SCSS itself. But if that's not a good thing to do, let me know.

[jenstornell]

The best practices is the opposite of what you suggest. Having a class named .header does not say very much more than that it's a header. Having classes that says p-2 border-red-500 mx-2 says much more of what it actually does. It's also easier to only edit the HTML and don't care that much about switching back and forth between the HTML and the CSS.

You may think you are making things shorter by using @apply but what you really do is just moving the classes somewhere else. They don't disappear.

Instead what is recommended is to use components so that you don't need to repeat yourself.

Personally I use @apply sometimes, when I don't want to use a component, like with buttons or markdown. I try to avoid it if I can.

[hrishikesh-k]

Exactly what I was looking for! Thank you so much for the explanation, really appreciate it!

[NikitaIT]

Having a class named .header we separate levels of abstraction when we think in large categories they cannot be given a functional name.

You will never call your cat paws-4 tail-25 whiskers fur-2 meows. You will call him CheshireCat. Perhaps you will have several cats with similar parameters, but you will never carry out functional decomposition between them. You also do not need to check whether all 4 paws of the cat are in place every time.

[jenstornell]

Tailwind encourages a utility-first workflow, where designs are initially implemented using only utility classes to avoid premature abstraction.

it's often better to extract reusable pieces of your UI into template partials or JavaScript components instead of writing custom CSS classes.

https://tailwindcss.com/docs/extracting-components