DEV Community

Discussion on: How to keep Tailwind DRY

 
charliejoel profile image
Charlie Joel

I'm not sure who Wathan & co is, but it sounds like you're not going to like the framework anytime soon.

For the sake of answering your question, I think that a component called which has all the structure, styles and CSS associated with that component under the same folder is much easier to document than a SCSS file stored completely separately from the HTML itself, because you only need to look in one place to find everything related to that component and you could easily reuse that component in another project just by copying one folder. You could still use BEM for that, but you'd have a larger bundle size than if you used utilities only.

What I suggested in the article is that you'd never see a class completely out of context, because it would be attached to a JavaScript component or named in a variable. That's the context for how the class is used.

I wouldn't say the bloat is moved to the HTML in Tailwind unless you're just using plain HTML, which as I said you probably shouldn't be doing. Even then, GZIP can compress Tailwind classes much smaller than BEM classes due to how similar many of the classes are, often only having one character different between groups such as mb-1, mb-2 etc. So even if you were to copy and paste HTML, which isn't recommended, you'd still end up with a smaller bundle compared to BEM.

Thread Thread
 
iamntz profile image
Ionut Staicu

Even then, GZIP can compress Tailwind classes much smaller than BEM classes due to how similar many of the classes are

Actually... not really. The simplistic way archiving works (be it gzip or anything else) is that it:

  1. splits the whole thing (what needs to be compressed) into blocks for 4-8-16kb
  2. creates a dictionary for repeating chars in each of this block

That's why text documents compress so well.

The size argument is not valid, the gain is marginally in most cases.

Some comments have been hidden by the post's author - find out more