Tailwind CSS VSCode Warning - Unknown at rule @tailwind error

Question

I'm trying to set up Tailwind CSS with Vite, but I'm getting "Unknown at rule @tailwind" errors in my index.css file. I've followed the official documentation and other solutions but can't get it working.

UPDATE: thanks for comments, I can confirm Tailwind CSS is now working with Vite, it appears dependent on the @ selectors in index.css, would be helpful to understand how to remove the VSCode Warning?

Configuration Files

index.css with error message

this is where the error message occurs Unknown at rule @tailwindcss(unknownAtRules)

The CSS itself is correct according to Tailwind documentation on implemnting it into Vite, so the issue likely lies in the configuration or build process rather than the CSS directives themselves.

@tailwind base;
@tailwind components;
@tailwind utilities;

This suggests PostCSS isn't properly recognizing Tailwind's directives, despite having All required packages installed (tailwindcss, postcss, autoprefixer) and Configuration files in place (postcss.config.js, vite.config.js, tailwind.config.js)

tailwind.config.js as per docs

this is as per official documentation on using Tailwind with Vite

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: []
}

vite.config.js (attempted solution)

This was a suggestion from Stack Overflow - Vite does not build Tailwind CSS - StackOverflow;

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from "tailwindcss";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  css: {
   postcss: {
    plugins: [tailwindcss],
   },
  },
});

What I've Tried

1. Following Official Documentation for Tailwind with Vite
2. Placing the @ rules in App.css instead of index.css - same error
3. Installing and configuring PostCSS
4. Double-checking all dependencies are installed correctly:

# Remove existing node_modules and lock files
rm -rf node_modules package-lock.json

# Reinstall base dependencies
npm install

# Ensure all Tailwind-related dependencies are installed
npm install -D tailwindcss postcss autoprefixer
npm install -D postcss-import
npm install -D @vitejs/plugin-react

# Initialize Tailwind (generates tailwind.config.js and postcss.config.js)
npx tailwindcss init -p

5. Deleting the cache and building again with npm run build

6. Following solutions from this resources then repeating step 4: Vite does not build Tailwind CSS - StackOverflow;

The accepted solution suggests updating the Vite configuration to import tailwindcss directly with postcss. I've tried this but still get the same error.

6. Following solutions from this resource then repeating step 4 [Tailwind CSS GitHub Discussion] (https://github.com/tailwindlabs/tailwindcss/discussions/12432)

Alex Krasikau suggests Remove PostCSS config from Vite configuration and Use a separate postcss.config.js with this structure:

export default {
  plugins: {
    'postcss-import': {},
    'tailwindcss/nesting': {},
    'tailwindcss': {},
    'autoprefixer': {},
  }
}

Dependencies

From package.json:

{
  "devDependencies": {
    "autoprefixer": "^10.4.20",
    "postcss": "^8.4.47",
    "postcss-import": "^16.1.0",
    "tailwindcss": "^3.4.14",
    "vite": "^4.3.2"
  }
}

File Structure for client/ folder

This is a Mern Template that is successfully deployed. Full Repo can be seen here: https://github.com/lmcrean/mern-template-2

.eslintrc.cjs
index.html
package.json
postcss.config.js
public/
  vite.svg
src/
  App.css
  App.jsx
  assets/
    react.svg
  index.css <--- error message appears here, unknown @ rule
  main.jsx
tailwind.config.js
vite.config.js

Questions

1. Has anyone encountered this issue or knows what might be causing it?
2. Are there any common VSCode configuration mistakes I might be missing?

Answer 1

As mentioned in this question: unknown at rule @tailwind css(unknownAtRules) tailwind error, you should just add a new line: Item: *.scss - Value: tailwindcss (or sass)

That fixed it for me!