4 ms·

I don't use Tailwind anymore at the moment, but in my experience, it does not lead to shipping massive CSS/JS resources. In fact I don't know about any client-s

I don't use Tailwind anymore at the moment, but in my experience, it does not lead to shipping massive CSS/JS resources. In fact I don't know about any client-side JS at all that is emitted by Tailwind (my last experience was 2.x, not sure if anything has changed). Regarding the CSS size, my experience was the opposite, Tailwind output was usually a lot smaller than hand-written CSS. I have nothing against plain CSS either though; but it's at least as easy to make a mess.

troupo 3y ago
I think what the OP meant is: Tailwind requires a build step to extract use classes. Otherwise you need to ship all of it.
- moritzwarhier 3y ago
  It's true that it requires a build step, since tw 2, AFAIK there's not even a way anymore to ship "all of it". CSS rules are generated on-demand for the classes that match tailwinds syntax.
graypegg 3y ago
I think GP is talking about how, without the tailwind build step, you ship all of tailwind, which is unquestionably a lot of CSS that you aren't using. Maybe if you use a CDN, so hopefully the user might have a local cache of it from somewhere else, that can be avoided? Still though, tailwind is pitched WITH it's build step normally, making the author's point about avoiding a build step a bit odd.
- moritzwarhier 3y ago
  This was only the case in Tailwind 1 and heavily discouraged by the documentation, except for development. Tailwind requires a build step and shipping the 1.x development build was explicitly not meant for production. Trying to use tw 1 like this without a build step, you can't even define a custom color scheme. If this is what you want, I'd use a library that actually supports this. Maybe tachyons? But tbh, without the build step I'd consider using Tailwind at all a massive mistake. Then I'd prefer handwritten CSS. Custom properties should make sth like this a lot more viable though. I'm sure there are libraries that better fit this use case, if you want to use a CSS library.
- JimDabell 3y ago
  > Maybe if you use a CDN, so hopefully the user might have a local cache of it from somewhere else, that can be avoided? Browsers partition caches by origin now for privacy reasons, so this is no longer possible. If the user doesn’t have it cached from your website, they don’t have it cached.
robinson7d 3y ago
Did your experience involve the (recommended) build step? It uses, at least last I checked, a purgeCSS step to remove unused rules and decrease the css size.
- moritzwarhier 3y ago
  This changed in tw 2, everything is generated on demand, PurgeCSS is no longer used.
tipiirai 3y ago
> Tailwind output was usually a lot smaller than hand-written CSS: Tailwind output is massively bigger than the one with semantic CSS. Here's a comparison: https://nuejs.org/blog/tailwind-vs-semantic-css/ https://nuejs.org/blog/tailwind-vs-semantic-css/

troupo 3y ago

I think what the OP meant is: Tailwind requires a build step to extract use classes. Otherwise you need to ship all of it.

moritzwarhier 3y ago
It's true that it requires a build step, since tw 2, AFAIK there's not even a way anymore to ship "all of it". CSS rules are generated on-demand for the classes that match tailwinds syntax.

graypegg 3y ago

I think GP is talking about how, without the tailwind build step, you ship all of tailwind, which is unquestionably a lot of CSS that you aren't using. Maybe if you use a CDN, so hopefully the user might have a local cache of it from somewhere else, that can be avoided? Still though, tailwind is pitched WITH it's build step normally, making the author's point about avoiding a build step a bit odd.

moritzwarhier 3y ago
This was only the case in Tailwind 1 and heavily discouraged by the documentation, except for development. Tailwind requires a build step and shipping the 1.x development build was explicitly not meant for production. Trying to use tw 1 like this without a build step, you can't even define a custom color scheme. If this is what you want, I'd use a library that actually supports this. Maybe tachyons? But tbh, without the build step I'd consider using Tailwind at all a massive mistake. Then I'd prefer handwritten CSS. Custom properties should make sth like this a lot more viable though. I'm sure there are libraries that better fit this use case, if you want to use a CSS library.
JimDabell 3y ago
> Maybe if you use a CDN, so hopefully the user might have a local cache of it from somewhere else, that can be avoided? Browsers partition caches by origin now for privacy reasons, so this is no longer possible. If the user doesn’t have it cached from your website, they don’t have it cached.

robinson7d 3y ago

Did your experience involve the (recommended) build step? It uses, at least last I checked, a purgeCSS step to remove unused rules and decrease the css size.

moritzwarhier 3y ago
This changed in tw 2, everything is generated on demand, PurgeCSS is no longer used.

tipiirai 3y ago

> Tailwind output was usually a lot smaller than hand-written CSS: Tailwind output is massively bigger than the one with semantic CSS. Here's a comparison: https://nuejs.org/blog/tailwind-vs-semantic-css/ https://nuejs.org/blog/tailwind-vs-semantic-css/