Tailwind CSS VSCode 警告 - 规则@tailwind 错误未知

Question

我正在尝试使用 Vite 设置 Tailwind CSS，但我的 index.css 文件中出现“规则@tailwind 未知”错误。我已遵循官方文档和其他解决方案，但无法使其正常工作。

更新：感谢您的评论，我可以确认 Tailwind CSS 现在可以与 Vite 一起使用，它似乎依赖于 index.css 中的 @ 选择器，将有助于理解如何删除 VSCode 警告？

配置文件

index.css

带有错误消息

这是出现错误消息的地方

Unknown at rule @tailwindcss(unknownAtRules)

根据 Tailwind 将其实现到 Vite 的文档，CSS 本身是正确的，因此问题可能在于配置或构建过程，而不是 CSS 指令本身。

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

这表明 PostCSS 无法正确识别 Tailwind 的指令，尽管安装了所有必需的软件包（tailwindcss、postcss、autoprefixer）和配置文件（postcss.config.js、vite.config.js、tailwind.config.js）

tailwind.config.js

 根据文档

这是根据

使用 Tailwind 与 Vite 的官方文档

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

vite.config.js

（尝试过的解决方案）

这是 Stack Overflow 的建议 -

Vite 不构建 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],
   },
  },
});

我尝试过的事情

以下
1. Tailwind 与 Vite 的官方文档
将 @ 规则放在
2. App.css

    而不是 

   index.css

    - 同样的错误

安装和配置PostCSS
仔细检查所有依赖项是否已正确安装：

# 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. 删除缓存并使用

   npm run build

   重新构建

6. 遵循此资源中的解决方案，然后重复步骤 4：

   Vite 不构建 Tailwind CSS - StackOverflow;

已接受的解决方案建议更新 Vite 配置以直接使用

postcss

 导入 tailwindcss。我已经尝试过了，但仍然遇到同样的错误。

遵循此资源中的解决方案，然后重复步骤 4 [Tailwind CSS GitHub 讨论] （
6. https://github.com/tailwindlabs/tailwindcss/discussions/12432）

Alex Krasikau 建议从 Vite 配置中删除 PostCSS 配置，并使用具有以下结构的单独

postcss.config.js

：

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

依赖关系

来自 package.json：

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

client/

文件夹的文件结构

这是一个已成功部署的 Mern 模板。完整的仓库可以在这里看到：

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

问题

有人遇到过这个问题或者知道可能是什么原因造成的吗？
是否有我可能遗漏的常见 VSCode 配置错误？

Answer 1

正如这个问题中提到的：

unknown at Rule @tailwind css(unknownAtRules) tailwind error，您应该添加一个新行： Item: *.scss - Value: tailwindcss

这为我解决了问题！