DEV Community

Ben Halpern
Ben Halpern Subscriber

Posted on

Is the Tailwind approach a big step forward for CSS or just-yet-another-thing?

I've really seen Tailwinds take off lately in "marketshare" as well as "love-share".

On the other hand, the CSS ecosystem has been in mayhem for years...

I find the Tailwinds utility-first approach to be a really pleasant way to work with CSS, and CSS and pleasant are rarely used together in a sentence.

...But we've been here before in so many ways. I'd love to get folks' opinions on the CSS space.

Oldest comments (60)

Collapse
 
harlessmark profile image
Mark Harless

Big step forward. I just wish there were more alternatives.

Collapse
 
glennmen profile image
Glenn Carremans

I almost never do any frontend stuff, mostly backend or native Android, but with tailwindcss I was able to quickly throw together a nice design that was build responsive without needing to write a single line of CSS myself.

Adam Wathan (tailwindcss creator) is also taking this to the next level and looking for 2 people to join him fulltime.

Collapse
 
cescquintero profile image
Francisco Quintero πŸ‡¨πŸ‡΄

Backend with same experience here.

I'm working on something personal and Tailwind saved me the work to write lots of styles I didn't have enough idea of.

It's simpler than Bootstrap (which is my default many times) and easier to use.

Collapse
 
nickytonline profile image
Nick Taylor

Some good feedback came out of this post.

TLDR in the comments in that post seems to be you either love it or hate it.

Collapse
 
shaijut profile image
Shaiju T

Why tailwind is better than bootstrap ?

Collapse
 
turbopasi profile image
Pascal Lamers

You can't compare tailwind with bootstrap . Tailwind is a utility first framework, which does not give you ready-to-use components. Bootstrap mostly gives you ready-to-use components.

Thread Thread
 
5422m4n profile image
Sven Kanoldt

on the other hand bootstrap has this aspect of css utilities. So you can take out only the scss of bootstrap and use it with whatever react / angular / whatever framework and you get the quite decent bootstrap styling. Only by reusing their css vocabulary.

Collapse
 
drews256 profile image
Andrew Stuntz

I can't wait for tailwind to mature a little bit more. Tailwind feels like it really allows you to leverage the power of css without so much of the pain of following arcane naming rules, getting stuck into a framework, or not knowing what is going on with your styling.

Collapse
 
hozefaj profile image
Hozefa

I think the idea of utility first approach is the way forward. This gives flexibility to the engineers to build UI's how ever they choose while leveraging the power of the utility. The utility updating under the hood allows to better browser support.

Collapse
 
vabelha profile image
Vasco Abelha

In my opinion Tailwind is a big step in the right direction.

Not everyone is comfortable with CSS and the utility approach is a good way to mitigate those shortcomings, enabling them to develop and prototype responsive and clean UI faster, while allowing more experienced users to have a solid foundation to work and extend on.

Collapse
 
bravemaster619 profile image
bravemaster619

I have never used Tailwind but I agree bootstrap is kinda overkill.

Collapse
 
felipperegazio profile image
Felippe Regazio

True. Bootstrap is for CSS what JQuery is for JavaScript. They had their moment indeed, and now they are fading way :P

Collapse
 
sergix profile image
Peyton McGinnis • Edited

Big step forward. Quoting myself from my reply to Nick Taylor's post:

I was a little put off by Tailwind when I first looked at the examples in the documentation.

Why would I put all these classes in my HTML? Why wouldn't I just use Sass mixins?

But I decided to give it a shot, and oh man am I glad I did.

Once you start seeing patterns and memorizing the basic utility classes, it becomes an absolute breeze to style any component or section of your page might have.

I found it especially great for using flexbox, simply specifying flex and flex-1, flex-grow, flex-shrink, etc.

And the configuration and adding custom classes is very simple and intuitive once you learn it, which doesn't take long at all.
Again, it does seem off-putting at first, but as the docs themselves say,
You just have to try it.

Collapse
 
steelwolf180 profile image
Max Ong Zong Bao

I think it might be bootstrap killer?

Collapse
 
sargalias profile image
Spyros Argalias

To answer the question: I think Tailwind is here to stay. I put it in the same boat as other CSS frameworks like Bootstrap and Bulma.

It has a good advantage because its styles are quite specific and utility-like, which allows us to style things any way we want. In comparison, something like Bootstrap provides classes for components and not many utility classes. To modify components further, we need to write our own CSS. Of course the downside of Tailwind CSS is that because each class provides less styles, we need more of them in our HTML.

So it has pros and cons, as with anything, but it's a great option to have. It's my preferred choice for a CSS framework.

However, I still strongly believe that something like BEM is more suitable for larger projects that value scalability, robustness and pixel-perfect designs.