Webpack 與 Tailwind CSS JIT 集成

Question

我目前很難將 Tailwind JIT 編譯器與 Webpack.js 集成。 目前幾乎一切正常（自定義 colors、自定義 fonts、自定義媒體查詢等...），除了 JIT 編譯器。 任何人都知道我做錯了什么？ （運行在Wordpress環境）

提前致謝！

編輯：根據 Karl Hill 的回答，我更新了我的依賴項，調試了大部分，但 JIT 編譯器仍然沒有激活（應該在 tailwindcss 3.0 中默認激活？）有人有想法嗎？

函數.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')
              ]
            }
          }
        }
      ]
    }]
  }
}

Answer 1

將 tailwind css 升級到版本 ^3.2.4。

現在就像一個魅力。