[v4] Cannot disable preflight styles

[HasanMothaffar]

What version of Tailwind CSS are you using?

v4

What build tool (or framework if it abstracts the build tool) are you using?

Next.js 15.1.4 (with turbopack)

What version of Node.js are you using?

v22.11.0

What browser are you using?

Firefox

What operating system are you using?

Windows

Reproduction URL

Not applicable

Describe your issue

In v3, disabling preflight styles was a simple matter of having preflight: false in the tailwind.config.js file. In v4, with the new CSS config way, the described way to disable preflight styles is not clear, and applying it produces a compile error. Here's how it's described in the docs:

Here's my code, which applies the instructions as described in the docs.

// src/shared/styles/global.css
@layer theme, base, components, utilities;

@import "./theme.css" layer(theme);
@import "./utilities.css" layer(utilities);

It produces the error provided in the picture:

The error is not surprising, as the bundler is trying to resolve a local file because of the "./" relative path.

[wongjn]

Hi! Yes, the docs are incorrect here, you'd want to do:

@layer theme, base, components, utilities;

@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/utilities.css" layer(utilities);

[reinink]

Apologies, this is a documentation error and is fixed here: tailwindlabs/tailwindcss.com#1948