DEV Community

Discussion on: Tailwind CSS: My experience in 2022

Collapse
 
mangor1no profile image
Mangor1no • Edited

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

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

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

Collapse
 
aileenr profile image
Aileen Rae • Edited

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
 
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
farid

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
farid

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