Sign in Get started

Free course · 12 lessons · Intermediate

Tailwind CSS in Production

The Tailwind CSS problems real teams hit, each with a live demo and the fix: classes missing from the build, overrides that don't apply, v3-to-v4 upgrade regressions, unstyled CMS content, dark-mode flashes, design drift, z-index stacking bugs, mobile overflow, removed focus styles and bloated stylesheets, plus two capstones.

Start the course

1. Missing and Wrong Styles

Classes that never reach the CSS file, overrides that don't override, upgrades that shift every border, and content Preflight strips bare.

  1. The Badge That Lost Its Colour — Status badges rendered grey in production because their colour classes were built from string fragments that Tailwind's scanner never saw.
  2. The Button That Ignored Its Override — A shared Button component accepted extra classes, but passing p-2 or bg-red-600 did nothing: conflicting utilities are decided by CSS order, not class order.
  3. The Upgrade That Changed Every Border — After upgrading to Tailwind v4, borders turned dark, focus rings got thinner and shadows looked different, because several defaults and names changed.
  4. The Blog Post with No Headings — Rich text from the CMS rendered as one undifferentiated block: Tailwind's Preflight reset removes default heading sizes, margins and list bullets.

2. Theming and Consistency

Dark-mode flashes, a design that slowly drifts into dozens of one-off colours, and dropdowns lost behind other layers.

  1. The White Flash in Dark Mode — Users who chose dark mode saw a bright white flash on every page load, because the dark class was added by JavaScript after the first paint.
  2. Fourteen Shades of Blue — A year of arbitrary values left the product with fourteen different blues, five border radii and spacing that never quite lined up.
  3. The Dropdown Behind the Header — A user menu opened behind the next section no matter how high its z-index went, because a parent created a new stacking context.

3. Responsive, Accessible and Fast

Pages that scroll sideways on phones, forms keyboard users can't follow, and a stylesheet that grew to a megabyte.

  1. The Page That Scrolled Sideways on Phones — Fixed widths, long unbroken text and flex children that refused to shrink made a checkout page scroll horizontally on phones.
  2. The Form Nobody Could Use with a Keyboard — A designer asked to remove the 'ugly blue outline'. Developers added outline-none everywhere, and keyboard users could no longer see where they were.
  3. The 1.2 MB Stylesheet — Page loads slowed after a stylesheet grew past a megabyte: a broad safelist, scanning dependencies and the Play CDN in production.

4. Capstone Case Studies

Design a shared Tailwind design system for three products, and run the postmortem of a release that broke checkout styling.

  1. Capstone: A Tailwind Design System for Three Products — A company with three web apps (React, Vue and Laravel Blade) wants one consistent, accessible look built on Tailwind v4. Design the system.
  2. Capstone: Postmortem — The Release That Broke Checkout Styling — Write the postmortem for a release in which payment buttons rendered unstyled and invisible on mobile for three hours.

Was this page helpful?