Tailwind CSS使用求助：React JSX类提示失效及父类控制子类样式

1. React JSX中Tailwind IntelliSense类名提示失效 #

按以下步骤排查修复：

• 检查tailwind.config.js的content配置，确保覆盖所有JSX文件路径：

  /** @type {import('tailwindcss').Config} */
  module.exports = {
    content: [
      "./src/**/*.{js,jsx,ts,tsx}", // 适配你的项目文件结构
    ],
    theme: {
      extend: {},
    },
    plugins: [],
  }
  

• 配置VSCode扩展识别JSX：打开设置（Ctrl+,），搜索tailwindCSS.includeLanguages，添加"javascriptreact": "html"。
• 清理缓存重启：执行npx tailwindcss --clear-cache，然后重启VSCode，解决缓存导致的提示异常。

配置完成后，在className="text-white w-?"中输入宽度类时就能正常触发提示。

2. 父元素active时子元素样式不生效问题 #

Tailwind不支持active.text-xxx这种写法，要实现父元素active状态下子元素样式变化，需用group功能：

1. 给父元素添加group类，保留active类用于触发状态
2. 子元素使用group-active:text-red-500/50类，绑定父元素的active状态

正确代码示例：

<div className="w-[300px] group active">
  <p className="group-active:text-red-500/50">Text</p>
</div>

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