React与TailwindCSS项目中index.css文件出现@apply、@theme未知规则错误求助

兄弟别慌！刚接触React和Tailwind遇到这种报错太正常了，我当初刚上手的时候也踩过一模一样的坑😅

先给你理清楚问题出在哪：你用的@apply、@theme这些都是Tailwind CSS的自定义语法，普通的CSS解析器根本不认识它们，得让项目的构建工具通过PostCSS来处理Tailwind的语法才行，同时你的配置和CSS写法也有几个小问题，我一步步给你说怎么改：

1. 先确认Tailwind的核心配置是否到位 #

首先你得确保项目里已经正确安装了Tailwind及其依赖，并且生成了必要的配置文件：

• 如果你是用Create React App或者Vite创建的项目，先检查有没有tailwind.config.js和postcss.config.js这两个文件，没有的话得手动生成。

正确的tailwind.config.js配置 #

这个文件是用来告诉Tailwind要扫描哪些文件来生成样式的，必须配置content选项：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}", // 扫描src下所有React文件
  ],
  theme: {
    extend: {}, // 这里用来扩展自定义主题，代替你用的@theme
  },
  plugins: [],
}

正确的postcss.config.js配置 #

PostCSS是用来处理Tailwind语法的工具，必须把tailwindcss和autoprefixer加入插件：

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

2. 修正你的index.css写法 #

你现在的CSS里有两个小问题：

• 导入Tailwind的方式不对，不是@import "tailwindcss"，而是要用Tailwind的三个核心指令
• @theme指令在新版Tailwind里已经被弃用了，自定义主题色应该放到tailwind.config.js里

修正后的index.css应该是这样的：

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

html, body {
  width: 100vw;
  background-color: black;
  color: white;
}

@layer utilities {
  .flex-center {
    @apply flex justify-center items-center;
  }
}

而你原来的--color-white-50自定义色，应该移到tailwind.config.js的theme.extend里：

module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {
      colors: {
        'white-50': '#d9ecff', // 这样就能在项目里用text-white-50这类类名了
      },
    },
  },
  plugins: [],
}

3. 编辑器报错的额外解决方法 #

如果配置都改对了，编辑器还是标红报错，那是因为编辑器的CSS语法插件不认识Tailwind的自定义语法，比如VS Code的话，你装个Tailwind CSS IntelliSense插件，它就能识别这些语法，红波浪线就会消失了。

按照上面的步骤一步步来，先把配置文件弄对，再调整CSS的写法，应该就能解决这个问题了。要是还有问题，你可以看看项目里Tailwind的版本是不是太旧，新版的语法和旧版有些差异哦~

内容来源于stack exchange