Tailwind CSS v4 in Production: What Changed and What I Love About It

Last week, I tried to update a client’s Laravel + Inertia.js project to Tailwind CSS v4 during a live deployment. The assets built just fine, but users suddenly saw massive layout shifts on mobile. Turns out the new default font scaling in @tailwindcss/typography breaks older responsive breakpoints on smaller screens unless you explicitly opt out. I had to roll back, dig through the GitHub migration guide, and rewrite half the typography styles in 2 hours. That was the moment I realized v4 feels like a fresh start—not just an incremental update.

Biggest Shifts in v4: From Configuration to Output

The most noticeable change is the removal of arbitrary values in production by default. Before, you could write text-[28px] and it just worked. Now, it’ll blow up your build unless you add safelist exceptions or enable corePlugins.arbitraryValues. A logistics client in Dubai lost rounded corners on their dashboard buttons after an auto-update—ugh. The upside? PurgeCSS now removes more unused styles.

Color opacity modifiers switched from suffix syntax to RGB channels.

This used to work:

html

<div class="text-blue-500 opacity-50"></div>

Now you write:

html

<div class="text-blue-500/50"></div>

It’s less verbose, but our QA team at Tawasul Limo caught a few missed conversions in RTL components. We had to grep every .tsx and Blade file to fix the old classes.

Here’s what I genuinely prefer in v4:

•Full support for CSS nesting via @nest
•Theme keys like theme.spacing.80 now extend beyond 96px without hacks
•The new text-wrap utilities finally kill tags in Arabic translations

Wait—did you try using aspect-square in v3? In v4, you now write aspect-[1/1] for custom ratios. Which leads me to:

What I Actually Love in Real Projects

The new scroll-margin utilities. On a Vue-based booking system for a Sharjah hotel client, we were wrestling with smooth scrolling to form sections. Instead of writing custom CSS, this worked out of the box:

html

<section class="scroll-mt-16"></section>

No JavaScript offsets. No window.scrollBy() hacks. It’s small wins like this that save hours.

And I’m obsessed with the new typography plugin API. The v4 upgrade lets me define custom font sizes with explicit line heights and tracking:

theme: {
  extend: {
    fontSize: {
      '2xs': ['0.625rem', { lineHeight: '1rem', letterSpacing: '0.05em' }],
    }
  }
}

Applied this on Reach Home Properties’ property listings to fix inconsistent spacing in mixed Arabic-English headlines.

The Annoying Parts (But You Can Fix Them)

Firefox compatibility warnings during builds. By default, Tailwind v4 uses position: sticky in some utility classes. One of my clients in Abu Dhabi (a food delivery app) got browser console errors on Firefox 91. You’ll want to exclude problematic utilities if you support legacy browsers:

corePlugins: {
  'position-sticky': false,
}

Not the end of the world, but definitely an extra step I didn’t expect.

Then there’s the migration of dark: variants. They changed how dark mode interacts with pseudo-selectors like hover:. We had to reorder 30+ button classes in DAS Holding’s intranet project to prevent invisible text on hover.

UAE-Specific Wins: Bilingual Design Simplified

The new text-direction utilities made Arabic layout tweaks easier on a recent Next.js project. No more manually writing div[dir="rtl"] styles everywhere. For example:

html

<div class="text-left rtl:text-right"></div>

Combined with the :lang(ar) selector in tailwind.config.js, this reduced our RTL overrides by 40% on Greeny Corner’s plant-care UI.

Frequently Asked Questions

Should I upgrade Tailwind v3 to v4 in a large legacy project?

Do it if you need the new typography controls or improved CSS purging. But budget at least 2–3 days for audit/testing, especially if you use PostCSS plugins like autoprefixer.

Does the default JIT engine work better in v4?

Yes, but it’s stricter. The new content array requires full paths in Next.js projects:

content: [
  './src/**/*.{js,ts,jsx,tsx}',
  { relative: 'src', path: '../components/**/*.{js,ts}' }
]

I learned this the hard way on Tawasul Limo’s booking flow.

Did Tailwind v4 fix the 15px default gap in grids?

Not exactly, but the new grid-auto-columns class makes workarounds simpler:

html

<div class="grid grid-auto-[minmax(200px,1fr)] gap-4"></div>

This is more flexible than v3’s fixed grid-cols-3.

How do I test Tailwind changes in production without bugs?

Use @import for utility-first components, then run npx tailwindcss -i ./src/input.css -o ./dist/output.css --minify. Compare both versions in an incognito window—don’t skip this step after the Dubai e-commerce site rollout disaster I had last year.

If you're thinking about upgrading your stack or starting fresh with Tailwind CSS v4, get in touch. I've walked through 40+ projects like this in Abu Dhabi and the GCC, and I can help you avoid the landmines I stepped on so you don't have to.