Codesandbox中TailwindCSS样式类无法生效的问题求助

1. 补个Tailwind配置文件 #

在项目根目录新建tailwind.config.js，贴入下面的代码：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

这个文件用来告诉Tailwind扫描src文件夹下所有JS/JSX/TS/TSX文件里的类名，生成对应的样式。

2. 配置PostCSS #

你用的是react-scripts@4.0.0，得手动配置PostCSS才能让Tailwind正常工作。在根目录新建postcss.config.js，内容如下：

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

3. 搞定依赖显示异常的问题 #

package.json里明明有tailwindcss，但Codesandbox的依赖列表看不到，这是沙箱缓存导致的：

• 点击Codesandbox顶部的「Restart」按钮重启沙箱
• 或者在终端执行npm install手动重装一遍依赖

4. 确认CSS文件的Tailwind指令 #

检查你的CSS文件（比如src/index.css）里的Tailwind层级是否正确：

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

同时确保这个CSS文件已经在src/index.js里正确导入：

import './index.css';

做完这些步骤，Tailwind的样式类应该就能正常生效了。

内容的提问来源于stack exchange，提问作者Fuaad