DEV Community 👩‍💻👨‍💻

Discussion on: Tailwind CSS: My experience in 2022

Collapse
 
mangor1no profile image
Mangor1no • Edited on

If you feeling like the Tailwind's classes are bloated, you can have some options:

  1. Split the components.
  2. Write normal classes and use @apply tag to write tailwind's classes inside them. For example:

    .big-green-circle {
      @apply w-5 h-5 rounded-full border-none bg-green-500;
    }
    
  3. Do both things above.

Collapse
 
hunzaboy profile image
Aslam Shah • Edited on

I don't see why would you add an apply instead of writing pure css 💅 Its fun 🎉

Collapse
 
reikrom profile image
Rei Krom

last time i checked using tailwind @apply it converts the classes to css and begins to bloat everything as you're not using utility classes anymore. is this still true?

Collapse
 
somtookaforr profile image
Somtochukwu Okafor Author

Wow, I didn't know of this. Thank you @mangor1no

Collapse
 
aileenr profile image
Aileen Rae • Edited on

Nice. I’ve never checked out Tailwind because the cluttered HTML is just not my style but this apply feature makes it look a lot more appealing. Glad I stumbled across this comment!

Collapse
 
natescode profile image
Nathan Hedglin

@apply it is an anti-pattern. If a component has a ton of classes then it is probably too big.

I use atomic design which has layout components that handle the margin etc.

Collapse
 
balaji043 profile image
Balaji Ramasamy

can you please some good article on the atomic design thing?

Thread Thread
 
natescode profile image
Nathan Hedglin

The canonical link for Atomic Design . Mostly theory though.

I'm working on a blog post on my thoughts actually using Tailwind, React, Next and Atomic Design. Theory and practice rarely align.

Collapse
 
brense profile image
Rense Bakker

Are there other good libraries that offer pre-built components for tailwind?

Thread Thread
 
eshimischi profile image
eshimischi

tailwindui, flowbite, daisyui etc

Thread Thread
 
somtookaforr profile image
Somtochukwu Okafor Author

I tried out Flowbite React but its components were not easily configurable and were more a headache than a solution.

Thread Thread
 
eshimischi profile image
eshimischi

Put commonly used tailwind ui libs here only, had experience with daisy ui and Vue before

Thread Thread
 
brense profile image
Rense Bakker

I must say I do not have experience with any of those. I did take a look at Tailwind UI a little while ago and it looked good, but then I found out you have to pay for it :S

Thread Thread
 
eshimischi profile image
eshimischi

Well yes, but it doesn’t mean it is bad or smth. Their templates are pretty well developed

Collapse
 
yoquiale profile image
Alex

Nope, it isn't an antipattern. If a component has a ton of classes then it's a you problem, not a tailwind problem.

Thread Thread
 
natescode profile image
Nathan Hedglin

Even the creators say @apply is an anti pattern. It is using Tailwind to make classes with extra steps. It is better to just use BEM and sass at that point.

Thread Thread
 
yoquiale profile image
Alex

It's not, taliwind already includes helpful utility classes. SASS and BEM are not utility frameworks.

Thread Thread
 
natescode profile image
Nathan Hedglin

Yes, but @apply isn't either. It is a poor man's mixin. It is just compiler-assisted copy-paste. You're bloating your spreadsheet and making classes. You lose all the benefits of Tailwind and are better off using sass mixins and some other library imho.

Thread Thread
 
erickpetru profile image
Erick Eduardo Petrucelli

Nope, it isn't an antipattern.

Yes, it's.

From Tailwind documentation on Avoiding premature abstraction:

Whatever you do, don’t use @apply just to make things look “cleaner”. Yes, HTML templates littered with Tailwind classes are kind of ugly. Making changes in a project that has tons of custom CSS is worse.

If you start using @apply for everything, you are basically just writing CSS again and throwing away all of the workflow and maintainability advantages Tailwind gives you, for example:

  • You have to think up class names all the time — nothing will slow you down or drain your energy like coming up with a class name for something that doesn’t deserve to be named.
  • You have to jump between multiple files to make changes — which is a way bigger workflow killer than you’d think before co-locating everything together.
  • Changing styles is scarier — CSS is global, are you sure you can change the min-width value in that class without breaking something in another part of the site?
  • Your CSS bundle will be bigger — oof.

If you’re going to use @apply, use it for very small, highly reusable things like buttons and form controls — and even then only if you’re not using a framework like React where a component would be a better choice.

And if you allow me to put my personal opinion on top of that, everyone that feels @apply is unavoidable with Tailwind are just either:

  • Too closed to the semantic classes mindset (probably because of things like Bootstrap). Not blaming you, I was this way as well.
  • Not using components based development (with Vue, React, Svelte, Web Components, whatever). And by "using components" I mean really understanding how to properly split down a complex UI into small abstract and reusable pieces. Like others said, Atomic Design way can help a lot.
Thread Thread
 
yoquiale profile image
Alex

I do component-based development in vue and split stuff by functionality and reusability. I use \@apply in each component's tag.</p>

Thread Thread
 
natescode profile image
Nathan Hedglin

Why? I don't see the benefit of Tailwind if one is using compiler directives to write CSS classes. The point of Tailwind is to not write CSS classes that have to be named, can't semantically be reused and grow with each component. There is no benefit other than limiting CSS property values which can be done with custom props. @apply is just a weak mixin that can't take parameters.

If you just want to restrict property values, I highly recommend using a custom props library like open props. If you're defining styles per component anyways then couple open props with styled components and you're set.

Hope that helps. So many interesting CSS approaches these days.

Collapse
 
moopet profile image
Ben Sinclair

Using semantic classes and putting everything in CSS with @apply is the only way I can see Tailwind being used. Anything else is just two steps backwards.

Collapse
 
spotnick profile image
spotnick

Then you have not understood why tailwind was made. No offence it is your right to think like that and I have thought the same. But using tailwind now daily is just the creme on the cake. It’s easy and awesome :)

Thread Thread
 
moopet profile image
Ben Sinclair

No, I get why Tailwind was made, and how it's generally used. It's just that I think those uses are detrimental to the web.

Thread Thread
 
faridsa profile image
faridsa

A few days ago I found this interesting post about tailwindcss.
javascript.plainenglish.io/tailwin...
I must say that the only way I found tailwind usable is via creating group classes via @apply
I came to tailwinds a couple of years ago searching for a lighter solution because I was tired of bootstrap and its heavy css file.
I tried bulma, foundation ui toolkit and MUI too but none of them convinced me

Thread Thread
 
hanifeoglu profile image
Salih

@faridsa so what do you think about tailwind now, do you think it's positive? should we use

Thread Thread
 
moopet profile image
Ben Sinclair

This is a good article and fits my point of view quite nicely.

Thread Thread
 
faridsa profile image
faridsa

My personal position is using tailwindcss to solve fast mockups or little projects as landing pages, because it is really light in final css file.
But when it comes to large and long term projects I do prefer to create my own stylesheet using css variables and necessary classes with sass. I found that more sustainable.
In any case, I think that each developer ends up using the tool that best suits their modality.

Collapse
 
pawelmiczka profile image
Paweł Miczka

I agree - dividing code into small pieces like components helps a lot and for me tailwind is great example of framework / library that force you to use some patterns in code.

Using @apply isn't great idea. Tailwind after build removes unused classes so if you create new one it won't be removed but created as new one which means that Tailwind doesn't make sense to use - it now reminds me some things like BEM