Tailwind CSS

Tailwind CSSは、単一の目的を持つ小さなクラスをHTMLに直接書いてページをスタイリングする、ユーティリティファーストのCSSフレームワークです。p-4、text-center、bg-blue-500のようなクラスは、それぞれ一つのスタイルを設定します。開発者はこれらのクラスを組み合わせて、独自のCSSをほとんど書かずにどんなデザインでも作れます。

ユーティリティファーストのCSSとは、コンポーネントごとに独自のクラスを書くのではなく、それぞれ一つのことだけを行う多数の小さなクラスでデザインを組み立てる方法です。たとえばボタンの見た目は、余白、色、角の丸み、文字の太さのクラスで作ります。この方法ならスタイルをマークアップのそばに置け、膨らみ続ける大きなスタイルシートを避けられます。

開発者がTailwind CSSを選ぶのは、スタイリングが速くなり、最終的なCSSファイルも小さく保てるからです。クラス名を考えたり、変更のたびにHTMLとCSSのファイルを行き来したりする必要がありません。Tailwind CSSには余白、色、文字サイズの統一された段階もあり、デザインを整った状態に保てます。

Tailwind CSSは独自のデザインを作るための低レベルのユーティリティクラスを提供し、Bootstrapはナビゲーションバー、カード、モーダルなどの既製のコンポーネントを提供します。デザインの手間をかけずに標準的な見た目にしたいなら、Bootstrapのほうが速く仕上がります。標準テーマと格闘せずに独自のデザインを実現したいプロジェクトには、Tailwind CSSのほうが向いています。

Tailwind CSSはnpmでインストールし、Vite、PostCSS、Tailwind CLIなど、プロジェクトのビルドツールに接続します。Tailwind CSSバージョン4では、パッケージを追加した後、メインのCSSファイルの先頭に @import "tailwindcss" と書いて読み込みます。公式のインストールガイドには、Laravel、Next.js、Viteなど主要なフレームワークごとの短い手順が載っています。

margin、padding、flexbox、gridといった基本的なCSSプロパティをすでに理解している初心者なら、Tailwind CSSで問題ありません。Tailwindの各クラスは実際のCSSプロパティに対応しているため、先にCSSを学んでおけばクラスも読みやすくなります。CSSの基本を飛ばした初心者は、Tailwind CSSでレイアウトの崩れを直すのに苦労しがちです。

CSSを知っている開発者の多くは、数日でTailwind CSSを使って効率よく作業できるようになります。クラス名ははっきりした規則に沿っているため、一つのグループを覚えれば残りも推測できます。レスポンシブのバリアント、独自テーマ、コンポーネントの作り方を使いこなすには、実際に数週間使う必要があります。

Tailwind CSSのレスポンシブデザインは、ユーティリティクラスの前に sm:、md:、lg: などのブレークポイントの接頭辞を付けて作ります。Tailwind CSSはモバイルファーストなので、接頭辞のないクラスはすべての画面に、接頭辞付きのクラスはそのブレークポイント以上の画面に適用されます。たとえば text-sm md:text-lg と書けば、スマートフォンでは小さな文字、広い画面では大きな文字になります。

Tailwind CSSの標準のブレークポイントは、smが640ピクセル、mdが768ピクセル、lgが1024ピクセル、xlが1280ピクセル、2xlが1536ピクセルです。各ブレークポイントは最小幅を表し、Tailwindのモバイルファーストの考え方に合っています。プロジェクトのテーマ設定で、これらの値を変えたり新しいブレークポイントを追加したりできます。

Tailwind CSSでは、dark:bg-gray-900 のように、クラスの前に dark: の接頭辞を付けてダークモードを追加します。標準では、Tailwind CSSは訪問者のOSの設定に従います。ボタンでダークモードを切り替えられるようにしたい場合は、darkバリアントがページのクラスやdata属性に応じて切り替わるよう設定します。

Tailwind CSSバージョン4では、メインのCSSファイルの @theme ブロックの中でCSS変数を使って色やフォントをカスタマイズします。--color-brand のような変数を作ると、bg-brand や text-brand といったクラスが自動的に生成されます。以前のバージョンでは同じことを tailwind.config.js ファイルで行っており、その方法も互換オプションを通じてバージョン4で使えます。

一つの要素に多くのクラスが付くことがあるため、Tailwind CSSを使うとHTMLがごちゃごちゃして見えることはあります。多くのチームは、繰り返し使うパターンをBlade、React、Vueなどのコンポーネントにまとめて解決しています。その代わり、スタイルがマークアップのすぐ隣に見えるので、変更を素早く安全に行えます。

