この記事の要点は？

Tailwind CSS初心者向けの完全入門ガイド。インストール、基本クラス、レスポンシブ対応、カスタマイズまで分かりやすく解説します。

思ったより簡単なんだね！基本的なクラスってどんなものがあるの？

よく使うものを紹介するね。`p-4` はパディング4（1rem）、`m-2` はマージン2（0.5rem）、`text-lg` はフォントサイズ大、`bg-blue-500` は青い背景色、`rounded-lg` は角丸、`flex` はフレックスボックス。数字が大きいほど値も大きくなる仕組みで、`p-1` が0.25rem、`p-2` が0.5rem、`p-4` が1remという感じだよ。

レスポンシブ対応もできるの？スマホとPCで表示を変えたいんだけど…

Tailwindはレスポンシブ対応がめちゃくちゃ簡単だよ。クラスの前に `sm:` `md:` `lg:` `xl:` といったプレフィックスを付けるだけ。たとえば `text-sm md:text-lg` と書けば、スマホでは小さい文字、768px以上では大きい文字になるよ。モバイルファーストの設計で、プレフィックスなしがベース、`md:` 以上で上書きする流れだね。

ダークモードにも対応できるの？最近はダークモード対応のサイトが多いよね！

`dark:` プレフィックスを使えば一発だよ。`bg-white dark:bg-gray-900 text-black dark:text-white` みたいに書くだけで、OSやブラウザのダークモード設定に応じてスタイルが切り替わるんだ。v4ではCSSの `@media (prefers-color-scheme: dark)` がデフォルトで使われるから、追加設定なしで動くよ。

色やフォントサイズを自分好みにカスタマイズしたい場合はどうするの？

v4からはCSSファイル内の `@theme` ディレクティブでカスタマイズできるようになったよ。たとえば `@theme` ブロック内で `--color-brand: #6366f1` と書けば `bg-brand` や `text-brand` がすぐ使えるんだ。v3までの `tailwind.config.js` も引き続きサポートされてるけど、CSS内で完結する `@theme` の方がシンプルだね。プラグインも `@plugin` ディレクティブでCSS内から読み込めるようになったよ。

v4って他にもv3から変わったところがあるの？

大きな変更点がいくつかあるよ。まず、ビルドエンジンがRustベースの「Oxide」に刷新されて、ビルド速度が最大10倍になったんだ。それに `@utility` ディレクティブでカスタムユーティリティを定義できたり、コンテナクエリの `@container` もネイティブサポートされたりしてる。あと地味に大きいのが、設定ファイルなしでCSS内にすべて書けるようになった点だね。

すごい進化してるんだね！でもクラス名を全部覚えるのは大変じゃないかな…？

全部覚える必要はないよ。VS Codeの拡張機能「Tailwind CSS IntelliSense」を入れれば、クラス名の自動補完とプレビューが出るから、書きながら覚えられるんだ。あと実は、TailwindのクラスはCSSプロパティとほぼ1対1で対応してるから、CSSを知ってる人ならすぐ慣れるよ。`font-bold` は `font-weight: bold`、`items-center` は `align-items: center` みたいにね。

プロの現場だと、他に知っておいた方がいいことってあるかな？

ベテラン向けの話をすると、v4のCSS変数ベースの設計は実行時にテーマを切り替えるSaaS系プロダクトと相性がいいんだ。`--color-primary` をJavaScriptで動的に変えれば、ユーザーごとにブランドカラーを変えるなんてことも簡単にできる。あとv4では、未使用クラスの除去がビルドツール側で自動的に行われるから、PurgeCSS的な設定を手動でやる必要がなくなったのも大きいポイントだね。

Tailwindをこれから始めるなら、どんな順番で勉強するのがおすすめ？

まずは公式ドキュメントの「Getting Started」を読みながら小さなコンポーネントを作ってみるのが一番だよ。ステップとしては、(1) spacing・color・typographyの基本クラスを覚える → (2) flexboxとgridでレイアウト → (3) レスポンシブとダークモード → (4) `@theme` でカスタマイズ → (5) コンポーネントライブラリの活用、という流れがおすすめだね。Tailwind UIやdaisyUIといったコンポーネント集も活用すると、実践的なパターンが身につくよ。

Mar 29, 2026

【2026年版】Tailwind CSSの始め方 — ユーティリティファーストで爆速スタイリング

Q: Tailwind CSSってよく聞くけど、普通のCSSと何が違うの？

Tailwind CSSは「ユーティリティファースト」という考え方のCSSフレームワークだよ。従来のCSSだと `.card-title` にスタイルを定義するけど、Tailwindでは `text-2xl text-blue-500` のように、あらかじめ用意された小さなクラスをHTMLに直接並べてスタイリングするんだ。

Tailwind CSS のユーティリティファーストの考え方

ひよこ

Tailwind CSSってよく聞くけど、普通のCSSと何が違うの？

ペンギン先生

Tailwind CSSは「ユーティリティファースト」という考え方のCSS フレームワークだよ。従来のCSSだと `.card-title` にスタイルを定義するけど、Tailwindでは `text-2xl text-blue-500` のように、あらかじめ用意された小さなクラスをHTMLに直接並べてスタイリングするんだ。

ひよこ

HTMLにクラスをたくさん書くってことは、HTMLがごちゃごちゃしないの？

ペンギン先生

最初はそう感じるかもしれないね。でも実際に使ってみると、CSSファイルを行ったり来たりしなくていいから開発スピードがすごく上がるんだよ。ReactやVueのコンポーネント単位で開発する今の時代には、HTMLとスタイルが同じ場所にある方がむしろ見通しがいいんだ。

ひよこ

なるほど！で、どうやってインストールするの？

ペンギン先生

一番おすすめはnpmでインストールする方法だよ。Tailwind CSS v4からはさらにシンプルになって、`npm install tailwindcss @tailwindcss/vite` して、Vite プラグインかPostCSSプラグインを設定するだけ。CSSファイルの先頭に `@import "tailwindcss"` と書けば準備完了だよ。お試しなら CDN版の `

【2026年版】Tailwind CSSの始め方 — ユーティリティファーストで爆速スタイリング

関連コラム