WSL环境下Rails项目无法安装配置tailwindcss-rails求助

问题分析 #

报错信息ELF: not found和语法错误，本质是WSL环境对tailwindcss-rails预编译的Linux二进制文件兼容性问题，常见于WSL1环境（对原生Linux ELF64程序支持有限），或gem的预编译二进制包适配异常。

解决办法 #

1. 升级到WSL2（推荐） #

WSL2对Linux程序兼容性远优于WSL1，是最彻底的解决方案：

• 打开Windows PowerShell，执行命令：

  wsl --set-version <你的WSL发行版名称> 2
  

  例如你的发行版是Ubuntu 20.04，命令为：

  wsl --set-version Ubuntu-20.04 2
  

• 重启WSL终端，重新执行rails new命令创建项目。

2. 手动修复tailwindcss二进制文件 #

若无法升级WSL2，可手动替换适配的二进制文件：

• 卸载现有gem：

  gem uninstall tailwindcss-rails
  

• 编辑项目根目录的Gemfile，修改tailwindcss-rails的声明，避免安装预编译二进制版本：

  gem 'tailwindcss-rails', platforms: [:ruby]
  

• 重新安装依赖：

  bundle install
  

• 下载与gem版本匹配的Linux x64版tailwindcss二进制文件（需对应你使用的2.0.21版本）
• 替换gem中的二进制文件：
  找到gem安装路径/home/rishabh/.rvm/gems/ruby-3.0.1/gems/tailwindcss-rails-2.0.21-x86_64-linux/exe/x86_64-linux/tailwindcss，将下载的二进制文件覆盖该路径，并赋予执行权限：

  chmod +x /home/rishabh/.rvm/gems/ruby-3.0.1/gems/tailwindcss-rails-2.0.21-x86_64-linux/exe/x86_64-linux/tailwindcss
  

• 重新执行构建命令：

  rails tailwindcss:build
  

3. 替代方案：使用npm手动集成Tailwind CSS #

放弃tailwindcss-rails gem，直接通过npm安装Tailwind：

• 创建Rails项目时不指定css参数：

  rails new task-management-app --database=postgresql
  

• 进入项目目录，初始化npm：

  npm init -y
  

• 安装Tailwind及依赖：

  npm install -D tailwindcss postcss autoprefixer
  

• 初始化Tailwind配置文件：

  npx tailwindcss init -p
  

• 编辑tailwind.config.js，添加Rails项目的文件路径：

  /** @type {import('tailwindcss').Config} */
  module.exports = {
    content: [
      "./app/views/**/*.html.erb",
      "./app/helpers/**/*.rb",
      "./app/assets/javascripts/**/*.js",
      "./app/components/**/*.{erb,rb}"
    ],
    theme: {
      extend: {},
    },
    plugins: [],
  }
  

• 创建app/assets/stylesheets/tailwind.css，添加Tailwind指令：

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

• 编辑app/assets/config/manifest.js，引入tailwind样式：

  //= link tailwind.css
  

• 修改package.json，添加CSS构建命令：

  "scripts": {
    "build:css": "tailwindcss -i ./app/assets/stylesheets/tailwind.css -o ./app/assets/builds/tailwind.css --minify",
    "watch:css": "tailwindcss -i ./app/assets/stylesheets/tailwind.css -o ./app/assets/builds/tailwind.css --watch"
  }
  

• 若使用bin/dev，修改Procfile.dev，添加CSS监听进程：

  web: bin/rails server -p 3000
  css: npm run watch:css
  

• 执行构建或启动开发服务：

  # 一次性构建
  npm run build:css
  # 启动开发服务
  bin/dev
  

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