Magento 2 PWA（React+Tailwind）hover变体失效问题求助

你的hover变体失效核心原因在于配置结构错误、内容提取逻辑无法识别变体类，以及PostCSS插件顺序不当，以下是具体修复方案：

1. 修正Tailwind配置结构 #

当前tailwind.config.js将theme嵌套在purge对象内，不符合Tailwind配置规范，会导致主题、变体相关配置不生效。需将theme移至配置根层级。

2. 修复内容提取逻辑（关键） #

自定义的extractor和matcher仅能匹配composes语句中的基础类，无法识别带变体前缀的类（如hover_bg-red-500）。且JIT模式下无需自定义提取器，Tailwind可自动扫描指定文件中的类名，因此需移除自定义extractors配置，并确保content路径覆盖所有用到Tailwind类的文件（包括React组件的JSX文件）。

3. 调整PostCSS插件顺序 #

PostCSS插件执行顺序需遵循「Tailwind先处理样式，Autoprefixer后添加前缀」的规则，因此要将tailwindcss放在autoprefixer之前。

修改后的完整配置文件 #

tailwind.config.js #

const venia = require('@magento/pwa-theme-venia');

const config = {
    mode: 'jit',
    presets: [venia],
    content: [
        './src/**/*.{html,js,jsx}',
        './node_modules/@magento/venia-ui/lib/**/*.module.css',
        '../venia-ui/lib/**/*.module.css',
        './src/**/*.module.css',
        './template.html'
    ],
    theme: {
        extend: {},
        screens: {
            sm: '640px',
            md: '768px',
            lg: '1024px',
            xl: '1280px',
            '2xl': '1536px'
        }
    },
    // 显式配置hover变体（默认已启用，此步骤确保预设未覆盖配置）
    variants: {
        extend: {
            backgroundColor: ['hover'],
            textColor: ['hover'],
            // 根据需求添加其他需hover变体的CSS属性
        }
    },
    separator: '_'
};

module.exports = config;

postcss.config.js #

module.exports = {
    plugins: [
        require('tailwindcss')('./tailwind.config.js'),
        require('autoprefixer')
    ]
};

额外验证步骤 #

• 确认React组件中使用的hover变体类格式正确：因配置了separator: '_'，需用hover_bg-red-500替代默认的hover:bg-red-500。
• 清除项目构建缓存，重启开发服务器，确保新配置生效。

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