DEV Community


Discussion on: Why Tailwind Isn't for Me

titungdup profile image

Great post. Thank you for giving me more reasons to not use tailwind, I was familiar with reasons 1 and 2. But even though I don't like using Tailwind I am still using it because I couldn't find better solutions for a few things

  • When using vanilla CSS I find myself writing the same thing over and over again in different places. Like using a "display: flex" property, if I have 10 different flex items I would be writing "display: flex" in 10 places which I think is unnecessary repetition in CSS. If we have a utility class "flex" then we only have to write one "display: flex". The same goes for margins, paddings, fonts, etc
  • I end up adding unnecessary classes in my HTML. If I have to add a margin to a div, then I will have to add a class on that div because using inline style is not good, and directly targeting the HTML element is also not good. So I have to add some class in order to add some style. This also creates naming difficulties.
  • Naming! I have been writing CSS for years but I still find naming very difficult. Whatever methodology you use, BEM, CUBE, naming is still one of the difficult parts of CSS.

For me, Tailwind handles these issues very nicely. But I am looking to find a better solution to these issues. Let me know if you have any suggestions or if I am missing anything.

jaredcwhite profile image
Jared White Author

Like using a "display: flex" property, if I have 10 different flex items I would be writing "display: flex" in 10 places

I would venture forth that most designs aren't that granular. By the time you've written your 10th flexbox-styled element, it's time to extract that pattern into a reusable component. Maybe you need a tool bar component, or a columns component.

I think utility classes for margin/padding are very handy, but I'm also trying to wean myself off of always using them as a crutch. Maybe there's a way to zoom out more holistically and bake the margins you need into the components and the structure of the page as a whole.

cbirdsong profile image
Cory Birdsong

You should take a look at abstracting your layout/spacing styles into reusable components that are applied to the parent. Every Layout is a great resource for this approach: