rails8: 添加 tailwindcss4

rails8中添加 tailwind4 最新版本

01 新建项目 rails8

添加 rails8 项目

rails new . --skip-test --css tailwind

02 安装 tailwindcss4

默认安装的就是 tailwind4

./bin/rails tailwindcss:install

确认有这个过程

$ p ./bin/rails tailwindcss:install
       apply  /Users/feizheng/.rbenv/versions/3.3.6/lib/ruby/gems/3.3.0/gems/tailwindcss-rails-4.4.0/lib/install/install_tailwindcss.rb
  Add Tailwindcss container element in application layout
  Build into app/assets/builds
       exist    app/assets/builds
   identical    app/assets/builds/.keep
   unchanged    .gitignore
   unchanged    Procfile.dev
  Add bin/dev to start foreman
       force    bin/dev
  Compile initial Tailwind build
         run    rails tailwindcss:build from "."
≈ tailwindcss v4.1.18

Done in 49ms
         run  bundle install --quiet

03 运行新的开发模式

这个时候，不要使用 rails s 来运行了

./bin/dev

有可能会提示 foreman 不存在

bundle add foreman
# github 上别人的解决方案
If anyone is facing the same issue and using rbenv, you should run rbenv rehash as a new executable was installed.

最好放在 dev 的依赖中

group :development do
  # Use console on exceptions pages [https://github.com/rails/web-console]
  gem "web-console"
  gem "foreman", "~> 0.90.0"
end

04 添加 tailwind.config.js 配置文件

添加配置文件

@import "tailwindcss";
@config "./tailwind.config.js"

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './app/views/**/*.html.erb',
    './app/helpers/**/*.rb',
    './app/assets/stylesheets/**/*.css',
    './app/javascript/**/*.js',
  ],
  theme: {
    extend: {
      colors: {
        primary: '#3b82f6',
        secondary: '#8b5cf6',
        success: '#10b981',
        danger: '#ef4444',
      },
      spacing: {
        'section': '4rem',
      },
    },
  },
  plugins: [],
}

05 可能需要修复的依赖

./bin/dev 脚本最后一句(目前是这么解决的，不确认是不是有问题)

exec foreman start -f Procfile.dev "$@"

变成这样

bundle exec foreman start -f Procfile.dev "$@"

06 确认 index.html 保持不变

最终的 HTML 内容如下

<!DOCTYPE html>
<html>
  <head>
    <title><%= content_for(:title) || "Jsw Rails Ng" %></title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="application-name" content="Jsw Rails Ng">
    <meta name="mobile-web-app-capable" content="yes">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= yield :head %>

    <%# Enable PWA manifest for installable apps (make sure to enable in config/routes.rb too!) %>
    <%#= tag.link rel: "manifest", href: pwa_manifest_path(format: :json) %>

    <link rel="icon" href="/icon.png" type="image/png">
    <link rel="icon" href="/icon.svg" type="image/svg+xml">
    <link rel="apple-touch-icon" href="/icon.png">

    <%# Includes all stylesheet files in app/assets/stylesheets %>
    <%= stylesheet_link_tag :app, "data-turbo-track": "reload" %>
  </head>

  <body>
    <main class="container mx-auto mt-28 px-5 flex">
      <%= yield %>
    </main>
  </body>
</html>

rails tailwind config