DEV Community

Tailwind. My experience using it for a month now.

Patrick Ahmetovic on October 10, 2020

Let's be honest. Writing CSS can sometimes be a b*tch. As projects grow larger, the CSS styles can become quite hard to maintain - from naming thin...
Read full post
Collapse
 
gsarig profile image
Giorgos Sarigiannidis • • Edited

Long ago I've decided that CSS frameworks arent for me, and the main reasons for that are:

  • I don't like the messy markup they force you to write.
  • If you need to implement a rather complicated design from an XD, PSD or whatever, a framework can even become an obstacle.
  • Too much unused styles that you have to load anyway.
  • If I return to an old project and in the meantime I've switched frameworks, remembering the old framework's conventions can be annoyingly hard. The same goes if I have to pass my work to somebody else, and that somebody uses a different framework. Using vanilla CSS seems much more future-proof and flexible.
  • When I used to use Bootstrap, something felt wrong to me. Instead of learning CSS, I tried to learn the logic of a framework, often forgetting what is under the hood and how to write actual CSS.
  • CSS has so many exciting developments (variables, grid, flexbox etc) and IE use is fading, so using a framework doesn't save me from as much trouble as before. To me, spending time learning a framework simply doesn't seem to worth it anymore.
Collapse
 
hnicolas profile image
Nicolas Hervé •

The third point is not a problem with purgecss that strip unused CSS.

Collapse
 
dillonheadley profile image
Dillon Headley • • Edited

But there is the problem of adding more tools to your tools. More setup, more reading docs, more breaking points with version changes etc

Thread Thread
 
hnicolas profile image
Nicolas Hervé •

Si I suppose that you don't use autoprefixer for the same reason. Sure vanilla CSS is great but have a good time remembering all vendor specific prefixes. This will also reduce your CSS readability a lot...

Thread Thread
 
dillonheadley profile image
Dillon Headley •

It depends on the target browsers and project size, so no not always. For modern browsers it does little and vendor prefixes are being phased out of modern specs like grid. I’m not against tools. But there is a cost to each tool you add to a project. Adding blindly will bite you later

Collapse
 
moopet profile image
Ben Sinclair •

I've never understood how these tools are supposed to work. Even if you brute-force it by scraping the entire site you're going to miss a lot of dynamic classes added by ajax or rich text editors and such.

Collapse
 
yellow1912 profile image
yellow1912 •

I like it, it use it. But I think they are running out of ideas. Adding gradient to it is a joke IMHO. You basically have to add a bunch of classes just to control the gradients. As if I can remember all that. I think the utility classes should stay utility, should be simple and nothing beyond that. Leave the rest to custom code when necessary.

Collapse
 
mehmetcanaygun profile image
Can •

Thanks for sharing your experience with Tailwind. I've been thinking about learning it but had some questions in my mind. Like you said, the best thing to do is playing around with it and decide if that's a good one to use or not.

Collapse
 
patriscus profile image
Patrick Ahmetovic •

Exactly. They recently published play.tailwindcss.com/ - you can try it out with no setup whatsoever and play around with the classes & config!

Collapse
 
mehmetcanaygun profile image
Can •

Oh this is great! Thanks!

Collapse
 
bonfiglioalessio profile image
<A.BONFIGLIO/> •

Great article, i want share these tricks!

  • One off styling With md: / sm: / lg: you can use media query ✌️
  • Your markup may get polluted If you use npm for install Tailwind CSS you can custimize and add "preset style" with @import in css. 🙂 So, the attributes dont grow large.💪
Collapse
 
patriscus profile image
Patrick Ahmetovic •

Thank you for your tips! I still have things to look into and your suggestions seem promising 🙂

Collapse
 
urielbitton profile image
Uriel Bitton • • Edited

I never liked CSS frameworks. For the following reasons:

  • You don't attempt to make use of css anymore
  • Super messy markup, as others have mentioned
  • You need to consult the docs to do basic things like adding box shadows
  • you will inevitably need some additional css - and that will produce 2 css files which will decrease page load speed.
Collapse
 
patriscus profile image
Patrick Ahmetovic • • Edited

Thanks for asking! Not as of now as I rather try to extract the markup to different functions/partials/components (whatever you want to call it) and use them that way. I also try to follow the advice that's out there:

But I'm curious to see how useful the feature of component classes will be in the future for me

Collapse
 
futureistaken profile image
R Z •

You could learn something really useful instead of wasting time on the tailwind. I mean it!