Discussion on: TailwindCSS: Adds complexity, does nothing.

[Brian M.]

You can replace the word "boss" with "others".

[Kerry Boyko]

Still doesn't change the problem.

It seems like the problem is one of scoping, and tooling though, now that you mention it.

First, it seems like you're editing a global .css file. Now, whether it's SCSS, CSS Modules w/ a bundler (Webpack? Rollup?) it's... rare these days for there to be one universal CSS file precisely because web development has gotten much more complex. The output might be a single CSS file - that's the point of a bundler after all - but the input shouldn't be.

One of the key things you can do with CSS (and it's even easier in SCSS) is to introduce scoping.

So, let's say that you have a pet page.

All you have to do is, in the root of that pet page (whether it's

or or whatever...) is add )

You can then write styles that apply only to that pet page.

/* CSS */
.pet-page h1 {
    font-family: Lobster, Comic Sans, Sans;
}
.pet-page h2 {
    font-family: Lobster2, Lobster, Comic Sans:
}
.pet-page .call-to-action {
    color: pink;
    border: 3px dotted pink;
    padding: 5px;
}

It's even easier in SCSS

/* SCSS */
.pet-page { 
  h1 {
    font-family: Lobster, Comic Sans, Sans;
  }
  h2 {
    font-family: Lobster2, Lobster, Comic Sans:
  }
  .call-to-action {
    color: pink;
    border: 3px dotted pink;
    padding: 5px;
  }
}

This is the power of CSS Combinators, one of the things you lose with Tailwind.

[Brian M.]

Sorry, I guess I should have been clearer. I understand scoping, components and most modern css best practices. I used to do agonize over all that with sass/less/postcss - code splitting across files where it made sense, components, namespace scoping, BEM and other methodology experiments. All with some form of build using npm/gulp/grunt/bundlers/etc. Now we just tailwind and don't really need the other stuff. It works great for our team.