Tech Racho エンジニアの「?」を「!」に。
  • Ruby / Rails関連

Rails 7: importmap-rails + tailwindcss-railsでnode.jsが不要な理由

Rails 7 : rails newのフロントエンド関連オプションの組み合わせを調べてみた

上の記事に書いたように、Rails 7でimportmap-railsを使う場合、node.jsは不要になり、node_modules/ディレクトリも作成されません。

# デフォルトでimportmap-railsがインストールされる
$ rails new . 

ちょっと不思議だったのは、importmap-railsとtailwindcss-railsを組み合わせた場合にもnode.jsが不要なことです。なお、このセットアップではconfig/importmap.rbにtailwindのエントリは入らず、app/assets/builds/の下にtailwind.cssがビルドされます。つまりCDNは参照していません、

# importmap-railsとtailwindcss-rails gemがインストールされる
$ rails new . -c tailwind

どうしてimportmap-railsとtailwindcss-railsの組み合わせだとnode.jsが不要なんでしょう?

なお、esbuild・webpack・rollupのいずれかを使う場合は、tailwindcssはgemとしてではなくyarn add tailwindcssでインストールされます。当然node_modulesも作成されます。

# tailwindcssはyarn add tailwindcssでインストールされる
$ rails new . -c tailwind -j esbuild

tailwindcss-cliのバイナリ版がリリースされていた

rails/tailwindcss-rails - GitHub

tailwindcss-railsのREADMEを見ると、冒頭にこんなことが書いてありました。

This gem wraps the standalone executable version of the Tailwind CSS 3 framework. These executables are platform specific, so there are actually separate underlying gems per platform, but the correct gem will automatically be picked for your platform. Supported platforms are Linux x64, macOS arm64, macOS x64, and Windows x64. (Note that due to this setup, you must install the actual gems – you can’t pin your gem to the github repo.)
tailwindcss-rails READMEより

何と、本家tailwindcssで、tailwindcss-cliのスタンドアロンバイナリがアーキテクチャごとにリリースされるようになっていたそうです。2021年12月5日のv3.0.3からなので、ごく最近の話ですね。

tailwindlabs/tailwindcss - GitHub

現時点では、以下のバイナリがリリースされています。

  • Linux(x64)
  • Linux(Arm64)
  • macOS(x64)
  • macOS(Arm64)
  • Windows(x64)

tailwindcss-rails gemは環境に応じたtailwindcss-cliバイナリを選んでインストールするので、node.jsがなくてもビルドを実行できるということがわかりました。対応するバイナリがないレアな環境だと利用できないことになります。

Procfile.devで呼び出されるtailwindcss:watchは、つまりこのバイナリを実行しているんですね。

# Procfile.dev
web: bin/rails server -p 3000
css: bin/rails tailwindcss:watch

なお、tailwindcss-railsのrakelib/package.rakeでバイナリを指定しています↓。

このtailwindcss-cliバイナリがtailwindcss-rails gemに取り入れられたのは12月18日でした↓。Rails 7.0.0のリリースが12月16日だったので7.0.0には惜しくも間に合いませんでしたが、以後普通に利用できます。

当初はx64系のみでしたが、Arm64系バイナリにも対応しています。

Rails環境では、必要に応じてbundle exec tailwindcssも実行できるそうです。importmap-rails環境では直接使う機会はあまりなさそうですが。

$ bundle exec tailwindcss --help

tailwindcss v3.0.7

Usage:
   tailwindcss [--input input.css] [--output output.css] [--watch] [options...]
   tailwindcss init [--full] [--postcss] [options...]

Commands:
   init [options]

Options:
   -i, --input              Input file
   -o, --output             Output file
   -w, --watch              Watch for changes and rebuild as needed
       --content            Content paths to use for removing unused classes
       --postcss            Load custom PostCSS configuration
   -m, --minify             Minify the output
   -c, --config             Path to a custom config file
       --no-autoprefixer    Disable autoprefixer
   -h, --help               Display usage information

関連記事

Rails 7: importmap-rails gem README(翻訳)


CONTACT

TechRachoでは、パートナーシップをご検討いただける方からの
ご連絡をお待ちしております。ぜひお気軽にご意見・ご相談ください。