上の記事に書いたように、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のバイナリ版がリリースされていた
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からなので、ごく最近の話ですね。
- 元記事: Standalone CLI: Use Tailwind CSS without Node.js – Tailwind CSS
- Release v3.0.3 · tailwindlabs/tailwindcss
現時点では、以下のバイナリがリリースされています。
- 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
関連記事
The post Rails 7: importmap-rails + tailwindcss-railsでnode.jsが不要な理由 first appeared on TechRacho.