CSS is one of those things that looks simple, until you actually try to reason about it. Most people consider CSS an easy language to learn, yet somehow, LLMs that can solve calculus problems still get defeated by a few lines of CSS.
In this article, I'll share my thoughts on why Generative AIs struggle to create good layouts, and how TailwindCSS helps them overcome this challenge.
Let's imagine we're using CSS the way the web originally intended, with a separate CSS file, defined selectors, and a linked stylesheet. In this setup, let's discuss the CSS nature.
1. Everything Depends on Context
In CSS a single rule like position: relative can completely alter the layout and even all other properties behavior. So one line might behave in many different ways, depending on where it used.
By design, it's impossible to look at a single part of a CSS file and predict exactly what you'll see in the browser.
For any layout property, you need to understand its stacking context, containing block, layout mode, writing-mode, direction, and the list goes on.
These hidden relationships are so complex that many developers aren't even aware of them. We often end up "fixing" the layout by trial and error. Playing with properties until something finally works.
Now, let's make it even worse!
2. CSS Never Tells the Whole Story
A CSS file only gives you half the context.
You can read every selector and property you want, but until you see the HTML, you have no idea how those styles actually connect to real elements.
It's like trying to understand a movie by reading its unordered subtitles. the information is there, but completely out of context. Or even worse. Because of the cascading nature of CSS, even the parts you think you know might change later.
3. There's No One True Way to Write CSS
⚠️ Please read the next paragraph carefully, every word matters.
CSS is an ever-evolving, declarative, cascading language, shaped by an open community, and implemented by browsers that each have their own priorities and can't afford breaking changes. It's not abstract enough to express a the layout intents directly.
Which is why there are so many ways to center a div.
Beyond the countless ways to achieve the same result, there are just as many methodologies for writing CSS itself. Have you ever came across BEM, SMACSS, OOCSS, atomic CSS, etc. If not, then you can add yours to the list.
The endless mix of techniques, conventions, and methodologies means there's no universal way to reason about CSS across projects.
Every team has its own flavor, and that adds to the chaos specially for LLMs.
Chaos
Now, combine all three problems:
- Context-dependent behavior
- Missing half the story
- No consistent structure or conventions
CSS becomes an unpredictable puzzle of dependencies, overrides, and invisible context. For a language model that relies on clear patterns and relationships "it's a nightmare".
But GenAIs are not that bad. Are they?
The Underrated Contribution of Tailwind
In my opinion, Tailwind CSS is the underrated hero of the AI era.
It brings order to the madness and gives machines a predictable way to reason about styling. Here's why:
- Colocation of structure and style: Giving full context in one place.
- Opinionated: a small, consistent set of utilities means no guessing or inventing conventions. That can shape repeating patterns.
- Predictable output: each class does one thing, with no unexpected cascade effects.
That predictability is exactly what makes Tailwind LLM-friendly.
So next time you ask an AI to build you a webpage, just say "use Tailwind."
Chances are, it was going to do that anyway. 😄
Thanks for reading :)
Update
PS: I'm not promoting Tailwind or claiming it's better than other approaches. I’m just sharing some observations about why it works so well for AI models
Top comments (18)
Also, another factor is code generators are built on language models, which are notoriously poor at spatiotemporal reasoning and CSS visual layout is fundamentally a spatial task. LLMs can semantically explain positioning, cascading, and even animation concepts and a lot of times can generate syntactically correct code. Interestingly, they can often instruct you through layout problems step-by-step, but struggle to successfully execute the same task autonomously.
But that frequent execution failure is because they’re not actually reasoning about spatial relationships or temporal sequences… they’re pattern-matching on training data. And it’s not a ‘pattern matching isn’t reasoning’ thing. It’s that their pattern-matching based reasoning is based in a completely symbolic space so that gap between explanation and execution reveals the limitation that semantic understanding without spatial/temporal modeling. It’s like asking a landscape artist who’s face-blind to paint a portrait.
Tailwind helps by collapsing the semantic-spatial gap - utility classes create tighter coupling between “what you write” and “what appears,” reducing the reasoning distance the model has to traverse.
That's an interesting point of view, Thanks for sharing.
Stealing this quote from you for later use:"It’s like asking a landscape artist who’s face-blind to paint a portrait."
Feel free, I'm glad you liked it!
This post combined with Dead framework theory makes me scared for the future of website development.
At what time creative developers are just going to stop thinking about new solutions, because they are forced to use technology that has be become so ubiquitous it is not possible to it another way.
Using Tailwind is a very extreme way of doing CSS things. Making everything a utility class is like creating everything out of lego. Do you use it to build vehicles or buildings, yes for the novelty but in the end you do want a sturdier building material if you want it to last.
I'm not going to deny CSS is strange and people have to find their own way to use it. But CSS is the art of the website. It is fun to color in an already drawn Mona Lisa, but if you know what techniques are used to create the real thing you will understand it is a skill you can master in.
Sure redesigns happen regularly, but with Tailwind you have to start from scratch every time, because that is how utility classes work.
If AI doesn't understand CSS, then it is not the right tool to use. Don't rely on your tool to come up with solutions for you. You don't use a hamer to install windows.
Great read! The way you compared CSS’s context to how AI interprets it makes total sense.
Informative Broski....
helpful 🫡
I liked the images, and the information about CSS is really helpful.
Absolutely nailed it. CSS looks simple on the surface, but reasoning about layout, stacking contexts, and cascades is anything but. Tailwind works so well with LLMs precisely because it turns those implicit relationships into explicit, composable utilities. It’s like giving the AI a clear API for styling.
In my experience, generative AI has been fine as an assistant when creating CSS. I don't personally use it, but I've played around and seen it work well. It's going to fall down on big, messy, badly-designed projects of course.
It's interesting to think that using Tailwind makes it easier for the assistant to work. I hadn't really thought about that, probably because every "AI" seems to want to use Tailwind by default. It's really common in the examples it plagiarises, so that makes sense.
I don't think it's a terrible idea for examples to be shown that use Tailwind behind the scenes if it makes them easier for the AI to produce. You get your answer, you see a pretty depiction, and you go away and write it properly yourself. However, I don't want to back anything that even indirectly promotes the use of Tailwind, since I consider it to be a step in the wrong direction.
Super interesting read, not just about why CSS is hard for AI, but even more about the peculiarities of CSS, and why it is so complex (and hard to grasp - not the basics of it, but to grasp it at "expert level") ...
This leads me to the question: is CSS fundamentally ill-designed, or "broken", or are we just using it for things (e.g. dynamic web "apps") for which it was never intended and for which it's in fact ill-suited?
Supporting that idea - note that in the mobile app world (iOS, Android), the native UI frameworks do not use CSS, or something which looks like it - they use their own layout and styling frameworks, which aren't like CSS at all ...
Or am I really comparing apples and oranges here, and treating CSS unfairly/wrongly in doing so?
CSS isn't ill-designed or broken, and it's not being used for things for which it wasn't intended, but it is too often used in a way that it wasn't intended. CSS is designed to be written specifically for a given HTML document and in particular the semantics of its content, but often when CSS is written in a style sheet authors mistakenly attempt to abstract this coupling away.
And that is the mistake that you can't really make with Tailwind. Because you're writing the styling directly on the element there's no opportunity for that abstraction and you're forced to style the content that right there in that place, and only that particular content.
Super! The way you broke down how sneaky-complicated CSS actually is and why Tailwind makes life easier for LLMs totally clicked for me.
Some comments may only be visible to logged-in visitors. Sign in to view all comments.