DEV Community

Cover image for 🧩 When Tailwind Breaks in Production: How Environment Differences & Material UI Style Conflicts Caused a UI Nightmare
jatin shankar srivastava
jatin shankar srivastava

Posted on

🧩 When Tailwind Breaks in Production: How Environment Differences & Material UI Style Conflicts Caused a UI Nightmare

✨ The Mystery

My local setup (Windows + Tailwind + Material UI) showed a beautifully working interface.
But when I deployed it to an Ubuntu EC2 server, the UI broke components misaligned, text sizes changed, layouts distorted.

On inspecting closely, everything looked like it was loading fine no missing files or 404s in the network tab but the styling was clearly off.

⚠️ The Two Big Culprits

  1. Different behavior of Tailwind CSS in Windows vs Ubuntu
  2. Material UI (MUI) Emotion styles overriding Tailwind classes

🧵 Let’s Unravel This

🚨 1. Tailwind CSS Behaving Differently in Production

Windows is case-insensitive, Ubuntu is case-sensitive.

This led to two huge problems:

  • Incorrectly imported files with mismatched cases (like ./Component/Button vs ./component/Button) didn’t break in Windows, but broke silently in Ubuntu during build.
  • Tailwind’s JIT compiler purges unused classes. If class names are generated dynamically (className={'text-' + size}) or if files aren’t properly picked up in tailwind.config.js, classes are dropped in production.

Result: styles applied locally vanished in Ubuntu build.

🧪 2. Material UI’s Emotion Styles > Tailwind CSS?

When using both Tailwind and MUI together, you might write something like:

<Typography variant="h2" className="text-3xl font-bold font-montserrat">
  My Heading
</Typography>
Enter fullscreen mode Exit fullscreen mode

But what happens?

  • The variant="h2" automatically injects Emotion-generated classes like .css-abcd123, which define font size, weight, line height, etc.
  • Emotion classes are injected later in the DOM, giving them higher specificity and cascade priority than Tailwind’s utility classes.
  • So even if you say text-3xl it’s ignored because MUI’s h2 variant says font-size: 1.5rem.

đź’Ł Result: your Tailwind styles are silently overridden.

🧰 Debugging with WSL (Ubuntu on Windows)

Instead of repeatedly deploying to EC2, I setup the same environment locally using WSL.

đź›  How I did it:

  1. Installed Ubuntu with WSL: 
   wsl --install
Enter fullscreen mode Exit fullscreen mode
  1. Installed Node & npm using nvm: 
   nvm install 18
   nvm use 18
Enter fullscreen mode Exit fullscreen mode
  1. Copied my project to the Ubuntu home directory: âť— Avoid /mnt/c/... because it causes permission errors while building. 
   cp -r /mnt/c/Users/Prateek/jatin/big-o-health/new ~/projects/
   cd ~/projects/new
Enter fullscreen mode Exit fullscreen mode
  1. Built the project just like production: 
   npm install
   npm run build
   npm start
Enter fullscreen mode Exit fullscreen mode

And boom đź’Ą the exact same UI issues happened here as on EC2.

đź’ˇ Root Causes (Confirmed):

Problem Cause Fix
Tailwind classes missing Case-sensitive paths or not matched in purge Use proper casing, expand content paths in tailwind.config.js, or safelist
MUI overrides Tailwind Emotion injects styles with higher specificity Avoid MUI variants or use sx only
Fonts falling back Font not loading in Ubuntu Use next/font/google or host fonts manually
Layout shift on load Tailwind CSS loading late Move Tailwind CSS up in <head>, preload key assets, or server-side render critical CSS
Different render order Windows vs Ubuntu file system difference Test builds in WSL to simulate production exactly

âś… Styling Best Practices (when using MUI + Tailwind)

Option A: Prefer Tailwind (avoid variant props) 

<Typography component="h2" className="text-3xl font-bold font-montserrat">
  Heading
</Typography>
Enter fullscreen mode Exit fullscreen mode

Option B: Prefer MUI’s sx prop (no Tailwind) 

<Typography variant="h2" sx={{ fontSize: '2rem', fontWeight: 'bold' }}>
  Heading
</Typography>
Enter fullscreen mode Exit fullscreen mode

Option C: Carefully manage specificity using Tailwind v4 layers 

@layer theme;
@layer base;
@layer mui;
@layer components;
@layer utilities;
Enter fullscreen mode Exit fullscreen mode

This allows you to explicitly inject Tailwind @utilities after MUI styles.

🧠 Key Takeaways

  1. Your environment matters – Windows ≠ Linux. Always test in the environment you’re deploying to.
  2. Tailwind’s JIT + purge = ruthless – dynamic class names and incorrect casing will silently break your styles.
  3. MUI’s Emotion styles are powerful – and may override Tailwind even if you specify classes.
  4. WSL = debugging superpower – replicate EC2 behavior locally without deploying every time.
  5. Be consistent in styling approach – mixing Tailwind and MUI works, but with caution and clarity.

Top comments (0)