背景

個人プロジェクト（Ruby, Ruby on Rails）でtailwindを使った実装をすることになったため、その時の導入方法を記録として残しておきます。

tailwindとは

Tailwind CSSは、ユーティリティファーストのCSS（カスケーディングスタイルシート）フレームワークです。ウェブページの構築やデザインで定義済みのクラスの形でHTML内にCSSを記述できます。
似たようなものですと、Bootstrapなどがあります。

※ユーティリティファーストのCSSとは、マークアップ（HTML）内の、定義済み機能を備えたクラスを指します。つまり、あらかじめ定義されたスタイルを持つクラスを記述するだけで、そのスタイルを要素に適用できます。

簡単な使い方を紹介

通常のCSSを使って実装する方法、Tailwind CSSでユーティリティクラスを使用して実装する方法は、それぞれ以下のようになります。

#HTML
<button class="btn">クリック</button>

#CSS
.btn {
  background-color: #000;
  color: #fff;
  padding: 8px;
  border: none;
  border-radius: 4px;
}

#Tailwind
<button class="bg-black text-white p-2 rounded">クリック</button>

Tailwind CSSの場合、これだけで通常のCSSを使用した例と同じスタイルが設定できます。使用した各クラス名にはすでにスタイルが定義されているため、外部スタイルシートにスタイルを記述する必要はありません。

Tailwind CSSのメリットとデメリット

メリット

Tailwind CSSを使用することで、以下のような利点があります。

開発プロセスが高速化できる
→ ユーティリティクラスを使うことで、CSSの定義不要で即座にスタイリング可能。
ユーティリティとコンポーネントが簡単にカスタマイズ可能
→ tailwind.config.js でデザインを柔軟に変更できる。
本番用のファイルサイズが常に小さい
→ 未使用のCSSを削除（PurgeCSS)するため、軽量なCSSを生成可能。
CSSの知識があれば、簡単に習得可能
→ クラスを組み合わせるだけでデザインできるので、CSSに慣れていればすぐ使える。
ドキュメントが充実
→ 公式ドキュメントが詳しく、情報が豊富。

デメリット

一方で、Tailwind CSSには以下の欠点もあります。

大規模なプロジェクトではマークアップが乱雑に見える
→ クラスが長くなりがちで、可読性が低下することがある。
CSSを十分に理解していないと、習得が困難
→ コンポーネント指向のCSSと異なり、CSSの概念を理解していないと学習コストが高い。
すべてを1から構築しなければならない
→ Tailwind CSSはデフォルトのCSSスタイルを削除するため、ボタンやフォームなども最初からデザインする必要がある。

導入手順

導入手順は至って簡単です。

1. まず、Tailwind CSS を Rails に追加します。

bundle add tailwindcss-rails
rails tailwindcss:install

実行後に自動で設定されるもの

・app/assets/tailwind/application.css （CSS 読み込み用）
・Procfile.devの設定を追加（開発環境で rails server + tailwindcss:watch を実行）

web: bin/rails server -p 3000
css: npm run build:css -- --watch
css: bin/rails tailwindcss:watch <= 追加

※私はすでに別途bin/devの設定をしていましたが、下記のコードが追加されていました。
・bin/dev （開発環境の起動スクリプ設定）

# Default to port 3000 if not specified
export PORT="${PORT:-3000}"

# Let the debug gem allow remote connections,
# but avoid loading until debugger is called
export RUBY_DEBUG_OPEN="true"
export RUBY_DEBUG_LAZY="true"

2. Tailwind をレイアウトに適用

doctype html
html
  head
    title
      | タイトル
    meta[name="viewport" content="width=device-width,initial-scale=1"]
    = csrf_meta_tags
    = csp_meta_tag
    = stylesheet_link_tag "tailwind", "data-turbo-track": "reload"　<= 追加
    = stylesheet_link_tag "home", "data-turbo-track": "reload"
    = javascript_importmap_tags
  body

3. サーバー立ち上げ

開発環境で Tailwind CSS を監視しながら Rails を起動する。

bin/dev

4. Tailwind を試してみる

Tailwind のクラスを適用できるか確認。

p.mt-2.sm:mt-3.text-4xl.sm:text-6xl.font-bold.text-blue-600
  | Hello world!

上記の４ステップで簡単に導入が可能です！

まとめ

Tailwind CSS は、クラスを直接 HTML に適用することで、素早く柔軟にデザインできる CSS フレームワークです。本記事では、rails tailwindcss:install を実行し、stylesheet_link_tag を追加、bin/dev でサーバーを起動するだけの 4ステップで簡単に導入できる方法を紹介しています。軽量でカスタマイズ性も高く、Rails プロジェクトにスムーズに組み込めるので、ぜひ試してみてください！