Tailwind CSSは、プロジェクトのファイルを走査し、実際に使われているクラスだけを生成することでCSSファイルを小さく保っています。使われていないユーティリティが最終的なスタイルシートに入ることはありません。Tailwind CSSで作った本番用のCSSファイルは、大規模なサイトでも一般的に小さなサイズに収まります。

Tailwind CSSの@applyディレクティブは、自分で書くCSSのルールの中でTailwindのユーティリティクラスを使えるようにするものです。テキストエディターが生成するHTMLなど、自分で制御できないコンテンツのスタイリングに便利です。スタイルを再利用するにはコンポーネントのほうがすっきりすることが多いため、Tailwindのチームは控えめに使うことを勧めています。

はい、Tailwind CSSはLaravelとの相性が良く、新しいLaravelプロジェクトにはViteでTailwind CSSを使う設定が最初から含まれています。BladeテンプレートにTailwindのクラスを書き、Viteが最終的なCSSをビルドします。Laravelのスターターキットも、ログイン画面やダッシュボード画面にTailwind CSSを使っています。

はい、Tailwind CSSはReact、Vue、Svelteをはじめ、ほとんどのJavaScriptフレームワークで使えます。クラスは、ReactならclassName、Vueならclassを通じてコンポーネントのマークアップに書きます。各コンポーネントが自分のクラスを持つため、Tailwind CSSはコンポーネントベースのフレームワークとよくなじみます。

Tailwind CSSが検索順位に直接影響することはありませんが、CSSファイルを小さく保ちページを速くすることで、間接的にSEOの助けになります。ページの速さは、Googleのページエクスペリエンスの指標の一部です。それでも、スタイリングのツールよりも、コンテンツ、ページの構成、HTMLの意味づけのほうがはるかに重要です。

Tailwind CSSの任意値とは、テーマにない正確な値を角かっこで書いて使えるようにする機能です。たとえば w-[37%] や top-[117px] と書けば、その値のクラスがその場で作られます。任意値は一度きりの場面に便利ですが、頻繁に使う値はテーマに登録すべきです。

Tailwind CSSのホバーやフォーカスの状態は、ユーティリティクラスの前に hover:、focus:、active: などの状態の接頭辞を付けて指定します。たとえば bg-blue-500 hover:bg-blue-600 と書けば、マウスを乗せたときにボタンの色が濃くなります。md:hover:underline のように、接頭辞はブレークポイントやダークモードと組み合わせられます。

いいえ、Tailwind CSS自体に含まれるのはユーティリティクラスだけで、モーダルやナビゲーションバーなどの既製のコンポーネントはありません。既製のコンポーネントは、公式のTailwind PlusやdaisyUI、Flowbiteなどのコミュニティのライブラリといった、別のコレクションから手に入ります。多くのチームは、ユーティリティの上に自分たちの小さなコンポーネント集を作っています。

はい、Tailwind CSSは rtl: と ltr: のバリアント、そして論理的なユーティリティクラスによって、右から左のレイアウトに対応しています。ms-4 や pe-2 などの論理クラスは行の始まりや終わりの余白を設定するため、アラビア語では自動的に左右が反転します。これにより、一つのマークアップで英語とアラビア語の両方のページに対応できます。

Tailwind CSSバージョン4では、設定が @theme ブロックと一行の @import によってCSSの中に移りました。バージョン4では、より高速なビルドエンジン、コンテンツファイルの自動検出、カスケードレイヤーなどの最新のCSS機能も導入されました。バージョン3からアップグレードするプロジェクトの多くは、公式のアップグレードツールでコードを更新できます。

独自のデザインをほとんど必要とせず既製のコンポーネント一式が欲しいプロジェクトや、チームが従来のCSSを書くことを好む場合は、Tailwind CSSが合わないかもしれません。スタイルが少しだけの小さな静的ページなら、フレームワーク自体が不要なこともあります。Tailwind CSSが最も力を発揮するのは、独自デザインを持ち、成長し続けるプロジェクトです。

繰り返し使うパターンをコンポーネントにまとめ、クラスを一定の順番に並べることで、Tailwind CSSのクラスを整理された状態に保てます。Tailwind CSSの公式Prettierプラグインを使えば、保存時にクラスが自動で並べ替えられます。ブランドの色や余白をテーマに定義しておくと、クラスも短く統一されます。

はい、Tailwind CSSはMITライセンスのオープンソースなので、個人のプロジェクトでも商用のプロジェクトでも使えます。このライセンスでは、どんな製品でもTailwind CSSを使用、変更、配布できます。ソースコードはGitHubで公開されており、誰でも読んで問題を報告できます。