Shopify
[2025-07] Flash of Unstyled Content (FOUC) in production when using Tailwind CSS v4
[2025-07] Flash of Unstyled Content (FOUC) in production when using Tailwind CSS v4
What is the location of your example repository?
N/A - Issue occurs with default Hydrogen scaffolding
Which package or tool is having this issue?
CLI
What version of that package or tool are you using?
@shopify/cli-hydrogen@latest
What version of Remix are you using?
React Router v7 (default in current Hydrogen)
Steps to Reproduce
- Create a new Hydrogen project with Tailwind CSS v4
- Build for production (
npm run build) - Preview the production build (
npm run preview) - Navigate between routes
Expected Behavior
Styles should load before content renders. No visual flash when navigating between routes in production.
Actual Behavior
The Problem: My production Hydrogen store using Tailwind CSS experiences flash of unstyled content (FOUC), especially when third-party scripts, custom fonts, and analytics are added. Customers briefly see unstyled HTML before CSS applies.
What I Found:
- CSS loads after JavaScript execution (no priority hints in scaffolded template)
- Different CSS handling between dev and prod environments
- CSS is split per route, causing flashes on navigation
- The default
root.tsxdoesn't optimize CSS loading
Why This Matters: In production with real-world conditions (third-party scripts, CDN fonts, analytics), the FOUC becomes very noticeable. Customers see broken-looking pages during navigation, making the site feel slow and unprofessional. This is especially problematic for e-commerce where first impressions matter.
The issue only appears in production builds, which means developers don't catch it during development - leading to surprises after deployment.
