带有 JIT 的 Tailwind CSS 不适用于 webpack答案

【问题标题】：Tailwind CSS with JIT not work with webpack带有 JIT 的 Tailwind CSS 不适用于 webpack
【发布时间】：2021-07-03 06:05:09
【问题描述】：

已经在我的 HTML 中的 Tailwind 类正在运行，但我无法添加新的。

我不明白这是从哪里来的。如果我取消 JIT，一切都可以正常工作，但使用 webpack 开发服务器热重载会很长。

Tailwind CSS 版本： 2.1.1

复制库： https://github.com/jbty/html-starter-typscript-scss-tailwind

顺风配置：

const colors = require('tailwindcss/colors');

module.exports = {
  mode: 'jit',

  purge: ['./dist/*.html', './dist/*.js'],

  darkMode: false,

  theme: {
    screens: {
      print: { raw: 'print' },
      sm: '640px',
      // => @media (min-width: 640px) { ... }
      md: '768px',
      // => @media (min-width: 768px) { ... }
      lg: '1024px',
      // => @media (min-width: 1024px) { ... }
      xl: '1280px',
      // => @media (min-width: 1280px) { ... }
      '2xl': '1536px',
      // => @media (min-width: 1536px) { ... }
    },

    extend: {
      fontFamily: {},
      colors: {
        transparent: 'transparent',
        current: 'currentColor',
        black: colors.black,
        white: colors.white,
        gray: colors.trueGray,
        indigo: colors.indigo,
        red: colors.rose,
        yellow: colors.amber,
      },
      fontSize: {},
    },
  },

  variants: {
    extend: {},
  },

  plugins: [],
};

PostCSS 配置：

module.exports = {
  plugins: [require('autoprefixer'), require('@tailwindcss/jit')],
};

Webpack 配置：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
  entry: './src/app.ts',
  target: 'web',
  cache: true,

  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[fullhash:8].js',
    sourceMapFilename: '[name].[fullhash:8].map',
    chunkFilename: '[id].[fullhash:8].js',
    clean: true,
  },

  module: {
    rules: [
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
          },
          {
            loader: 'postcss-loader',
          },
          'sass-loader',
        ],
      },
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        loader: 'file-loader',
        options: {
          name: '[name].[hash].[ext]',
          outputPath: 'assets/images',
          esModule: false,
        },
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        loader: 'file-loader',
        options: {
          outputPath: 'assets/fonts',
        },
      },
    ],
  },

  resolve: {
    extensions: ['.ts', '.js'],
  },

  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/index.html',
      title: 'Webpack Starter',
      description: 'Webpack Starter',
    }),
    new CopyPlugin({
      patterns: [{ from: 'src/public' }],
    }),
  ],

 devServer: {
    contentBase: path.resolve(__dirname, 'dist'),
    watchContentBase: true,
    writeToDisk: true,
    hot: true,
  },
};

【问题讨论】：

您是否将 NODE_ENV 设置为开发？这控制 Tailwind 是否监视模板文件的更改。
@NathanDawson yes here => mode: 'development' in my webpack.dev.js
mode: 'development' 单独是不够的，请确保 process.env.NODE_ENV === "development"

标签： javascript typescript webpack sass tailwind-css

【解决方案1】：

这也是我的问题。在你的 package.json 中的 webpack dev server 命令之前添加这个：

"scripts": {
    "server": "webpack serve"
},

将其更改为：

"scripts": {
    "server": "NODE_ENV=development webpack serve"
},

如果您使用的是 Windows，我建议安装此软件包：

npm install -D win-node-env

【讨论】：