I'm using Tailwind CSS v4 in my Next.js project and getting the following errors in globals.css:

Unknown at rule @plugin css(unknownAtRules)
Unknown at rule @custom-variant css(unknownAtRules)
Unknown at rule @theme css(unknownAtRules)

also @apply.

Here is my globals.css file:

@import "tailwindcss";

@plugin "tailwindcss-animate";

@custom-variant dark (&:is(.dark *));

@theme inline {
  /* theme customization */
}

I'm using Tailwind CSS v4 in my Next.js project and getting the following errors in globals.css:

Unknown at rule @plugin css(unknownAtRules)
Unknown at rule @custom-variant css(unknownAtRules)
Unknown at rule @theme css(unknownAtRules)

also @apply.

Here is my globals.css file:

@import "tailwindcss";

@plugin "tailwindcss-animate";

@custom-variant dark (&:is(.dark *));

@theme inline {
  /* theme customization */
}

• visual-studio-code
• tailwind-css
• tailwind-css-4
• tailwind-css-intellisense

1 Answer 1

These are custom TailwindCSS directives that CSS IDEs don't understand by default. For VSCode, use the official TailwindCSS IntelliSense extension.

• TailwindCSS IntelliSense - VSCode Marketplace

After that, tell VSCode that you want to treat your .css files as TailwindCSS. You can do this in the settings under files.associations like this:

{
  "files.associations": {
    "*.css": "tailwindcss",
    "*.scss": "tailwindcss",
  },
}

• Recommended VSCode settings for TailwindCSS IntelliSense - GitHub

Since these are just IDE error messages, the code will work as expected if you have properly installed TailwindCSS. However, they can be frustrating, so it is definitely recommended to use the extension.

Known Issues

• Auto-completion and suggestions not working with TailwindCSS v4 - StackOverflow

It may happen that the syntax highlighting for the mentioned syntax will not work properly with the solution, this is a known issue:

• tailwindlabs/tailwindcss-intellisense issue #1250 - GitHub