[pier25]

That's the biggest problem with TW IMO.

It's much more difficult to scan a list of classes in a single line. With CSS I can quickly scan the declarations from top to bottom until I find the thing I want.

Complex nested declarations are also super easy to scan when using SCSS. When you start adding pseudoclasses with TW it becomes a shit show.

And it really makes the markup an absolute mess for anything other than trivial examples.

People complain about not knowing where the styles are, which was a valid concern when doing old school CSS (everything in a couple of files) but I haven't had that issue since I started using SCSS in almost a decade.

When doing front end with components I store the SCSS for the component in the same directory of the component file. Eg: MyComponent.svelte and MyComponent.scss. Super easy and clear. I've also written a small VSCode extension that allows me switch between the component and its SCSS file with a shortcut. I don't even have to open the SCSS file or look for it. I configure Webpack or whatever I'm using to automatically include the .scss files in the component folders. I have all the convenience and control I want without relying on something as convoluted as TW.

[jozzy-james]

explain to me how this compiles

  .class1 {
    .class2 {
      &:hover {
        font-family: value;
      }

     body.some-thing & {
       color: woooooo;
     }
    }
  }

[unleashit]

I don't think the example compares. In languages like JS, double, triple or even further nested ternaries are possible. But terser isn't always better because human readability is important. I can easily understood your SASS example because I know SASS, but I'd never write it like that. If I really wanted to add a decedent selector from a body class to .class1, I'd start a new nest on the body tag.

The problem with Tailwind is there's nothing you can do to avoid the much more difficult to scan and understand syntax described above. I personally don't understand why people are drinking this koolaide. I really think this is a fad a lot of people are going to come to regret when they go back to maintain older projects based on it.

[jozzy-james]

> If I really wanted to add a decedent selector from a body class to .class1, I'd start a new nest on the body tag.

a) maybe you don't really know how far up the chain that tag gets called from.

b) it creates new selectors for class1 and class1.class2, as well as class1.class2's hover

c) creates a hyper specificity

now, I'm not advocating this usage of SASS - but it can be a handy hatchet when you need to support multiple themes with minimal changes/effort, much to the chagrin of specificity and maintainability

[unleashit]

The point I was trying to make was just because Tailwind doesn't happen to be expressive enough to get you into that particular kind of mess isn't a reason to use it. True, its fair to say you can write bad CSS or SASS, but that's the same for all programming languages. If your main goal is something foot gun free and safe for the inexperienced, might as well go all the way and recommend low/no code or even Squarespace.

I think the reason a lot of ppl think they need tailwind, is because a) they aren't familiar enough with more current CSS techniques like CSS modules and linting which can limit stuff like nested descendant selectors and/or b) they're tricked into thinking they won't have to learn as much about CSS (a dangerous fallacy unless you're sticking to the most basic of prototypes!).

[pier25]

> I really think this is a fad a lot of people are going to come to regret when they go back to maintain older projects based on it.

Yeah 100%

But if you look at the State of CSS survey, TW is still relatively not as popular as Twitter or HN would make you believe.

https://2021.stateofcss.com/en-US/technologies

[pier25]

I guess the point you're making is that TW prevents you from making certain errors.

Which is technically true but irrelevant. TW doesn't prevent you from understanding fundamental CSS concepts such as the box model, cascading, etc. Anyone with even basic CSS knowledge would not write this nonsensical and malicious example you just used.