DEV Community

Discussion on: What are your thoughts on Tailwind CSS?

View post
Collapse
 
rickmills profile image
Rick Mills • • Edited

It took me a while to get my head around its benefits over something like Bootstrap, and I did make mistakes along the way. However now I can safely say its sped up development for me significantly.

The biggest thing to remember when using it is that whilst you can just stick every single option on your class, they can quickly become pretty overwhelming to manage.

This has been accounted for though. Tailwind has an @apply method you can use in your CSS/Less/Sass that allows you to create reusable components.

So for example lets assume you've got a box you use all over the place, and its classes look like this:

<div class="mx-2 text-center border-1 border-blue-800 bg-white shadow rounded">
Enter fullscreen mode Exit fullscreen mode

In your CSS you can do this instead:

.card {
    @apply mx-2 text-center border-1 border-blue-800 bg-white shadow rounded;
}
Enter fullscreen mode Exit fullscreen mode

Or to be even more tidy, this:

.card {
    @apply mx-2;
    @apply text-center;
    @apply border-1;
    @apply border-blue-800;
    @apply bg-white;
    @apply shadow;
    @apply rounded;
}
Enter fullscreen mode Exit fullscreen mode

Then on your div you simply have:

<div class="card">
Enter fullscreen mode Exit fullscreen mode

It ends up making it super easy to build out components. Make no mistake though - there is a learning curve, but in my experience so far it's been totally worth it.

Feel free to poke around my first attempt at using it here, I went with a raw copy of tailwind and no custom css for this one, given the size of the site it didn't really need its own stylesheet. You can also use purgecss to strip out any unwanted css to make load times super quick :)

Collapse
 
nickytonline profile image
Nick Taylor •

Awesome. Thanks for the info.

Collapse
 
clifton893 profile image
Clifton Long Jr. •

Wow, that's a pretty compelling argument for Tailwind. Thanks for the explanation!

Collapse
 
bernhardh profile image
Bernhard Hörmann • • Edited

Thats a very important feature, but it does then basically exactly what all other frameworks (bootstrap, etc.) does, the only difference is, that you use tailwind instead of css. What is the benefit of using for example

Tailwind

.card {
    @apply mx-2;
    @apply rounded;
}
Enter fullscreen mode Exit fullscreen mode

CSS

.card {
    margin: 0.5rem;
    border-radius: .25rem!important;
}
Enter fullscreen mode Exit fullscreen mode

or even using variables in SCSS/Sass/Less with the same effect?

Collapse
 
sergiodxa profile image
Sergio Daniel Xalambrí •

The idea is that you can use the Tailwind design tokens (the classes) to keep consistency, it also removes magic numbers from your CSS (why .5rem? mx-2 is part of a scale and you can understand the reason behind it).

Also Tailwind team recommends avoiding using @apply, specially if you are using a component based frontend framework like React/Vue/Angular, because now your components are in the framework not in the CSS.

Thread Thread
 
bernhardh profile image
Bernhard Hörmann • • Edited

Sorry, but that is no argument. mx-2 is just another representation of .5rem and the scale is exactly the same since mx-4 is twice of .5rem. The only difference is that you are using some kind of "proprietary" unit instead of standard unit rem. To understand rem, you only need ot understand CSS. To understand mx-2 you need to know tailwind. And if you don't like magical numbers, all css preprocessors understand variables.

And of course is the tailwind team against apply, since its the opposit of what they do.

I dont see that big advantage of using tailwind in comparison of just using inline css.

I some cases, I even HATE Tailwind, when you don't have the full controll of the output html. Just a example - Laravel nova. They use tailwind there. Its almost impossible to change a lot of stuff without really hacky css rules (and they even have some extra classes like btn or card, but way to less of them)

Thread Thread
 
denu5 profile image
Robert Denus •

Berhard its more about the design SYSTEM. Applying this to your comment "to understand mx-2 you need to know tailwind" -> you would need to say: "... need to know your design system". And this makes sense, look at is a contract between designer and developer. Therefore using agreed tokens is a big help instead of any not-systemized values like rem, where you would need to measure by hand any spacings. a good read here: medium.com/swlh/design-system-base...

Thread Thread
 
youngelpaso profile image
Jesse Sutherland •

This is the most underrated use of TW CSS! TW as a foundation of a design system that you can specify your own utilties for, or convert into more 'conventional' BEM via @apply is a really good use case IMO. The way I'm currently doing it is like this:

  • Specify initial TW config w/ custom colors etc
  • Prototype components using utility classes
  • When 'done' use @apply to map those utilties into a BEM style CSS file, which can be re-used later by consumer of the design system, but since its TW based can also be easily purged - if I don't use that class in my docs/component templates, its not exported to the library

CSS-in-JS offers similar structure, but TW is probably (or at least the most popular) CSS-first framework that allows for such easy and systematic style composition/extension.

The next thing I'm investigating is how to integrate 'design tokens' into my TW config file - and there's a couple OSS projects that might fit the bill such as Style Dictionary.