React+Tailwind项目中嵌套CSS配置错误问题求助

兄弟，我一眼就瞅出问题所在了！你把PostCSS相关的插件配置到tailwind.config.js里了，这可是个典型的新手坑——Tailwind配置文件的plugins数组只用来放Tailwind专属的插件，而像tailwindcss/nesting、postcss-import这类PostCSS插件，得放到**postcss.config.js**文件里才行！

下面给你一步步解决的方案：

第一步：确认并配置postcss.config.js #

如果你的项目里还没有postcss.config.js文件，直接在项目根目录新建一个。然后把你原来放在tailwind.config.js里的PostCSS相关插件移到这里：

module.exports = {
  plugins: [
    require('postcss-import'),
    require('tailwindcss/nesting'),
    require('tailwindcss'),
    require('autoprefixer'),
  ],
}

注意顺序很重要：postcss-import要在最前面，然后是tailwindcss/nesting，接着才是tailwindcss和autoprefixer。

第二步：修正你的tailwind.config.js #

把原来plugins数组里的PostCSS插件删掉，只保留Tailwind的配置（如果没有Tailwind专属插件，就留空数组就行）：

export const content = [
  "./src/**/*.{js,jsx,ts,tsx}",
  "./public/**/*.{js,jsx,ts,tsx}",
];

export const theme = {
  extend: {
    colors: {
      'custom1': "#1e1e1e"
    },
    boxShadow: {
      'sm': '0 5px 5px -5px rgba(233, 88, 12, 1)'
    }
  },
};

// 这里清空或者只放Tailwind官方插件，比如@tailwindcss/forms这类
export const plugins = [];

第三步：检查依赖是否安装 #

如果之前没装过这些依赖包，先执行安装命令：

# npm
npm install -D postcss-import tailwindcss/nesting autoprefixer

# 或者yarn
yarn add -D postcss-import tailwindcss/nesting autoprefixer

最后一步：重启开发服务器 #

配置文件修改后，必须重启你的React开发服务器才能生效！别忘记这一步哦～

按照上面的步骤操作，应该就能解决嵌套CSS的配置错误了，你可以试试在自定义CSS里写嵌套规则测试下效果！

备注：内容来源于stack exchange，提问作者MH_Rabea