[agos]

no, a single html attribute containing "relative before:absolute before:top-0 before:h-px before:w-[200vw] before:bg-gray-950/5 dark:before:bg-white/10 before:-left-[100vw] after:absolute after:bottom-0 after:h-px after:w-[200vw] after:bg-gray-950/5 dark:after:bg-white/10 after:-left-[100vw]" is not "easier to read" (example taken at random from the Tailwind homepage)

[oneeyedpigeon]

Just viewing the source of the Tailwind homepage breaks me out in a cold sweat. And then there's:

    > console.log(document.querySelectorAll("body > script").length)
    27

[aembleton]

Easier to figure out what to change without affecting other HTML components, though.

[superq]

Individually applied styles kinda defeats the purpose of cascading style sheets though.

As someone who's quite conversant with regular CSS, I really did like the ease of applying whatever style I wanted right in the code without needing to "worry" about whether this div is a "panel" or a "hero" or whatever, but it really does tend to make a huge mess of my HTML in very short order.

[8n4vidtmkvmk]

Have y'all not heard of css modules or BEM?

[jitl]

pointless make-work compared to inline-styles-like workflow like tailwind, if you have a component framework

[8n4vidtmkvmk]

You might like Styled Components then, if you're using React anyway. Not sure if there's similar systems for other frameworks. I don't consider it pointless make-work to develop a consistent stylesheet to use throughout your app though.

[jitl]

Styled Components is too low-level (let’s name every div!!!) and comes with a substantial performance cost. Tailwind is a much better option.

[8n4vidtmkvmk]

> a substantial performance cost

I believe the Babel plugin eliminates most of the performance cost.

The naming is double-edged. Often you want to re-use your styled element, so the fact that it has a name from the get-go makes that really easy. But you're right, sometimes it's annoying to pull bits out that you didn't really want to.

Ultimately I went back to CSS Modules. I just don't understand why I'd want to the appeal of Tailwind.. I'd have to learn a new DSL that ultimately gives me less control.

[presentation]

Use PandaCSS, the result is similar but the syntax is a readable object instead of… that