Unknown at rule @tailwind css(unknownAtRules) - Tailwind error

You could look at installing the Tailwind CSS IntelliSense VSCode plugin and then:

files.associations

Use the files.associations setting to tell VS Code to always open .css files in Tailwind CSS mode:

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

Otherwise, you could set css.lint.unknownAtRules VSCode setting to ignore.

In Vs code just go in the extension tab and search for "Postcss language Support" and install the below extension> And after that the warning will be gone.

Install the below extension

One way to ignore the warning is to change file format from CSS to tailwindcss from vscode as follows:

On the bottom right of your vscode, select the 2nd or 3rd option based on extions your vs code's settings in order to change the file format.

Note: You may have to first install 'Tailwind CSS' extension.

for my case tailwind does not work but when i switch from :

module.exports  = {
  content: [".src/**/*.{html,js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

to

export default {
  content: ["./src/**/*.{html,js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

it work but the highlight still exist

Putting my two cents in on this. In my existing React/Typescript/PostCSS project, I added the latest tailwind version. Also ran into the same unknown at rule warning. I did set the files.association bit which seems to solve the warning. However, now all my css files miss syntax highlighting. For info: I already have the Intellisense VSC addon installed earlier.

So.. how to get the color syntax back?

In v4 you import Tailwind using a regular CSS @import statement, not using the @tailwind directives you used in v3: @import "tailwindcss";

try this@import 'tailwindcss/base'; @import 'tailwindcss/components'; @import 'tailwindcss/utilities';