码农备忘录

主题

方式一：通过 postcss 命令行方式使用 ​

npm i postcss postcss-cli tailwindcss -D

|-- tailwind-test
    |-- index.css
    |-- package-lock.json
    |-- package.json

index.css

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

执行 npx postcss index.css --use tailwindcss -d build/，将会生成 build/index.css 文件

方式二：通过构建工具（如 Webpakc）配置 PostCSS ​

npm i postcss autoprefixer tailwindcss css-loader style-loader postcss-loader -D

npm i webpack webpack-cli -D

npm i css-loader style-loader postcss-loader -D

|-- tailwind-test
    |-- package-lock.json
    |-- package.json
    |-- postcss.config.js
    |-- tailwind.config.js
    |-- webpack.config.js
    |-- dist
    |   |-- index.html
    |-- src
        |-- index.js
        |-- index.css

webpack.config.js

js
const path = require('path')

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader', 'postcss-loader']
      }
    ]
  }
}

postcss.config.js

js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {}
  }
}

tailwind.config.js

js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

index.html

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Title</title>
</head>
<body>
  <div class="text-center">hello</div>

  <script src="./main.js"></script>
</body>
</html>

执行 npx webpack，dist 目录下生成 main.js 文件，文件大小为 4160KB。

生产优化 ​

Webpack 设置环境变量 NODE_ENV

删除未使用的功能类

修改 tailwind.config.js 如下：

js
module.exports = {
  purge: [
    './dist/**/*.html' // 指定模板文件，告诉 Tailwind 使用了哪些功能类，从而删除未使用的类
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

然后执行 npx webpack --node-env production， 生成的 main.js 文件大小为 17KB