Tailwind CSS 生产环境部署优化与 CDN 使用规范

线上突然多了个警告，一看是 cdn.tailwindcss.com 的。本来还以为这个 CDN 也能凑合用，结果官方直接建议生产环境别用。想想也是，那个脚本没压缩就 2MB 多，而且不支持 JIT，没 tree-shaking，CSS 前缀也不加，放线上纯粹是拖慢首屏。

所以这个 CDN 只适合搞原型、临时演示或者自己学着玩。用法也简单，直接引一下：

xml 复制代码

<script src="https://cdn.tailwindcss.com"></script>

要自定义配置也支持，传参数或者内联 config。

xml 复制代码

<script src="https://cdn.tailwindcss.com?plugins=forms,typography"></script>
<script>
  tailwind.config = {
    theme: {
      extend: {
        colors: { clifford: '#da373d' }
      }
    }
  }
</script>

但注意，这玩意儿就图个快，别往生产丢。

生产环境还是得老老实实走构建流程。

npm 构建方案（推荐）

先装依赖：

csharp 复制代码

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

然后改 tailwind.config.js，最重要的就是 content 字段，告诉它扫描哪些文件。这个容易配错，一旦没扫到，类名就直接被 purge 掉，样式就乱了。

css 复制代码

module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

开发的时候用 watch：

css 复制代码

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

上线前跑一次 minify：

css 复制代码

npx tailwindcss -i ./src/input.css -o ./dist/output.css --minify

这行就足够生成压缩过的 CSS，不用再额外配 PurgeCSS，Tailwind 内置了。

如果还在用 Tailwind v2，记得在配置里显式开启 JIT：

java 复制代码

module.exports = {
  mode: 'jit',
  // ...
}

v3 默认就是 JIT 模式，不用手动加。

替代 CDN？不太推荐

有人可能想用 jsDelivr 上的预编译版：

ini 复制代码

<link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.3.0/dist/tailwind.min.css" rel="stylesheet">

但版本固定，更新不及时，而且那个 CSS 也是全量的，虽然压缩过但依然很大，还是没用到按需生成。反正我是没用过这个方案上生产。

样式错乱怎么排查

大部分情况是 content 没配对。比如只写了 './src/**/*.html'，结果你模板文件在 resources/views/ 下面，那 Tailwind 扫描不到，构建出来的 CSS 就是空的或者缺类。解决方法就是补全路径：

css 复制代码

content: ['./src/**/*.{html,js,jsx,ts,tsx}'],

如果项目结构复杂，多写几个路径，精准点，别用通配符扫太多无关目录，不然构建慢。

构建性能

content 路径范围太大，或者扫了 node_modules，构建速度会明显下降。所以尽量精确指定：

css 复制代码

content: [
  './app/**/*.{html,js}',
  './resources/views/**/*.blade.php'
]

这样既能保证类名不丢，构建也快。

部署时的一些顺手操作

开发阶段配个编辑器插件，Tailwind CSS IntelliSense，自动补全和提示用着舒服。类名排序可以用 rustywind 格式化一下，团队代码看着统一。

生产构建完，用 Lighthouse 跑一下性能，确保 CSS 体积正常。Nginx 那边配个长缓存，因为构建出来的 CSS 文件名可以带 hash，不怕更新：

bash 复制代码

location / {
  try_files $uri $uri/ /index.html;
  expires 1y;
  add_header Cache-Control "public";
}

这样静态资源都能强缓存。

基本就这些。核心就是别图省事把开发 CDN 直接扔生产，老老实实走构建，content 配准，上线 minify，缓存开起来。其他就是细节问题了。