为什么Tailwind CSS默认不生成所有工具类？如何实现全量/按需切换？

一、开发阶段：生成全量Tailwind CSS #

开发时要得到完整的Tailwind CSS，只需修改tailwind.config.js的content配置，让它不匹配任何项目文件，Tailwind就会生成所有默认样式：

/** @type {import('tailwindcss').Config} */
module.exports = {
  // 空数组配置会触发全量CSS生成
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

运行你的构建脚本生成全量样式：

npm run build:css

此时生成的styles.css包含Tailwind所有基础样式、组件和工具类，开发时可随意使用各类class，无需频繁重新构建。

二、生产/优化阶段：生成仅用到的CSS #

项目完成后，把tailwind.config.js的content改回匹配项目文件的配置，Tailwind会扫描文件并只保留实际用到的样式：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

再次运行构建脚本：

npm run build:css

Tailwind会分析src目录下的html和js文件，仅生成你实际使用的样式——比如你只用到背景样式，生成的CSS就只有几百行。

补充优化 #

• 你的index.css入口文件无需修改：

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

• 可在package.json新增两个脚本，避免反复修改配置：

"scripts": {
  "build:css:dev": "npx tailwindcss -i ./src/index.css -o ./src/styles.css --content=''",
  "build:css:prod": "npx tailwindcss -i ./src/index.css -o ./src/styles.css"
}

开发时执行npm run build:css:dev，生产时执行npm run build:css:prod即可。

内容的提问来源于stack exchange，提问作者jonathan gonzalez