How to Fix CSS in React / Next.js
React CSS comes in four flavours: global stylesheets, CSS Modules, CSS-in-JS (styled-components, Emotion), and utility frameworks (Tailwind). Each has different debugging patterns. This guide covers React/Next.js-specific CSS issues. Pair with CSS Checker guide.
Step-by-step: How to fix React / Next.js CSS
- Identify your CSS approach. Check imports in components and global config. CSS Modules: .module.css files. CSS-in-JS: styled-components or @emotion/styled imports. Tailwind: tailwind.config.js + utility classes in JSX. Global: imported into _app.tsx or layout.tsx.
- Audit CSS weight. DevTools Coverage tab. React apps often have 100-300KB CSS, 60-80% unused per page. Tailwind users: verify content array in tailwind.config.js includes all source paths — purge depends on this.
- Fix hydration flicker (FOUC) in CSS-in-JS. styled-components and Emotion can show flash of unstyled content during hydration. Fix: configure SSR (styled-components: ServerStyleSheet in _document.tsx; Emotion: createCache + CacheProvider). Next.js 13+ App Router needs styled-components v6 with directive 'use client'.
- Switch to CSS Modules or Tailwind for new projects. Modern Next.js (13+) defaults discourage CSS-in-JS due to RSC compatibility issues. CSS Modules (built-in) and Tailwind work cleanly with Server Components. For greenfield projects, choose CSS Modules or Tailwind.
- Optimise Tailwind purge. tailwind.config.js content array must include all paths where Tailwind classes appear: ./app/**/*.{js,ts,jsx,tsx}, ./components/**/*.{js,ts,jsx,tsx}. Missing paths = unused classes shipped (CSS bloat). Run npx tailwindcss with --watch in dev; build with NODE_ENV=production for optimal purge.
- Add critical CSS. Next.js extracts critical CSS automatically with experimental.optimizeCss in next.config.js. For other React setups, use critters or critical CLI to inline above-fold CSS.
- Validate dark mode and theming. CSS variables (--bg, --text, etc.) updated via class toggle on html. Tailwind dark: prefix. CSS-in-JS theme object via ThemeProvider. Test mode-switch — content shouldn't flash wrong theme.
Frequently Asked Questions
CSS Modules vs CSS-in-JS vs Tailwind in 2026?
Tailwind: most popular for new projects, fast iteration, clean RSC compatibility. CSS Modules: built into Next.js, no runtime cost, fine for component scoping. CSS-in-JS (styled-components, Emotion): falling out of favour for Next.js App Router due to RSC limitations. New projects: Tailwind or CSS Modules. Migrating existing CSS-in-JS: not urgent.
Why does my styled-components Next.js app show FOUC?
Server didn't extract styled-components styles, so client renders unstyled first then styled after hydration. Fix in Pages Router: ServerStyleSheet in pages/_document.tsx. Fix in App Router: styled-components v6+ with 'use client' directive and styled-components/babel-plugin. App Router compatibility is fragile — consider migrating to Tailwind.
How do I find unused Tailwind classes?
Build with production mode (npm run build). Inspect final CSS file size. If much larger than expected, content paths in tailwind.config.js are incomplete. Tools: tailwindcss-stats (analyses build), Tailwind CSS IntelliSense (VS Code, warns about unused classes).
Should I use shadcn/ui for React projects?
Yes for many use cases. shadcn/ui is copy-paste components built on Radix UI + Tailwind — you own the code, no library dependency, fully customisable. Modern alternative to Material UI / Chakra. Most popular UI approach in late 2025 / 2026.
How do I fix CSS specificity issues in React?
Same as any CSS: increase specificity intentionally. CSS Modules autoscoping helps. Tailwind: use important: prefix sparingly (utility !important). CSS-in-JS: use && or @container queries. !important is symptom of architectural problem; address by restructuring CSS rather than adding more !important.