WordPress环境下Webpack集成Tailwind CSS JIT失败求助

我在WordPress环境里尝试把Tailwind JIT编译器和Webpack.js集成时遇到了问题。目前自定义颜色、字体、自定义媒体查询这些功能都正常，但JIT编译器就是没激活。

补充说明：已经按照Karl Hill的建议更新了依赖，也调试了大部分内容，但JIT还是没生效（Tailwindcss 3.0默认应该激活JIT），求解决思路。

相关配置文件 #

functions.php #

<?php

add_action('wp_enqueue_scripts', function () {
    wp_enqueue_script('main', get_stylesheet_directory_uri() . '/assets/dist/main.bundle.js', [], '1.0.0', true);
    wp_enqueue_style('main', get_stylesheet_directory_uri() . '/assets/dist/main.css', [], '1.0.0', 'all');
});

Package.json #

{
  "name": "webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "TAILWIND_MODE=watch webpack --config webpack.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^10.4.13",
    "css-loader": "^6.7.3",
    "postcss": "^8.4.21",
    "postcss-loader": "^7.0.2",
    "style-loader": "^3.3.1",
    "tailwindcss": "^3.2.4",
    "webpack": "^5.75.0",
    "webpack-cli": "^5.0.1"
  }
}

postcss.config.js #

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

tailwind.config.js #

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "**/*.php",
    "*.php",
  ],
  theme: {
    screens: {
      sm: '320px',
      md: '768px',
      lg: '1024px',
      xl: '1920px',
    },
    extend: {
      colors: {
        customBlue: '#0F1D51',
        customBeige: '#CBAD7E',
        customEgg: '#FFF9EF',
      },
      borderWidth: {
        '3': '3px',
      },
      fontSize: {
        'base': ['1rem', {
          lineHeight: '2rem',
          letterSpacing: '-0.01em',
        }],
        'xl': ['1.25rem', {
          lineHeight: '2rem',
          letterSpacing: '-0.01em',
        }],
        '4xl': ['2.5rem', {
          lineHeight: '1',
          letterSpacing: '-0.01em',
        }],
        '7xl': ['4.875rem', {
          lineHeight: '1',
          letterSpacing: '-0.01em',
        }]
      },
      fontFamily: {
        sans: [
          "Roboto",
          'system-ui',
          '-apple-system',
          'BlinkMacSystemFont',
          "Segoe UI",
          "Helvetica Neue",
          'Arial',
          "Noto Sans",
          'sans-serif',
          "Apple Color Emoji",
          "Segoe UI Emoji",
          "Segoe UI Symbol",
          "Noto Color Emoji",
        ],
      },
    },
  },
  plugins: [],
}

webpack.config.js #

const path = require('path');

module.exports = {
  mode: "development",
  context: path.resolve(__dirname, "assets"),
  output: {
    filename: "main.bundle.js",
    path: path.resolve(__dirname, "assets/dist")
  },
  watch: true,
  module: {
    rules: [{
      test: /\.css$/,
      use: [{
          loader: 'css-loader',
          options: {
            importLoaders: 1
          }
        },
        {
          loader: 'postcss-loader',
          options: {
            postcssOptions: {
              plugins: [
                require('tailwindcss'),
                require('autoprefixer')
              ]
            }
          }
        }
      ]
    }]
  }
}

解决思路 #

1. 统一PostCSS配置引用方式 #

你的postcss.config.js已经指定了Tailwind配置文件路径，但webpack.config.js里的postcss-loader却内联声明插件，导致Tailwind无法正确读取tailwind.config.js的content规则（JIT核心依赖这个规则扫文件）。修改webpack配置，直接引用外部PostCSS配置：

// webpack.config.js中postcss-loader部分替换为
{
  loader: 'postcss-loader',
  options: {
    postcssOptions: {
      config: path.resolve(__dirname, 'postcss.config.js')
    }
  }
}

2. 精准设置content扫描路径 #

当前"**/*.php"可能会扫到assets/下的无关文件，或遗漏WordPress主题的上层模板目录。明确指定路径：

// tailwind.config.js中content数组修改为
content: [
  "./**/*.php", // 主题根目录及所有子目录的PHP文件
  "./template-parts/**/*.php" // 若有模板部件目录，单独指定
],

3. 强制启用JIT模式 #

虽然Tailwind 3.x默认开启JIT，但环境变量或缓存可能导致失效，直接在配置里显式声明：

// tailwind.config.js顶部添加
module.exports = {
  mode: 'jit', // 强制启用JIT
  content: [/* ... */],
  // 其余配置不变
}

4. 检查样式入口文件 #

确保你的CSS入口文件（比如assets/css/main.css）正确引入Tailwind指令：

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

Webpack如果没正确处理这个入口，JIT无法生成对应样式。

5. 清理缓存重新构建 #

旧缓存可能导致JIT不生效：

• 删除assets/dist/下所有文件
• 停止当前Webpack进程
• 重新运行npm start

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