背景
個人プロジェクト（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 プロジェクトにスムーズに組み込めるので、ぜひ試してみてください！