如何在 Rails 8 中“正确”设置 Tailwind V4

下午我用 Rails 8 尝试一个 Demo 项目时，发现虽然默认使用了 Tailwind V4，但由于 Rails 生成器没有更新，生成的代码结构仍然基于 Tailwind V3，导致了一些问题。

借这篇不会太长的文章记录一下这些问题、也算给过去几个小时的瞎忙活画个分号。

画分号以及题目加引号都出于同一个原因：我不确定我的方案是否合适，不过从结果来看，没有任何报错，而且达到了效果。

1. 问题是怎样产生的

下面是我的开发环境以及新建项目时使用的命令：

ruby -v
# ruby 3.4.1 (2024-12-25 revision 48d4efcb85) +PRISM [x86_64-linux]

rails -v
# Rails 8.0.1

rails new xxx -c tailwind -j esbuild

在开发基于以上条件生成的项目时，我发现页面上并没有应用样式，但查看 DevTools，HTML 元素中确实存在 Tailwind 类名，这说明问题大概在 TailwindCSS。

联想到前段时间偶尔浏览过一篇关于 TailwindCSS V4 版本变化的文章，似乎有提到不需要再使用 @tailwind base; 之类的命令，而是直接使用 @import tailwindcss;。于是我把 stylesheets/application.tailwind.css 文件中的三行命令删除，用 @import tailwindcss; 取而代之。

这时候页面样式正常，但 DevTools 出现了 GET 请求 /assets/tailwindcss 404，这是因为 CSS 的 @import 命令会导致浏览器发送对这个资源的请求，而根据 package.json 中构建 CSS 的命令，项目中并没有生成 tailwindcss：

"build:css": "tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css --minify"

理论上这时候除了这个404之外一切正常，我可以继续推进。但确实有一种如鲠在喉的感觉，让人很难沉下心来假装问题不存在。

我觉得无论如何，还是要先解决这个问题，哪怕要花点时间。

2. 我如何在错误的路上越走越远

我于是像上面一样描述了问题，粘贴了报错和相关代码，洋洋洒洒写了一段前因后果丢给 Grok，它很快给我一段巨长的回答。

但我一眼看到它还在用 @tailwind 命令，我提醒它 Tailwind V4 应该用 @import，甚至还贴心的给了它官方升级文档的链接。

它又很快给了我一段回答，如果你也用过 Grok，你应该能感受到它的回答很快、也很长。所以我花一些时间描述我的问题，再花一些时间等它输出完毕，再花一些时间根据它的回答修改代码进行验证，基本上一个多小时很快就过去了，我手忙脚乱地把代码改的面目全非却什么也没得到。

于是…

git reset --hard 之后，我把问题又给了 DeepSeek。之所以一开始不问它，因为它总是很忙，有网友甚至重试了 44 次，我自忖没那么多的耐心，所以总是等到别的“小伙伴”不给力时才去找它。

基本上，我在它们几个身上浪费了至少三个小时的时间，它们的自信确实令人印象深刻。

3. 学会回到原点

求人不如求己。我突然想起来之前看的一本书 (写过一篇文章，即使用 Docker 和 Bash 搭建可持续开发环境)，书的作者说我们遇到的 99% 的问题，都可以通过 StackOverflow、GitHub 和官方文档来解决，而盲目自信的 AI 很多时候回答的都是错的，尤其是在你不知道如何解决问题的情况下，再去花很大的时间和精力去验证它们的错误答案，结果必然是很惨。

这里申明一下我个人的观点：AI 在帮助做一些重复性或技术含量不太高的事情时，确实特别有帮助，比如水文章、看报告、做总结、写样板代码等等都是一流的。但它只能依靠已有的训练它时的数据，而不能创造性的解决新问题，所以当遇到“棘手的新问题”时 (比如 Tailwind V4 刚发布也才不久，Google 上都没几篇和 Rails 相关的文章)，可想而知效果不会太好。

所以我开始学着回到原点，认认真真地看了一部分官方关于升级的文档，以及 GitHub 的一些讨论，主要是下面两个链接：

• https://github.com/rails/tailwindcss-rails/discussions/450#discussioncomment-12059381
• https://tailwindcss.com/docs/upgrade-guide

之后我通过下面的三个操作解决了问题 (样式正确、无 404)：

• 删除 (或清空) app/assets/stylesheets/application.tailwind.css 文件
• 新建 app/assets/tailwind/application.css 文件，文件内容：@import "tailwindcss";
• 修改 package.json 文件中的 "build:css" 命令为： "tailwindcss -i ./app/assets/tailwind/application.css ... (... 表示后面的内容不变)

但通过了解官方文档，我知道当前项目中还存在一些不合时宜的配置，于是我逐步验证并做了以下操作：

• 删除 tailwind.config.js 文件
• 删除 package.json 文件中的 autoprefixer、tailwindcss、postcss-import 依赖 (根据链接的 #using-postcss 部分)

期间的每一步我都通过 rm -rf app/assets/builds/ 和 bin/dev 进行了验证，确保终端、网页样式、DevTools 没有报错。

根据官方描述，甚至还可以进一步用 Tailwind CLI 来取代 PostCSS。

Tailwind 会扫描哪些文件：https://tailwindcss.com/docs/detecting-classes-in-source-files#which-files-are-scanned

4. 总结

总的来说，解决问题本身可能只需要两行代码，但我想通过记录这个过程，希望能够给别人一些启发，也能帮到以后的自己。

更重要的是，这一下午的时间不能就这样稀里糊涂的算了，总得有一堑一智。