按需加载与 purge
Tailwind 会预生成几千个工具类，但你的项目可能只用了几百个——purge（内容扫描）就是解决方案：构建时按 content 配置扫描所有源文件，只把实际出现的类名写进产物 CSS，未用到的全部丢弃。配置正确时，一个中型项目的 Tailwind 产物往往只有 10~30KB（gzip 后更小）。
一个大坑必须知道：类名必须完整出现在源码字符串里。运行时拼接类名（`text-${color}-500`）无法被扫描到，上线后样式直接丢失。解决办法：用完整的类名映射对象，或把动态类名加进 safelist 白名单。
Bootstrap 的对应策略：走 Sass 按需 @import（只引用到的组件源码），或用 purgecss 工具后处理。另外注意 JS 部分——不使用 JS 组件（模态框、下拉）就不要引入 bootstrap.bundle.js，它还携带 Popper 依赖，白白增加体积。
本节要点Tailwind 靠 content 扫描按需生成，配置对则产物极小；类名不能运行时拼接，动态类名用映射对象或 safelist；Bootstrap 用按需 import + 少引 JS。
代码
// 1. content 配置决定扫描范围（务必写全）
module.exports = {
content: [
'./index.html',
'./src/**/*.{js,ts,jsx,tsx,vue}',
],
// 2. 动态类名白名单（极少用，能用映射对象就不用）
safelist: ['bg-red-500', 'bg-green-500'],
};
// 3. 大坑：运行时拼接类名无法被扫描！
// ✗ const cls = `text-${color}-500`; // 上线后丢失
// ✓ const map = { red: 'text-red-500', green: 'text-green-500' };
// const cls = map[color]; // 完整类名字符串
// 4. Bootstrap 对应策略：
// Sass 按需 @import（只要 grid/buttons 就只引这两个）
// 不用 JS 组件就不引 bootstrap.bundle.js
// 效果：Tailwind 产物通常 10~30KB（gzip 后更小）📚 推荐阅读
来自万象云档的免费在线书籍，点击封面直接阅读