Here's my two cents (rounded to a nickel since Canadian pennies are no more...):
Tailwind is super useful as opposed to a lot of other frameworks, IMO, because it doesn't have a pre-determined philosophy. Bootstrap/Foundation/Bulma/Materialize/Vuetify & co. say "this is a button" or "this is a navigation drawer."
That kind of paradigm is useful when you don't have those ideas floating around in your head already, or you like the way they do it. But what if you want to change the margins, padding, font size, or what have you of one of those components? I'm working with Vuetify right now, and I can say first-hand that that annoyingly means a lot of !importants in my CSS...
Tailwind (other than the new Tailwind UI, which looks intriguing) is basically just like writing CSS, except most of the normal/mundane things have an easy class (that doesn't come with any side-effects, baggage, or other styles). Want to have a button get bigger on hover? Add transform hover:scale-105 to the classes. Boom. Done.
But it doesn't replace CSS, in my opinion. There are some things you just can't break down into reusable classes like that. Like animations, or custom media queries (though Tailwind does come with an ample amount of customization for the latter), or - dare I say - some kind of browser hack to fix that annoying little glitch that happens to the hover styles on last year's version of Chrome...
To me, SASS is the future of CSS, but Tailwind means you can write less Sass, especially for reusable things.
Though, it has its limits. One is fairly obvious; you're still writing a whole bunch of styles, just not in the style block, but right in the HTML. You can easily get a class list that takes up several lines, or trails off beyond the horizon of your editor like a minified, inline SVG. Tailwind does use the @apply directive of Sass to apply a lot of stuff as mixins, so that can be avoided to some extent.
The other, of course, as already mentioned by my fellow commenters, is that you really need PurgeCSS or something like it when you're using Tailwind. It just adds a bunch of mostly-unused bloat to your bundle size otherwise (to the tune of a few hundred kilos, if you aren't careful - and even sometimes if you are). And, at least for me, Purge is almost more trouble than it's worth. Almost.
Bottom line here is that it isn't a magic bullet. It solves a ton of problems, but it introduces a ton of potential challenges. At the end of the day, you can't really beat proper modularization (via Sass or scoped styles in Vue components or what have you, perhaps) of styles and class naming conventions that make sense. Tailwind brings a lot to the table, sure, but it really brings a lot (by way of overhead and build process shenanigans). It ain't magic, folks (but if you like it, you'll really like it).
Just a minor thing, but I believe Tailwind's @apply is a PostCSS directive, even if Sass provided that directive first.
Definitely agree something like Purgecss is needed. Love Tailwind, but I'd have a hard time shrinking my production CSS otherwise with the shear number of variants.
You're right, of course (since Tailwind needs PostCSS to function properly for most applications). I use Nuxt, so I'm used to over-abstraction to the point where "it just works", so I tend to forget where things actually come from.
Also, no worries. Was mainly mentioning for others who would read. I'm really glad Tw has this directive too. I haven't yet, but I have some Vue components I'm thinking of taking the Tw classes from and turning into CSS components—small things that make sense now that I've used Tw on this one project for a while. This directive will really come in handy in this case.
PurgeCSS is a must with tailwind. They actually added it as a built in feature in the latest release so it's super easy to get it up and running now.
I think this actually gives them a one-up on bootstrap now too as it does now mean that the out of the box compiled production css is far smaller than bootstraps.
Ah, I see! Thanks for the heads-up (I've been using 1.3, so I didn't catch that update). You got a point there; Tailwind + Purge (especially now that there's first-party support for the integration) is a winning combination.
I agree with this especially: To me, SASS is the future of CSS, but Tailwind means you can write less Sass, especially for reusable things.
I think the way forward would be to write high-level SASS mixins (say, 'content-column') on top of low-level ones (say 'content-margin' and 'body-text'), and then once some of the high-level ones are used widely across an app, you could promote them to utilities like Tailwind's.
This would give you a good compromise: readable markup, centralized rules, a separation between component and utility, and last, it would save some duplication in the generated CSS.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Here's my two cents (rounded to a nickel since Canadian pennies are no more...):
Tailwind is super useful as opposed to a lot of other frameworks, IMO, because it doesn't have a pre-determined philosophy. Bootstrap/Foundation/Bulma/Materialize/Vuetify & co. say "this is a button" or "this is a navigation drawer."
That kind of paradigm is useful when you don't have those ideas floating around in your head already, or you like the way they do it. But what if you want to change the margins, padding, font size, or what have you of one of those components? I'm working with Vuetify right now, and I can say first-hand that that annoyingly means a lot of
!importants in my CSS...Tailwind (other than the new Tailwind UI, which looks intriguing) is basically just like writing CSS, except most of the normal/mundane things have an easy class (that doesn't come with any side-effects, baggage, or other styles). Want to have a button get bigger on hover? Add
transform hover:scale-105to the classes. Boom. Done.But it doesn't replace CSS, in my opinion. There are some things you just can't break down into reusable classes like that. Like animations, or custom media queries (though Tailwind does come with an ample amount of customization for the latter), or - dare I say - some kind of browser hack to fix that annoying little glitch that happens to the hover styles on last year's version of Chrome...
To me, SASS is the future of CSS, but Tailwind means you can write less Sass, especially for reusable things.
Though, it has its limits. One is fairly obvious; you're still writing a whole bunch of styles, just not in the style block, but right in the HTML. You can easily get a class list that takes up several lines, or trails off beyond the horizon of your editor like a minified, inline SVG. Tailwind does use the
@applydirective of Sass to apply a lot of stuff as mixins, so that can be avoided to some extent.The other, of course, as already mentioned by my fellow commenters, is that you really need PurgeCSS or something like it when you're using Tailwind. It just adds a bunch of mostly-unused bloat to your bundle size otherwise (to the tune of a few hundred kilos, if you aren't careful - and even sometimes if you are). And, at least for me, Purge is almost more trouble than it's worth. Almost.
Bottom line here is that it isn't a magic bullet. It solves a ton of problems, but it introduces a ton of potential challenges. At the end of the day, you can't really beat proper modularization (via Sass or scoped styles in Vue components or what have you, perhaps) of styles and class naming conventions that make sense. Tailwind brings a lot to the table, sure, but it really brings a lot (by way of overhead and build process shenanigans). It ain't magic, folks (but if you like it, you'll really like it).
Just a minor thing, but I believe Tailwind's
@applyis a PostCSS directive, even if Sass provided that directive first.Definitely agree something like Purgecss is needed. Love Tailwind, but I'd have a hard time shrinking my production CSS otherwise with the shear number of variants.
You're right, of course (since Tailwind needs PostCSS to function properly for most applications). I use Nuxt, so I'm used to over-abstraction to the point where "it just works", so I tend to forget where things actually come from.
Nuxt is pretty awesome too (even though I haven't gotten to use it extensively yet). Love Vue!
Also, no worries. Was mainly mentioning for others who would read. I'm really glad Tw has this directive too. I haven't yet, but I have some Vue components I'm thinking of taking the Tw classes from and turning into CSS components—small things that make sense now that I've used Tw on this one project for a while. This directive will really come in handy in this case.
PurgeCSS is a must with tailwind. They actually added it as a built in feature in the latest release so it's super easy to get it up and running now.
I think this actually gives them a one-up on bootstrap now too as it does now mean that the out of the box compiled production css is far smaller than bootstraps.
Ah, I see! Thanks for the heads-up (I've been using 1.3, so I didn't catch that update). You got a point there; Tailwind + Purge (especially now that there's first-party support for the integration) is a winning combination.
This is a pretty balanced take on it.
I agree with this especially: To me, SASS is the future of CSS, but Tailwind means you can write less Sass, especially for reusable things.
I think the way forward would be to write high-level SASS mixins (say, 'content-column') on top of low-level ones (say 'content-margin' and 'body-text'), and then once some of the high-level ones are used widely across an app, you could promote them to utilities like Tailwind's.
This would give you a good compromise: readable markup, centralized rules, a separation between component and utility, and last, it would save some duplication in the generated CSS.