Tailwind CSS不生效：React项目样式无法显示问题求助

跟着旧教程（已更新content替代purge配置）搭建React项目，但Tailwind CSS完全不生效？试试以下排查步骤：

1. 确认CSS文件已正确引入 #

检查项目主入口文件（比如src/index.js或src/main.jsx）是否导入了你的CSS文件，路径要准确：

import './styles/your-css-file.css'; // 替换成实际文件路径

2. 检查PostCSS配置是否到位 #

不同构建工具的PostCSS配置要求不同：

• Vite：确保项目根目录有postcss.config.js，内容如下：

  export default {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  }
  

• Create React App：新版CRA可直接用postcss.config.js，旧版需借助craco工具配置，确保Tailwind和autoprefixer插件已启用。

3. 验证content路径匹配 #

你的Tailwind配置中content字段是["./index.html", "./src/**/*.{js,jsx}"]，要确认：

• index.html确实在项目根目录
• src下所有.js/.jsx文件（包括子目录）都能被匹配到
• 如果用TypeScript，需添加.ts/.tsx后缀到数组中

4. 重启开发服务器 #

修改Tailwind配置后必须重启开发服务器，否则新配置不会生效，这是最容易忽略的点。

5. 排查样式冲突 #

检查是否有其他全局CSS规则覆盖了Tailwind样式，比如是否存在* { all: unset; }这类强制重置所有样式的代码。

你的配置文件参考 #

Tailwind配置文件：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./index.html", "./src/**/*.{js,jsx}"],
  theme: {
    extend: {
      colors: {
        primary: '#00040f',
        secondary: "#00f6ff",
        dimWhite: "rgba(255, 255, 255, 0.7)",
        dimBlue: "rgba(9, 151, 124, 0.1)",
      },
      fontFamily: {
        poppins: ["Poppins", "sans-serif"],
      },
    },
    screens: {
      xs: "480px",
      ss: "620px",
      sm: "768px",
      md: "1060px",
      lg: "1200px",
      xl: "1700px",
    },
  },
  plugins: [],
};

CSS文件头部：

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap");

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

:root {
  --black-gradient: linear-gradient(
    144.39deg,
    #ffffff -278.56%,
    #6d6d6d -78.47%,
    #11101d 91.61%
  );
  --card-shadow: 0px 20px 100px -10px rgba(66, 71, 91, 0.1);
}

* {
  scroll-behavior: smooth;
}

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