Errors with @tailwind and @apply in CSS when using Tailwind CSS

Discussion
1

While developing a project using Cursor, I encounter errors in the index.css file related to unknown rules @tailwind and @apply. The errors look like this:

- Unknown at rule @tailwind css(unknownAtRules) [Ln 1, Col 1]
- Unknown at rule @tailwind css(unknownAtRules) [Ln 2, Col 1]
- Unknown at rule @tailwind css(unknownAtRules) [Ln 3, Col 1]
- Unknown at rule @apply css(unknownAtRules) [Ln 84, Col 5]
- Unknown at rule @apply css(unknownAtRules) [Ln 87, Col 5]
- Unknown at rule @apply css(unknownAtRules) [Ln 92, Col 3]

There are a total of 79 such errors in my project, which makes it difficult to work efficiently.

I’ve attempted several steps to resolve the errors with @tailwind and @apply in my CSS file, but unfortunately, nothing has worked so far. Here’s what I’ve tried:

  1. I installed Tailwind CSS in my project using npm/yarn to ensure it’s properly set up.
  2. I generated the tailwind.config.js file using the command npx tailwindcss init to configure Tailwind CSS.
  3. I included the necessary Tailwind directives (@tailwind base, @tailwind components, @tailwind utilities) in my index.css file.
  4. I installed the “Tailwind CSS IntelliSense” plugin in Cursor to help the editor recognize Tailwind CSS directives.
  5. I restarted Cursor multiple times to ensure that the changes take effect.
  6. I verified that my postcss.config.js file is correctly set up to include Tailwind CSS and Autoprefixer.
  7. I rebuilt the project using my build tool (e.g., Webpack, Vite) to ensure that Tailwind CSS is properly processed.

Despite these efforts, the errors persist, and Cursor still does not recognize the @tailwind and @apply directives. I’m unsure what else to try and would appreciate any guidance or suggestions to resolve this issue.

2

Does it say tailwind under cmd-P > Change Language Mode