loading...

Discussion on: What are your thoughts on Tailwind CSS?

Collapse
rickmills profile image
Rick Mills

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

In your CSS you can do this instead:

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

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;
}

Then on your div you simply have:

<div class="card">

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 (he/him) Author

Awesome. Thanks for the info.

Collapse
bernhardh profile image
Bernhard Hörmann

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;
}

CSS

.card {
    margin: 0.5rem;
    border-radius: .25rem!important;
}

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

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)

Collapse
clifton893 profile image
Clifton Long Jr.

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