@layer base is used but no matching @tailwind base directive is present.

[hdransfeld]

What version of Tailwind CSS are you using?

v3.4.17

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

Vite with Postcss

What version of Node.js are you using?

For example: v22

What browser are you using?

N/A

What operating system are you using?

macOS

Reproduction URL

https://github.com/hdransfeld/tailwind-error-reproduction

Describe your issue

When using Tailwind CSS v3 with PostCSS, importing a CSS file that includes a valid @layer base {} block (without using @tailwind base) causes the build to fail with the following error:

@layer base is used but no matching @tailwind base directive is present.

This occurs even if the imported CSS file is not meant to be processed by Tailwind, and is simply using the standard CSS @layer rule introduced in CSS Cascade Layers. It appears that Tailwind’s PostCSS plugin assumes that any @layer directive is part of the Tailwind CSS build process, and throws an error if the corresponding @tailwind directive is not found.

This makes it impossible to import any third-party CSS (or internal shared styles) that use @layer — even for non-Tailwind purposes.

[wongjn]

You could consider:

• Renaming the @layer. I think Tailwind only hijacks the syntax if the @layer is named base, components or utilities.
• Reworking your postcss.config.js so that PostCSS only applies the tailwindcss PostCSS plugin on a subset of CSS. You'd do this by exporting a function instead of an object. The function then receives parameters that should include information about the CSS file to be processed. You can then use JavaScript code to dynamically return the PostCSS config for said file.

[hdransfeld]

@wongjn Thanks for the quick reply

• Renaming the @layer. I think Tailwind only hijacks the syntax if the @layer is named base, components or utilities.

In my app, I'm importing css from a node_module that uses tailwind itself (v4), so i can't change the @layer name

• Reworking your postcss.config.js so that PostCSS only applies the tailwindcss PostCSS plugin on a subset of CSS. You'd do this by exporting a function instead of an object. The function then receives parameters that should include information about the CSS file to be processed. You can then use JavaScript code to dynamically return the PostCSS config for said file.

I tried to declare a function in postcss.config.js:

export default (ctx) => {

    console.log(ctx);

    return {
        plugins: {
            tailwindcss: {},
            autoprefixer: {},
        }
    };
};

It only contains these information:

{
  cwd: '/Users/henrik/Projekte/tailwind-error-reproducer',
  env: 'development'
}

Any other ideas?

[RobinMalfait]

The problem seems to stem from the fact that you are combining Tailwind CSS v3 and v4 at the same time.

You can rename the @layer base to something else if you split up the @import "tailwindcss"; import. https://tailwindcss.com/docs/preflight#disabling-preflight

E.g.:

@layer theme, custom-base, custom-components, custom-utilities;
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/preflight.css" layer(custom-base);
@import "tailwindcss/utilities.css" layer(custom-utilities);

[hdransfeld]

Thanks, renaming the layers solves the issue for me.