I think it'd be better for AI and web dev if AIs generated real CSS instead.
The supposed difficulty of tracking from elements to classes to rulesets is something that AIs can easily handle, and being able to change a ruleset once and have the update apply to all use sites is really good for AI-driven changes.
Plus, humans and AIs won't have to wait for Tailwind to adopt new CSS features as they are added. If the AI can read MDN, it can use the feature.
I’ve had zero problems getting Claude to generate CSS.
I generally ask for the following, from scratch for each project:
- A theme file full of variables (if you squint this actually looks a bit like Tailwind)
- A file containing global styles, mostly semantic, rather than just piles of classes
- Specific, per component styles (I often use Svelte so this is easy as they live in the component files and are automatically scoped to the component)
IMO there’s even less need for Tailwind with AI than there was before.
When I see people talking about how good AI is with Tailwind it just feels like they’re lazily copying each other without even trying to avoid unnecessary complexity.
Totally agree with this, and I think it's what will likely happen. IMO Tailwind got to the point where you are adding dozens of classes to the tag and it gets a little unwieldy. There are some options to get around it but if AI just does't need it it's even better.
There's nothing stopping you from requesting the AI write bare CSS. They're pretty decent at that too. And feed back screencaps, ask it to fix anything that's wrong, and five iterations later you have what you want. Just like a developer.
Bonus point: It'll appreciate one of those "CSS is awesome" mugs, too.
I'm not a fan of Tailwind, but I can see that it's probably reasonable for code gen to be able to write / extend projects that use Tailwind, since it's in pretty widespread use. For a new project, maybe it could ask if you want to use Tailwind or just keep things vanilla?
Tailwind is almost too simple to bother using an LLM for. There’s no reason to introduce high-level abstractions (your “real” CSS, I imagine) that make the code more complicated, unless you have some clever methodology.
I don't really like Tailwind, but it's a really good fit for LLM tools because there's basically no context needed like you get with normal CSS inheritance, etc. What you see is what you get.
AI is great at any styling solution via system prompt + established patterns in codebase. Tailwind is just slightly more convenient since it's consistent and very popular.
The thing is LLM generate token by token and if you have to write entire css before writing the html, the quality could be worse.
[dead]
The problem is training data. How many modern web sites use raw CSS?
Counter-argument: the cascade in CSS was a massive design mistake and it shows even more in this particular case.
With LLM-assisted development you spend more time reading and reviewing the generated code. The cascade in styles is nowhere near as readily apparent as something like Tailwind.
I really don’t understand this idea that seems to be prevalent to let the LLM generate everything from scratch instead of using existing battle tested frameworks. Be it for css or backend code.
Good modular design of software and separation of concern are still important for debugging and lifecycle. For (instructing) the llm it will also be easier if it uses frameworks as the resulting code of the project itself will remain smaller, reducing the context for both llm and human.