【Ruby on Rails】tailwindCSS（v4）の導入と使い方

はじめまして！
プログラミング初心者のかずきです。
まだまだ初学者ですので、内容に間違いがあることもあるかと思います。その際はぜひ、コメントなどでご指摘いただけますと幸いです！

はじめに

Ruby on RailsでtailwindCSS version4.x（以降v4）を導入しようとしましたが、うまく実装方法が分からなかったので備忘録も兼ねて本記事を執筆しています。間違ってたらご指摘ください！

前提条件

Ruby on Rails 7.2.3
Ruby 3.4.8
Docker環境

tailwindCSS（v4）の導入方法

公式ドキュメント（Tailwind CSS）を基に導入していきます。

tailwindcss-rails gem をインストールする

実行場所：ターミナル

docker compose exec web bundle add tailwindcss-rails

GemfileとGemfile.lockにTailwindCSSの内容が自動で記載されインストールされます。
まだgemがインストールされただけなので動きません。

Tailwind CSS をインストールします

実行場所：ターミナル

docker compose exec web rails tailwindcss:install

上記を実行するといくつかファイルがダウンロードされます。
コマンド処理が終了したら、サーバーを再起動してください。

docker compose restart

導入は以上です。容易に導入することができました。

tailwindCSS（v4）の使い方

基本的な使い方

erbファイルなどの各ビューファイルのclass属性で

• bg-white（背景を白に変更する）
• text-xl（大きめの文字サイズを指定する）

など、(上記はあくまで一例ですが）1つ1つのやりたいことを並べて記載していきます。

<%= link_to "Qiita", "#", class: "bg-[#5EC8B7] text-white p-2 rounded" %>

デザインルールをcssファイルに定義する

tailwind導入時、app/assets/tailwind/application.cssファイルに以下が記述されています。

@import "tailwindcss";

この記述によりTailwindのスタイルが読み込まれ、erbファイルのclass属性に直接Tailwindが用意したクラス名を入力できるようになります。
また、このcssファイルにデザインルールを定義することができます。

＠theme

＠themeディレクティブ（Tailwind専用の命令文）を使用することで、
フォントや色などを名前付きで定義することができます。
以下は色を名前付きで定義します。

@import "tailwindcss";
@theme {
  --color-red: #DD6457;
  --color-blue: oklch(0.85 0.13 182.2);
}

--colorで色を定義、-red:で命名、#DD6457;で指定したい実際の色
これにより、--color-red と定義した色を、bg-red のようにクラス名として利用できるようになります。

<%= link_to "Qiita", "#", class: "bg-[#766EE5] text-white p-2 rounded" %>
<%= link_to "Qiita", "#", class: "bg-red text-white p-2 rounded" %>

1行目は前回。2行目はredで定義した配色を利用しています。

ほかに＠themeディレクティブで様々なCSSを定義することができます。
この＠themeディレクティブで定義されるCSSのことをテーマ変数と呼びます。
あまりにも多そうなので公式ドキュメントのテーマ変数を参照してください。

＠apply

簡単にいうと、Tailwindが用意したクラスの集合体を自分で作ったクラス名に置き換えているイメージです。
TailwindCSSは基本的にclassに一つずつ要素を記載していきます。
＠applyディレクティブはいくつかの要素をまとめたものを定義します。

@import "tailwindcss";
@theme {
  --color-red: #DD6457;
  --color-blue: oklch(0.85 0.13 182.2);
}

.button {
  @apply bg-blue text-white p-2 rounded;
}

buttonという名前で定義しました。＠themeで定義したblueも使用可能です。

<%= link_to "Qiita", "#", class: "bg-[#766EE5] text-white p-2 rounded" %>
<%= link_to "Qiita", "#", class: "bg-red text-white p-2 rounded" %>
<%= link_to "Qiita", "#", class: "button" %>

class: "button"だけで実装することが可能です。
決まった形を何度も使用する際に便利そうですね。

他にも、ダークモードに対応している＠variantや色に透明度をつける--alpha()などもありますが、長くなるので割愛します。

おわりに

これでも公式ドキュメントの内容が濃すぎます。これでも初歩の初歩あたりの内容だと思いました。
まだまだ奥深いのでまた執筆できたらなと思っています。
※＠を大文字で記載している箇所もありますが、全て小文字の認識でお願いします。

参考

公式ドキュメント（Tailwind CSS）