🦁
Rails 7 に Tailwind CSS を導入する
あると何かと便利な Tailwind CSS を導入したのでメモです。
以下を参考にさせていただきました。
概要
対象
- Rails 7 の環境に Tailwind CSS を導入したい方
- ついでに Sass も導入したい方
前提
- CPU：Mac M1
- Rails 7
- Docker 上で起動
手順
まずは公式通りにやってみる
最初に以下の 2 つのコマンドを叩くと色々とファイルが作成されます。
$ ./bin/bundle add tailwindcss-rails
$ ./bin/rails tailwindcss:install
公式上では他にもtailwind.config.jsやapplication.tailwind.cssファイル上に色々追記しろ的なことが書かれてますが、基本はインストールされた段階で勝手に記載されているので、いじる必要なしです。
そして./bin/devコマンド叩いてビルド & サーバー起動するだけで導入完了らしいので、先に以下を追加しておきます。
これでうまく Tailwind が入っていれば、テキスト大きくなって太字になってアンダーラインがつくはずです。
app/views/top/index.html.erb
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
サーバー起動のために以下を叩きます。
$ ./bin/dev
上記のコマンドで/bin/devファイルにある foreman が呼び出され、作成された以下のファイルのコマンドを実行します。
サーバー起動中は以下で Tailwind を Watch してくれるので、リアルタイムに変更を反映してくれる仕組みです。
Procfile.dev
web: bin/rails server -b 0.0.0.0 -p 3200
css: bin/rails tailwindcss:watch
できました！めっちゃ簡単でしたね。
ちなみに Haml など、erb 以外の環境の場合は以下が勝手に追加されないので、自分で追記する必要があるので注意が必要です。
app/views/layouts/application.html.haml
= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload"
ここに Sass 環境も入れてみる
以下の記事ですでに Sass の導入については触れましたが、せっかくなので Tailwind CSS と同じ環境に共存させようと思います。
といっても上記の記事の通りに以下のコマンドを叩き、./bin/devでサーバー再起動してやれば動きました。
$ ./bin/bundle add dartsass-rails
$ ./bin/rails dartsass:install
以下にも DartSass の Watch が追加されています。
Procfile.dev
web: bin/rails server -b 0.0.0.0 -p 3200
css: bin/rails tailwindcss:watch
+ css: bin/rails dartsass:watch
まとめ
以下の手順だけでそれぞれ導入が可能なので、ぜひお試しください。
【Tailwind CSS】
$ ./bin/bundle add tailwindcss-rails
$ ./bin/rails tailwindcss:install
【Sass】
$ ./bin/bundle add dartsass-rails
$ ./bin/rails dartsass:install
お疲れ様でした◎
Discussion