用 AI 生成的网页代码，如果使用了 tailwindcss V4 的 CDN 版本，会看到浏览器控制台报了一段警告信息：
cdn.tailwindcss.com should not be used in production. To use Tailwind CSS in production, install it as a PostCSS plugin or use the Tailwind CLI: https://tailwindcss.com/docs/installation
为何生产环境不能使用 cdn.tailwindcss.com
参考 github 上的这个 issue：
https://github.com/tailwindlabs/tailwindcss/issues/18731
The warning is there on purpose. The v3 CDN build is not intended for production use. It's meant for prototyping during development.
Certain things like transitions may not function properly in cases where new, unseen classes are added to an element. DOM updates are batched in the browser meaning that we won't get notified until after the transition has "started" and as such its possible for a transition to not animate in the first time.
大致意思就是，CDN 版本在生产环境中可能会导致一些问题，例如元素上动态添加的类。
但是，我觉得主要原因是，CDN 版本会加载所有的样式，文件大，而项目实际使用的样式很少。所以需要使用 PostCSS 插件或者 Tailwind CLI 来生成按需加载的 CSS 文件。
使用 Tailwind CLI 还是 PostCSS 插件
简单看了一下 PostCSS 的介绍，感觉还是太复杂了（不想花时间在前端复杂度上），不如直接使用 Tailwind CLI 来生成 CSS 文件。
其实，我连 Tailwind CLI 都不想用，要不是感觉浏览器终端里有警告信息显得不专业，我都想继续用 CDN 版本。
Tailwind CLI 的工作原理
Tailwind CSS works by scanning all of your HTML files, JavaScript components, and any other templates for class names, generating the corresponding styles and then writing them to a static CSS file.
即，Tailwind CLI 会扫描你的 HTML 文件、JavaScript 组件和其他模板中的类名，生成相应的样式，然后将它们写入一个静态 CSS 文件。
安装 Tailwind CLI
npm install tailwindcss @tailwindcss/cli
也可以不使用 node，直接下载预编译的二进制文件。但是 tailwindcss-windows-x64.exe 文件大小 127M，感觉太大了，算了。
在哪里执行呢？我是在 golang gin 项目根目录执行的。执行完成后，会看到根目录下多了一个 node_modules 目录（需要添加到 .gitignore 中）, 以及一个 package.json 文件，内容如下：
{
"dependencies": {
"@tailwindcss/cli": "^4.1.14"
}
}
命令参数
> npx @tailwindcss/cli
≈ tailwindcss v4.1.14
Usage:
tailwindcss [--input input.css] [--output output.css] [--watch] [options…]
Options:
-i, --input ················· Input file
-o, --output ················ Output file [default: `-`]
-w, --watch[=always] ········ Watch for changes and rebuild as needed, and use `always` to keep watching when stdin is closed
-m, --minify ················ Optimize and minify the output
--optimize ·············· Optimize the output without minifying
--cwd ··················· The current working directory [default: `.`]
--map ··················· Generate a source map [default: `false`]
-h, --help ·················· Display usage information
执行编译
npx @tailwindcss/cli -i public/css/style.css -o public/css/output.css --cwd=templates
输出提示：
≈ tailwindcss v4.1.14
Done in 136ms
需要注意 --cwd 参数，指定扫描的目录。因为我的 HTML 模板文件都在 templates 目录下。 而我的 public 目录也放到了 templates 目录下，所以 public/css/style.css 这个输入文件路径是相对于 templates 目录的。 这里比较特殊，跟正常的项目结构不太一样。没办法，我用 golang gin 感觉这样方便调试。
$ tree templates/
templates/
├── product.html
├── products.html
├── public
│ ├── css
│ │ ├── output.css
│ │ └── style.css
│ ├── images
│ │ ├── default_avatar.png
│ │ ├── image_404.jpg
│ └── js
│ └── main.js
└── thanks.html
编译后的 CSS 文件大小
不压缩的话，output.css 文件大小 33K. 如果加上 --minify 参数：
npx @tailwindcss/cli -i public/css/style.css -o public/css/output.min.css --cwd=templates --minify
减少为 25K。
好了，大功告成。下面是记录的一些报错信息，可以忽略。
后续
- 将 tailwind 命令加入到项目 Makefile 中
- 区分开发环境和生产环境的 CSS 文件。开发环境使用 style.css，生产环境使用 output.min.css
初始化 Tailwind CSS 配置文件
npx tailwindcss init
报错：
npm ERR! could not determine executable to run
网上说是因为 V4 版本会出现这个问题，降级到 V3 版本就可以了。但是，我想用 V4 版本啊。
V4 直接在命令参数里指定 cwd 参数就可以了。其实也用不上 init 命令。
ReferenceError: structuredClone is not defined
> node --version
v16.14.2
是 Node 的版本问题：structuredClone() was added in Node.js 17.0.0 (Sept 2021) 需要高版本的 Node.js 才支持 structuredClone()。
$ nvm install 17
$ node -v
v17.9.1
参考
- https://v3.tailwindcss.com/docs/optimizing-for-production
- https://blog.murtazau.xyz/templ-tailwind-htmx
关于作者 🌱
我是来自山东烟台的一名开发者，有感兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊， 查看更多联系方式