Tailwind CSS is the worst…
Based on Fireship's video on YouTube. If you like this content, support the original creators by watching, liking and subscribing to their content.
Tailwind’s main benefit is safer, faster UI styling by co-locating utility classes in the HTML so developers can see exactly which styles apply.
Briefing
Tailwind CSS earns its reputation not because it’s “better CSS,” but because it solves a set of practical pain points in how teams write and maintain styles—while trading away some familiar workflows along the way. The core value is speed and safety: instead of scattering CSS rules across separate files and then guessing which selectors affect which elements, Tailwind pushes styling into the HTML using standardized utility classes. That co-location reduces the mental overhead of tracking down behavior later, making changes less likely to break unrelated parts of the UI.
The first problem Tailwind targets is “co-location.” For decades, CSS has typically been separated from markup to preserve separation of concerns. But that separation forces developers to invent and maintain arbitrary class names, and when they return weeks later, it’s easy to forget what those names actually do—especially if the same class appears in multiple places. Tailwind replaces that guesswork with utility classes that live right next to the elements they style. The result can look like “disgusting bloated HTML” at first glance, but the payoff is clear: developers can see exactly which styles apply, modify them with more confidence, and avoid accidental UI regressions. A practical workaround is also mentioned—using the inline fold vs code extension to minimize the visual clutter.
Second, Tailwind addresses the problem of writing CSS by hand. Hovering over a Tailwind class reveals the underlying CSS, and the framework’s naming conventions compress common multi-property patterns into single utilities (for example, “inset 0” replacing several lines of vanilla CSS). The transcript estimates Tailwind can reduce total code volume to roughly one-third of what pure CSS might require. Still, this comes with a cost: developers must learn an abstraction layer on top of CSS, which some consider less ideal than using the platform natively.
Third, Tailwind positions itself between extremes. Bootstrap-style frameworks provide constraints that help teams ship quickly, but they can also make customization feel like fighting the defaults. Tailwind aims for the middle ground: it offers a consistent baseline so UIs don’t look random, yet it’s easier to adapt to custom designs because the styling is built from composable utilities rather than a rigid component theme.
Finally, Tailwind tackles “zombie styles”—unused CSS that bloats bundles. Tailwind’s purge mechanism removes dead styles, cutting unnecessary payload. The trade-off is setup complexity: installing the Tailwind CLI, configuring PostCSS, and adding a VS Code extension takes several steps, so the transcript suggests using Tailwind mainly for larger projects. For smaller demos, it mentions Pico CSS as an alternative that can achieve good-looking results with less configuration.
The takeaway is pragmatic: Tailwind isn’t universally superior, but it can be a strong fit when its workflow matches the team’s needs. If it helps, use it; if it doesn’t, don’t—because most people outside the developer community won’t care about the internal tooling decisions behind the UI they use.
Cornell Notes
Tailwind CSS is presented as a productivity-focused CSS approach that targets common maintenance problems: tracking which styles apply, writing repetitive CSS, customizing UI without fighting a framework, and eliminating unused “zombie” styles. By co-locating utility classes in the HTML, it removes the need for arbitrary class naming and reduces the mental work of debugging or safely changing UI behavior later. Utilities also compress multi-line CSS patterns into single classes, potentially reducing total code volume. Purging removes unused styles to shrink bundles, but the setup can be heavy-handed, making Tailwind better suited to larger projects than quick demos. The overall message is to use Tailwind when its trade-offs fit the project, and skip it when they don’t.
How does Tailwind’s “co-location” change day-to-day CSS maintenance?
What does Tailwind gain by using utility naming conventions like “inset 0”?
Where does Tailwind sit relative to Bootstrap and “vanilla” CSS control?
What are “zombie styles,” and how does Tailwind address them?
Why might someone choose Pico CSS instead of Tailwind for smaller projects?
Review Questions
- What maintenance risks arise from separating CSS from markup, and how does Tailwind’s co-location reduce those risks?
- Which Tailwind benefits are tied to its purge mechanism, and what setup costs come with using that workflow?
- How does Tailwind’s customization position differ from Bootstrap’s default look and vanilla CSS’s flexibility?
Key Points
- 1
Tailwind’s main benefit is safer, faster UI styling by co-locating utility classes in the HTML so developers can see exactly which styles apply.
- 2
Separating CSS from markup often forces arbitrary class naming, which can become hard to remember and risky to modify later.
- 3
Utility classes compress common CSS patterns into single names (e.g., “inset 0”), potentially reducing total code volume compared with vanilla CSS.
- 4
Tailwind aims for a middle ground between Bootstrap’s constrained defaults and vanilla CSS’s too-open control.
- 5
Tailwind’s purge process removes unused “zombie styles,” shrinking CSS bundles but adding setup complexity.
- 6
Tailwind may be a better fit for larger projects, while smaller demos might favor simpler alternatives like Pico CSS.
- 7
A practical decision rule is to use Tailwind only when its trade-offs match the project’s needs, since most users don’t care about the underlying tooling choices.