How to resolve CSS precedence issues between Tailwind CSS v4 and styled-components in Next.js

[stychu]

I am in the process of upgrading a Next.js v14 project (using the App Router) from Tailwind CSS v3 to v4. Our project also uses styled-components for an internal component library.

The Problem

With Tailwind v3, our styles worked as expected, with Tailwind utility classes correctly overriding styles from styled-components.

After upgrading to v4, the CSS load order appears to have changed. Now, styles from styled-components are taking precedence over Tailwind, which breaks parts of our UI. For example, a class that previously worked on a modal no longer applies its styles:

className="[&_#feedbackModal]:bg-brand [&_#feedbackModal]:border-0 md:[&_#feedbackModal]:max-w-[800px]"  

I've also noticed a change in how style tags are injected.

• With v3: I had <style data-styled="active" data-styled-version="5.3.11"></style> tag the head and <style data-styled data-styled-version="5.3.11"></style> in the body of the rendered HTML.
• With v4: I only see one <style data-styled="active" data-styled-version="5.3.11"></style> tag in the head.

What I've Tried

To fix this, I updated my global.css file to use the new v4 syntax. This configuration seems to resolve the precedence issue:

/* global.css */

/* 1. Declare layer order */
@layer theme, base, components, utilities;

/* 2. Import Tailwind styles */
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/preflight.css" layer(base);

/* 3. Import utilities WITHOUT a layer */
@import "tailwindcss/utilities.css";

This works because importing tailwindcss/utilities.css outside of a @layer block gives it the highest precedence, forcing it to override the styled-components styles.

My Questions

While this fixes the immediate problem, I'm concerned it's not the correct long-term solution.

1. What are the potential negative consequences of importing Tailwind's utilities without assigning them to the utilities layer? Will this cause other specificity problems later on?
2. What is the recommended approach for integrating Tailwind CSS v4 with a CSS-in-JS library like styled-components to ensure the correct style injection order in a Next.js App Router environment?

[tanzyy96]

bump on this, need this info too if anyone got past this~

[chanmSC]

Thank you for @stychu for posting what your current workaround is to fix this issue, totally saved me from having to scrap all our whole migration after realising we were hitting this precedence issue after we finished updating everything else.

Our project isn't using styled-components, but CSS modules within Vite, but I think this seems to be the same issue.

I realised when I tried to put my component classes into @layer component {} and noticed this @layer base styles oddly sitting in between our components styles and the utilities styles:

Took a long time trying to figure out where these base styles were coming from, then figured out they were coming from preflight.css.

I took our components out of @layer component {} and applied the fix OP posted, so both utilities and components layer styles would take precedence above the preflight.css 'base' layer style.