旧Mac（Catalina 10.15）Tailwind CSS与Rails 8.0.2兼容问题

问题背景 #

使用2012年末款Mac，运行Mac OS Catalina 10.15（无法升级系统），已成功搭建Ruby on Rails 8.0.2测试应用，bin/rails server可正常运行。执行以下命令添加Tailwind CSS后：

./bin/bundle add tailwindcss-rails
./bin/rails tailwindcss:install

运行bin/dev时触发错误，提示tailwindcss二进制文件为Mac OS X 13.0编译，系统找不到___ulock_wait2符号。尝试将Gemfile中tailwindcss-rails版本指定为~>3.0，又出现Bundler::GemNotFound错误。

可行解决方案 #

1. 指定兼容Catalina的tailwindcss-rails具体版本 #

~>3.0的版本范围可能无法匹配到支持旧系统的版本，建议直接指定最后一批兼容Mac OS 10.15的版本，比如3.4.1：

• 修改Gemfile：

  gem 'tailwindcss-rails', '~> 3.4.1'
  

• 先手动安装该版本（避免bundle找不到）：

  gem install tailwindcss-rails -v 3.4.1
  

• 再执行依赖安装：

  bundle install
  

2. 手动替换兼容的Tailwind二进制文件 #

如果gem安装后仍出现符号缺失错误，可手动替换二进制文件：

1. 找到tailwindcss-rails的安装路径：

   bundle show tailwindcss-rails
   

2. 进入路径下的exe/x86_64-darwin目录；
3. 下载支持Mac OS 10.15的Tailwind CSS v3.4.1二进制文件；
4. 替换原有的tailwindcss文件，赋予执行权限：

   chmod +x tailwindcss
   

3. 独立安装Tailwind CSS CLI（不依赖gem） #

放弃tailwindcss-rails gem，改用npm直接管理：

1. 初始化npm项目：

   npm init -y
   

2. 安装兼容版本的Tailwind及依赖：

   npm install tailwindcss@3.4.1 postcss autoprefixer
   

3. 生成Tailwind配置文件：

   npx tailwindcss init -p
   

4. 修改tailwind.config.js，配置Rails项目的内容路径：

   module.exports = {
     content: [
       "./app/views/**/*.html.erb",
       "./app/helpers/**/*.rb",
       "./app/assets/javascripts/**/*.js",
       "./app/javascript/**/*.js"
     ],
     theme: { extend: {} },
     plugins: [],
   }
   

5. 在app/assets/stylesheets/application.tailwind.css中添加Tailwind指令：

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

6. 修改config/initializers/assets.rb，添加预编译规则：

   Rails.application.config.assets.precompile += %w( application.tailwind.css )
   

7. 调整bin/dev来启动Tailwatch的监听模式：
   修改package.json的scripts：

   "scripts": {
     "tailwind:watch": "npx tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css --watch"
   }
   

   更新bin/dev内容：

   #!/usr/bin/env bash
   
   set -e
   
   # 启动Rails服务
   rails server &
   
   # 启动Tailwind监听
   npm run tailwind:watch &
   
   wait
   

这样即可绕开gem的系统兼容限制，正常使用Tailwind CSS。

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