Web Development

I often interact with people who don't like something but haven't used it before, so I'm definitely going to steal your term "informed dislike" to distinguish between those cases and ones that are legit gripes.

Their arguments included the size of the web page, and the time to display the first content, both of which were significantly better in Nue when compared to Tailwind.

By all means argue on what is important (because what is important for your projects may be significantly different from mine), but there were many points that the author was highlighting, not just the separation of concerns. And for my projects, all these concerns are important.

The tailwind style of zero reusability should be quite useful to AI coding, since one its primary flaws is an inability to reuse components.

There's absolutely a massive internal bias people have where they naturally believe that others develop the same kinds of content, when really it's half working on page based content, and half working on component based content.

• Page developers know that putting their styles in the content itself is a disaster when you want to make a global change.
• Component developers know that putting their styles external to their components is a dx nightmare because developers keep making changes that they think only affects one component when it actually impacts a different component (and that change might not be found until months or years later).

Both are correct.

The real problem is developers thinking that there are only two methods for making styles: external css files, and tailwind/atomic styles in class names.

Component developers should have their styles inside their components, but not inlined in style attributes (like in tailwind).

Component developers should instead place a style tag inside their component that is scoped to just that component.

So let's say you're making an accordion component.

Make your html+js/jsx like you already do, and add an "accordion" class to your component's root element. Now add a style tag in your component with a single selector targetting the .accordion class. Now you can use nesting to style anything in the accordion exactly how you want. Want to style something based on whether an element is open or not? Use an attribute selector. Want to style something based on whether it's child is doing something? Use the :has() selector. etc...

If you're making a widget system, use container queries. If you're making a card system, use subgrid.

There's so many obvious use cases that modern css provides for, so use modern css! and not any of this BEM or tailwind nonsense. Now your css is so much smaller, robust and more maintainable.

Follow up questions:

Q: But I don't know modern CSS

A: Learn, it'll be much better for you in the long run compared to using tailwind, then needing to learn something else once people switch off tailwind for something else.

Q: But wouldn't putting a style tag in every component mean that there's going to be two style tags on the page if I put two of the same component on the page?

A: It'll only do that if you make it do that. Most component based frameworks are already set up to reduce repetition, check your framework's docs. (e.g. react's many css-in-js solutions, web component's :host selector, vue's <style> and <style scoped> elements, SSGs like Eleventy have Asset Bucketing, and even native html is getting it's own solution this year with @scope).

CSS is great and every framework that tries to mix styling with the page markup needs to die

Absolutely, the goal of Tailwind is not to allow you to skip learning CSS, and if you don't know CSS well, Tailwind is going to be pretty painful.

I think Tailwind and things like it win out when you've got a good component structured project.

For a more traditional web page ... I think I'd prefer traditional CSS.

React developer?

It helps me make things look presentable without making it look the same as every other website, and without constraining the things I want to do.

They have an agenda on top of the article's agenda.

I don't know what "semantic css" is, to me that's just normal css. I felt the original title could be confusing for people.

I (also senior fs, mostly SSGs and Laravel applications) had a similar revelation coming from componentized, precompiled BEM SCSS - I thought Tailwind was weird, verbose, dumb, and bad until I actually used it.

I got to the point pre-tailwind that I was abstracting most of my design elements out, anyway. (Fuck the custom form elements my clients demand.)

Tailwind just starts you at the point of "I abstracted everything" and trusts you to be DRY.

What did he use before that though? Kind of important to know where he came from :p

you can completely understand how the page will look just by reading the html

You lose being able to read meaning and structure though, and you also lose technical accessibility.

I like to add css hacks to websites. But I can't if they don't have useful, identifying, and stable selectors.

Tailwind is only feels like a successor to CSS to developers writing css like it was 10 years ago (or using frameworks that write it like that, e.g. bootstrap), or projects not using visual regression testing.

Modern css is so much better.

• Want to position, overlap, or align things? Use CSS Grid.
• Are you using a CMS or component system and want to change the order that CSS is applied? Use Cascade Layers.
• Want to have resizeable components? Use component queries.
• Want to make a change all through your site? Use custom properties.
• Want to style things differently based on how many other elements are inside or around it? Use :has(), +, ~, nth-..., ... selectors.

If you're using something like BEM, or bootstrap to make columns, your knowledge is way out of date and you're doing it wrong.

It seems that we’ll get up to 10x soeedups with v4: https://tailwindcss.com/blog/tailwindcss-v4-alpha

The article doesn't include the information that it uses Nuemark, "a standalone library that works under Bun, Node, and Deno", written by the author himself. It "comes with a set of built-in components aimed at addressing the most common content management use cases" and is part of Nue, which the author markets as "A perfect framework".

There is one mention of Nue, in the original comparison, and another at the end under "What is nue?" - Maybe it's "expected" that the reader knows the author is using Nue and shouldn't need to make it clear, as the blog is hosted on nuejs.org, after all. Not the best practice to omit that, tho.

But what really annoys me is people making "minimalist" sites using FUCKING JAVASCRIPT FRAMEWORKS. Use a fucking markdown -> html converter