CSS/スタイリング 2026年4月16日

Tailwind CSS 入門 2026｜Next.jsプロジェクトにゼロから導入する3ステップガイド

「クラス名が汚くなる」という不安を持ちながら3年使い続けた現役フリーランスエンジニアがTailwind CSS導入手順・基本クラス・実践的な使い方を正直解説。Next.js v4設定対応・コードあり2026年最新版。

Tailwind CSSNext.jsReactCSSフロントエンド入門

※当サイトはアフィリエイトプログラムに参加しています。記事内のリンクから商品を購入すると、当サイトに報酬が支払われることがあります。詳しくはプライバシーポリシーをご覧ください。

はじめに：「クラス名が汚くなる」は本当か

3月の終わりに、チームの新人エンジニアから「Tailwindって使った方がいいですか？クラス名が長くなって汚くないですか？」と聞かれました。

正直に言います。その感覚、最初は僕も同じでした。

3年前、初めてTailwind CSSを導入したプロジェクトで、コードを見たとき「これ、後で誰かが読めるのか？」と思った記憶があります。className="flex items-center justify-between px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700" みたいなコードを見て、「普通にCSSで書いた方が綺麗じゃないか」と。

結論から言うと、3年使い続けた今、Tailwindなしには戻れません。

ただ、「クラス名が長くなる」という批判は今でも半分は正しいと思っています。残り半分は、慣れたら消えました。使い始めて半年くらいで「あ、これが当たり前のコードなんだ」に変わっています。

というわけで、今回は「Tailwind CSS を Next.js プロジェクトにゼロから導入する方法」を、実際の手順とリアルな感想を交えて解説します。コードのないTailwind記事は意味がないので、全部動くコードで説明します。

Tailwind CSSとNext.jsの開発画面

ステップ1：インストールと初期設定（15〜30分で完了）

新規プロジェクトの場合

2026年現在、Next.js 15 の create-next-app を使うと最初から Tailwind CSS を選べます。

npx create-next-app@latest my-app

対話形式で聞かれる質問の中に Would you like to use Tailwind CSS? があるので Yes を選ぶだけです。これが一番手っ取り早い。

既存プロジェクトに追加する場合

npm install -D tailwindcss @tailwindcss/postcss postcss

次に postcss.config.mjs を作成します。

