Tailwind CSSとは？アプリ作成者向けにわかりやすく解説

Tailwind CSSは、Webサイトのスタイルを作るためのツールキットです。別々のスタイルルールを独自のファイルに書く代わりに、要素ごとに短く、すぐ使えるクラス名を付けます。例えば、白い背景にはbg-white、余白にはp-4、大きめの文字にはtext-lg、角丸にはrounded-xlです。すると、Tailwindがブラウザに必要なCSSを生成します。無料かつオープンソースで、現代のWebアプリのスタイル付けでもっとも一般的な方法のひとつです。

AIで作る場合にTailwindが大切な理由

AIアプリビルダーでWebアプリを作ると、そのアプリはTailwindでスタイルされている可能性が高いです。例えばMythexは、別の指定がない限り新しいプロジェクトをVite + React + TypeScript + Tailwindで始めます（技術の選び方）。

これはあなたにとって、次の3つの点で重要です。

• デザイン変更が手軽です。 スタイルは各ボタン、カード、見出しのすぐ横にあるので、AIは「カードをもう少しすっきりさせて」という依頼に対し、ひとつの場所にある数個のクラス名を変えるだけで対応できます。
• 読むことができます。 Tailwindのクラスは、ほぼ普通の英語に近いものです。text-center font-bold text-2xlは、コードを書いたことがなくても、意味を読み取るのはそれほど難しくありません。
• 見た目が統一されます。 Tailwindには、サイズ、余白、色の決まった目盛りが用意されています。そのおかげで、アプリ内に少しずつ違う灰色が14種類できてしまうことを防げます。

身近なたとえ

ペンキと家づくりを考えてみてください。

普通のCSSは、壁ごとに自分で絵の具を調合するようなものです。完全に自由ですが、しばらくすると、リビングは「温かみのある白」、廊下は「少しだけ温かみのある白」、そしてなぜそうしたのかを誰も覚えていない、という状態になりかねません。

Tailwindは、塗料店の色見本とラベル付きのシールのようなものです。どの壁にもシールが貼られ、そこには「白、つや消し、2回塗り」と書かれています。色見本に載っている色は、あらかじめ選ばれたものだけです。自由度は少し減りますが、作業に関わる全員が、シールを読むだけでそれぞれの壁がどう見えるべきかがわかります。

Tailwindの仕組み

Webページは、HTML（内容と構造）とCSS（見た目）で作られます。通常、CSSは次のようなルールを書いた別ファイルに置かれます。

.card {
  background: white;
  padding: 1rem;
  border-radius: 0.75rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

Tailwindでは、このようなルールを書く代わりに、要素に直接ユーティリティクラスを付けます。

<div class="bg-white p-4 rounded-xl shadow-sm">
  Your booking is confirmed
</div>

クラスはそれぞれ、小さなひとつの役割を果たします。アプリをビルドすると、Tailwindはファイルをスキャンして、実際に使われたクラスを見つけ、それらに対応するCSSだけを生成します。そのため、最終的なスタイルシートは小さくなります。

現在の主要バージョンであるTailwind 4は、設定がごくわずかで済みます。インストールし、プラグインをビルドツールに追加して、CSSファイルの先頭に@import "tailwindcss";と書くだけです。ブランドの色やフォントといったカスタマイズは、以前のバージョンのように大きなJavaScriptの設定ファイルではなく、デザイントークンとしてCSSの中に定義します。もし古いチュートリアルでtailwind.config.jsが出てきたら、それが理由です。

実例：料金カード

AIビルダーに料金ページを頼み、「Pro」のカードを目立たせたいとします。そのカードのコードは次のようになるかもしれません（Reactコンポーネントでは、classはclassNameと書きます）。

<div className="rounded-2xl border border-gray-200 p-6">
  <h3 className="text-lg font-semibold">Pro</h3>
  <p className="mt-2 text-4xl font-bold">$25</p>
  <button className="mt-6 w-full rounded-lg bg-gray-900 px-4 py-2 text-white">
    Start trial
  </button>
</div>

左から右へ読むと、次のとおりです。

「Proのカードを、青い枠線と控えめな影で目立たせて」と頼むと、AIはborder-gray-200をborder-2 border-blue-600に変え、shadow-lgを加えるかもしれません。変更はそれだけです。

レスポンシブデザインとダークモード

Tailwindには、画面サイズや状態を表すための短い接頭辞があります。

• md:grid-cols-3：中くらいの画面以上で3列になります。スマートフォンでは、接頭辞のないデフォルトの1列が適用されます。Tailwindはモバイルファーストで、接頭辞のないクラスはどこでも適用され、接頭辞付きのクラスが大きな画面向けの変更を加えます。
• hover:bg-gray-700：マウスカーソルを乗せたとき、ボタンの背景を濃くします。
• dark:bg-gray-900：ダークモードのときの別の背景です。

そのため、Tailwindのプロジェクトでは、スマホ対応のレイアウトやダークモードを頼むのも通常は手早く済みます。

主要な用語

よくある誤解

• 「Tailwindはデザインそのものだ」。 違います。Tailwindは見た目ではなく、部品を提供するものです。Tailwindで作った2つのサイトが、まったく違って見えることもあります。よくある「AIアプリらしい見た目」は、Tailwindそのものではなく、初期設定の見た目から生じています。ビルダーには具体的な方向性を示してください。AIで見栄えのよいアプリをデザインする方法を参照してください。
• 「インラインスタイルと同じだ」。 完全に同じではありません。クラスは共有の目盛りから来ており、ホバー、ダークモード、ブレークポイントに対応し、ビルド時に普通のCSSに変換されます。
• 「Tailwindはページを重くする」。 ビルドでは、使われているクラスだけが含まれるため、訪問者に配信されるCSSは通常小さくなります。
• 「クラスが長いとコードが散らかっている」。 最初は雑然と見えますが、要素の見た目に関する情報はすべて1か所にまとまっています。繰り返されるパターンは、通常はButtonのような1つのコンポーネントにまとめられます。
• 「Tailwindを使うと、独自のCSSは書けない」。 必要なときは、普通のCSSを書くこともできます。

AIビルダーに頼む内容

• 「ブランドの色とフォントを一度テーマのトークンとして定義して、直接色を書く代わりに、どこでもそれを使ってください。」
• 「すべてのカード、ボタン、入力欄で、角の丸みと余白を揃えてください。」
• 「スマートフォンの幅でレイアウトを確認し、はみ出しているところや、タップするには小さすぎるところを直してください。」
• 「Tailwindのdark:バリアントを使ってダークモードを追加し、文字のコントラストが読みやすいままか確認してください。」
• 「繰り返し使うボタンのスタイルを、再利用できるButtonコンポーネントに1つにまとめてください。」
• 「このセクションのTailwindのクラスを、普通の言葉で説明してください。」

MythexでのTailwind

新しいMythexのプロジェクトは、標準でReactとTypeScriptとともにTailwindを使います。そのため、見た目の変更を普通の言葉で頼み、ライブのプレビューで確認できます。コードを見たい場合は、コードエディターですべてのクラスを確認できます（Freeでは読み取り専用、Proでは編集可能です）。プレーンなCSSや別の構成を希望する場合は、最初のプロンプトでそう伝えてください。ドキュメントで、技術の選び方を説明しています。

よくある質問