Railsでブログアプリを作ってみたものの、見た目がいまいち…。
そんなときに便利なのが Tailwind CSS です。
今回は、RailsにTailwind CSSを導入して、ブログのデザインを一気に改善する手順を紹介します。
※Tailwind CSSはバージョン4系になります。3系から大きく変更があるので注意してください。
結論（先にポイント）
- tailwindcss-rails というGemを使うと、RailsにTailwind CSSを簡単に導入できる
- Rails 7以降は
bin/devコマンドでCSSやJSのプロセスをまとめて管理する - Tailwind CSSの
proseクラスを使えば、ブログ記事のスタイルが一気に整う - DeviseなどのフォームもTailwind CSSでオシャレにカスタマイズ可能
目次
Tailwind CSSの導入手順
1. Gemを追加してインストール
まずはGemを追加します。
bundle add tailwindcss-rails次にTailwind CSSをインストールします。
rails tailwindcss:installこのコマンドはTailwind CSS CLIのラッパーで、Rails用にファイルの生成や設定をしてくれます。
2. bin/dev でプロセス管理
Tailwindはファイルの変更を監視してCSSを再生成する必要があります。そのため、今後は以下のコマンドでアプリケーションに立ち上げます。
bin/devこのコマンドは Procfile.dev を参照して、RailsサーバーとTailwindのwatchを並行して起動します。
ここまでの状態で、 bin/dev コマンドでアプリケーションを起動すると、以下のようにCSSがリセットされている状態になります。
3. プラグインを追加
Tailwindのインストールにより、app/assets/tailwind/application.css というファイルが生成されています。
Tailwindでプラグインを使ったり、独自のスタイルを定義する場合は、この application.css に記述します。
以下のように変更します。
@import "tailwindcss";
@plugin "@tailwindcss/typography";
@plugin "@tailwindcss/forms";4. デザインを整える (prose クラス)
Tailwind CSSは初期状態で全スタイルをリセットしてしまうため、prose クラスを使うと便利です。
<body class="prose mx-auto">
...省略
</body>proseクラスはh1やpタグに適切にスタイリングしてくれます。
さらに、mx-autoを使うことで中央寄せにすることができます。
これだけで、見出しや段落のスタイルが適切に整います。
5. Deviseフォームのスタイルも改善
フォームのボタンにもTailwindを適用してみましょう。
まず、Deviseのビューをコピーします。
rails generate devise:viewsそして、たとえばログインボタンに以下のクラスを追加します。
<%= f.submit "Log in", class: "bg-gray-100 px-4 py-2 rounded hover:bg-gray-200" %>これで、ホバー時の色変更なども簡単に実現できます。
まとめ
Tailwind CSSをRailsに導入することで、以下のようなメリットがあります。
- スタイリングが早い！ class 属性に記述するだけ
- デフォルトスタイルをいい感じにしてくれる prose が超便利
- フォームやボタンも簡単にカスタマイズできる
個人的には、TailwindはRailsとの相性も良く、開発スピードが格段に上がると感じています。
参考記事
スポンサーリンク