const config = {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

export default config;

最後に、グローバルCSSファイル（app/globals.css や src/styles/globals.css）の先頭に追記します。

@import "tailwindcss";

以上で設定は完了です。

ここがポイントなんですが、Tailwind v4からこの新しい設定方法に変わりました。 v3のセットアップ方法を検索でコピーすると動かない可能性があるので注意してください。

（正直、これで1時間詰まりました。検索上位にv3の情報が多く残っていて、tailwind.config.js を作ったり @tailwind base; を書いたりしていたのですが、v4では完全に別物です）

VS Code拡張機能を入れる（実質必須）

Tailwind CSS IntelliSense という拡張機能を必ず入れてください。クラス名の自動補完、ホバーで実際に当たるCSSの確認ができます。これなしだと開発効率が半分以下になります。

VS Code 拡張機能の全体的な設定については VSCodeおすすめ拡張機能2026 に詳しくまとめています。Tailwind IntelliSense 以外のフロントエンド必須ツールも確認できるので合わせて読んでみてください。

ステップ2：基本的なクラスを使う（1〜2日で慣れる）

Tailwindは「CSSのプロパティと値をクラス名に対応させる」考え方です。最初は「このCSSどうやって書くんだっけ？」と検索しながらになりますが、1週間もすれば主要なクラスが頭に入ります。

よく使うクラス対応表

CSS	Tailwind	意味
`display: flex`	`flex`	フレックスコンテナ
`justify-content: center`	`justify-center`	主軸方向に中央揃え
`align-items: center`	`items-center`	交差軸方向に中央揃え
`padding: 16px`	`p-4`	全方向のパディング
`margin-top: 8px`	`mt-2`	上マージン
`font-weight: bold`	`font-bold`	太字
`color: white`	`text-white`	文字色：白
`background-color: #3b82f6`	`bg-blue-500`	背景色：青

数値のルールを覚えると楽になります。p-4 は padding: 16px（4 × 4px = 16px）、mt-2 は margin-top: 8px（2 × 4px）です。1単位 = 4px という換算です。

実際のボタンコンポーネントで比較

// 従来のCSSモジュールで書いた場合
import styles from './Button.module.css';

<button className={styles.primaryButton}>
  送信する
</button>

/* Button.module.css */
.primaryButton {
  background-color: #2563eb;
  color: white;
  padding: 8px 24px;
  border-radius: 8px;
  transition: background-color 0.15s;
}
.primaryButton:hover {
  background-color: #1d4ed8;
}

// Tailwindで書いた場合
<button className="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition-colors">
  送信する
</button>

「確かにクラス名は長い」というのはその通りです。でもここがポイントなんですが、CSSファイルを一切見に行かなくていいことになります。ボタンのスタイルを変えたいとき、そのコンポーネントのコードだけを見れば全部わかります。

FlexboxやGridの書き方との比較は CSS FlexboxとGridガイドも参考になります。

ステップ3：実際のUIコンポーネントに組み込む

カードコンポーネントの例

type CardProps = {
  title: string;
  description: string;
  imageUrl: string;
};

export function Card({ title, description, imageUrl }: CardProps) {
  return (
    <div className="rounded-xl overflow-hidden shadow-md hover:shadow-lg transition-shadow duration-200">
      <img
        src={imageUrl}
        alt={title}
        className="w-full h-48 object-cover"
      />
      <div className="p-4">
        <h2 className="text-xl font-bold text-gray-800 mb-2">{title}</h2>
        <p className="text-gray-600 text-sm leading-relaxed">{description}</p>
      </div>
    </div>
  );
}

プログラミング的に言うなら、スタイルとロジックが同じファイルに共存することで、コンポーネントの移動・削除が安全になります。 外部CSSを消し忘れて孤立したスタイルが残る、という問題がほぼなくなりました。

レスポンシブ対応

Tailwind はモバイルファースト設計です。

{/* モバイル: 縦1列、タブレット: 横2列、PC: 横3列 */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <Card ... />
  <Card ... />
  <Card ... />
</div>

md: プレフィックスがタブレット以上（768px〜）、lg: がPC以上（1024px〜）に適用されます。メディアクエリを別途書かなくてよくなるのが地味に快適です。

正直に言う：僕が詰まったポイント2つ

コードデバッグの作業風景

詰まり1：クラス名の動的生成は危険

Tailwindはビルド時にクラス名を解析して、使われているクラスだけを含めます。そのため、文字列で動的にクラス名を組み立てると本番ビルドでスタイルが消えることがあります。

// NG：開発環境では動くが本番で消える場合がある
const color = 'red';
<p className={`text-${color}-500`}>エラーです</p>

// OK：完全なクラス名を使う
const colorClass = isError ? 'text-red-500' : 'text-green-500';
<p className={colorClass}>メッセージ</p>

これ、1度は全員ハマります。開発環境では動くのに本番だけスタイルが効かない、というパターンです。

ちょっと話が逸れますが、このビルド時の最適化こそがTailwindの特徴でもあります。使われたクラスだけがCSSに含まれるので、最終的なCSSファイルが非常に小さくなります。

詰まり2：既存プロジェクトへの途中導入は計画的に

新規プロジェクトならいいですが、既存プロジェクトに途中から導入すると「このスタイルどこで定義されてるんだっけ？」という混乱が生まれます。

僕の場合、GW前の3日間を使って既存プロジェクトの全スタイルをTailwindに移行しました。正直しんどかった。でも移行後のCSSファイルの量が7〜8割減り、その後の開発速度は体感で上がっています。

一気に移行しようとせず、新規のコンポーネントから順番にTailwindで書くという段階的なアプローチがおすすめです。

Tailwindを使うべき人、そうでない人

向いているケース：

React/Next.js でコンポーネントベースの開発をする
UIの変更頻度が高く、CSSファイルの管理コストを下げたい
スタイルとコンポーネントを同じファイルに共存させたい
チームでスタイルのレビュー負荷を減らしたい

向いていないケース：

従来のHTMLとCSSで構成されたWebサイト（WordPressのテーマ開発など）
デザイナーとの分業でCSSファイルを渡す必要がある場合
チームメンバーのCSSスキルが高く、移行コストが見合わない場合

どちらにしても、一度手を動かさないと判断できない技術です。 Next.jsのサンプルプロジェクトで1週間使ってみて、そこから判断するのが一番おすすめです。

快適な開発環境

ポートフォリオ制作でTailwindを試したいならエンジニア転職に効くポートフォリオの作り方も参考になります。React と Next.js どちらを選ぶかについては Next.js vs React CRA 2026年比較にまとめています。

よくある質問

Q: TailwindはBootstrapと何が違うの？

A: Bootstrapは「ボタン」「カード」「ナビゲーション」などUIコンポーネントがあらかじめ定義されていて、クラスを当てればそのままデザインが出る「UIフレームワーク」です。TailwindはCSSプロパティをクラスで表現する「ユーティリティファースト」のアプローチで、デザインを一から自分で組み立てます。自由度が高い代わりに学習コストはかかります。Bootstrapは「最初から形が決まっているもの」、Tailwindは「素材を組み合わせる」というイメージです。

Q: Tailwindを使うとHTML/CSSが学べなくなる？

A: 基礎のHTML/CSSは先に学んでおくべきです。px-4 が padding: 16px に対応していることを理解できないと、思うようにスタイルが組めません。まずHTML/CSSの基礎を学んでからTailwindに移行するルートがおすすめです。HTML/CSS独学1ヶ月完全ガイドから始めるのが王道です。

Q: Tailwind v3とv4、どちらを使えばいい？

A: 新規プロジェクトは v4 一択です。設定が大幅に簡略化され、@import "tailwindcss" 一行で導入できます。既存のv3プロジェクトは無理に移行する必要はありませんが、移行ガイドに沿って進めれば大きなハマりポイントはありません。

Q: JavaScriptの基礎知識がないとTailwindは使えない？

A: Tailwind CSS 自体は純粋なCSS技術なので、HTML/CSSがわかれば使えます。ただしReact/Next.jsと組み合わせる場合はJavaScript/TypeScriptの知識が必要になります。JavaScript入門ガイドでJSの基礎を固めてから取り組むのがおすすめです。

Q: Tailwind CSS IntelliSenseが機能しない場合は？

A: まずVS Codeを再起動してみてください。それでも動かない場合、プロジェクトのルートに tailwind.config.js または CSS に @import "tailwindcss" が含まれているかを確認してください。v4 の場合は設定ファイルがなくても動くはずですが、拡張機能がまだv4の構成を完全には認識できていない場合があります。

【2026年4月追記】Tailwind CSS v4 が2026年初頭に正式リリースされ、セットアップ方法が大きく変わりました。この記事はv4の設定手順で書いています。検索上位にv3の情報が多く残っているので、設定コードをコピーする際はバージョンを必ず確認してください。また、Tailwind をベースにしたUIコンポーネントライブラリの shadcn/ui が現場での採用率が急上昇しています。Tailwindの基本を習得したら次の選択肢として調べてみてください。