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?