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 :)
Top comments (0)