Tailwind CSS v4入門 - Viteでレスポンシブカードを作る

入門 | 15分 で読める | 2024.12.18

公式ドキュメント
CSSTailwind

今回やること

Tailwind CSSは、flexやp-6のような小さなクラスをHTMLに組み合わせて見た目を作るCSSフレームワークです。

この記事では、Tailwind CSS v4をViteへ導入し、次のカードを1つ作ります。

  • スマートフォンでは縦に並ぶ
  • 幅768px以上では横に並ぶ
  • リンクをマウスとキーボードの両方で操作できる

クラスの暗記ではなく、導入からレスポンシブ表示の確認までをゴールにします。

接頭辞なしの基本クラスは全幅で適用され、標準設定では768px以上になるとmd:flexが加わり、縦並びから横並びへ変わる図

前提条件

  • Node.js 24 LTSとnpmが使える（推奨）
  • HTMLとCSSの基本を知っている

この記事で使うVite 8の最低要件は、Node.js 20.19以上または22.12以上です。初学者は、サポート期間の長いNode.js 24 LTSを使うと版の違いで迷いにくくなります。

ターミナルで次を実行し、バージョン番号が表示されることを確認してください。

node --version
npm --version

1. Viteプロジェクトを作る

npm create vite@latest tailwind-card -- --template vanilla
cd tailwind-card
npm install

tailwind-cardフォルダーへ移動してから、Tailwind CSS v4とVite用プラグインを追加します。

npm install tailwindcss @tailwindcss/vite

2. Tailwind CSSをViteへ接続する

プロジェクト直下にvite.config.jsを作ります。

import { defineConfig } from "vite";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  plugins: [tailwindcss()],
});

src/style.cssは、次の1行に置き換えます。

@import "tailwindcss";

これはTailwind CSS v4の書き方です。古い記事にあるnpx tailwindcss init、tailwind.config.js、@tailwind baseは、今回のVite構成には必要ありません。

3. レスポンシブカードを作る

index.htmlを次の内容に置き換えます。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>レスポンシブカード</title>
    <link rel="stylesheet" href="/src/style.css" />
  </head>
  <body class="min-h-screen bg-slate-100 p-6 text-slate-900">
    <main class="mx-auto max-w-3xl">
      <article
        class="overflow-hidden rounded-2xl bg-white shadow-md md:flex"
      >
        <div
          class="flex min-h-44 items-center justify-center bg-indigo-600 p-8 text-6xl md:w-2/5"
          aria-hidden="true"
        >
          💻
        </div>

        <div class="p-6 md:w-3/5 md:p-8">
          <p class="text-sm font-semibold text-indigo-700">Ada IT塾</p>
          <h1 class="mt-2 text-2xl font-bold">最初のTailwindカード</h1>
          <p class="mt-3 leading-7 text-slate-600">
            画面幅を変えると、カードの並び方が変わります。
          </p>
          <a
            href="#details"
            class="mt-6 inline-block rounded-lg bg-indigo-600 px-4 py-2 font-semibold text-white hover:bg-indigo-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-700"
          >
            詳細を見る
          </a>
        </div>
      </article>

      <p id="details" class="mt-6 text-sm text-slate-600">
        <code>md:flex</code>により、幅768px以上で横並びになります。
      </p>
    </main>
  </body>
</html>

主なクラスの役割は次のとおりです。

クラス役割
md:flex幅768px以上で子要素を横に並べる
md:w-2/5幅768px以上で左側を40%にする
rounded-2xl角を丸くする
p-6内側に余白を付ける
hover:bg-indigo-700マウスを重ねた時に背景色を変える
focus-visible:*キーボード操作時にフォーカスを見せる

md:が付いていないクラスは小さい画面から適用されます。これをモバイルファーストと呼びます。

成功確認

開発サーバーを起動します。

npm run dev

ターミナルに表示されたURLをブラウザで開き、次の3点を確認してください。

  1. 狭い画面では絵文字部分と文章が縦に並ぶ
  2. ブラウザ幅を768px以上にすると横に並ぶ
  3. Tabキーで「詳細を見る」へ移動すると枠が表示される

ここまで確認できれば成功です。

よくあるつまずき

プロジェクト作成直後にNode.jsのバージョンエラーが出る

Vite 8はNode.js 20.19以上または22.12以上を必要とします。Node.js 18や20.18以前では、npm create vite@latestまたはnpm run devが失敗します。

node --version

古い場合はNode.js 24 LTSへ更新し、ターミナルを開き直してからプロジェクトを作り直してください。

装飾がまったく反映されない

  • vite.config.jsでtailwindcss()をpluginsへ追加したか
  • src/style.cssに@import "tailwindcss";を書いたか
  • index.htmlから/src/style.cssを読み込んでいるか
  • 設定変更後に開発サーバーを再起動したか

Cannot find package '@tailwindcss/vite'と表示される

現在地を確認してから、依存パッケージを入れ直します。

pwd
npm install
npm install tailwindcss @tailwindcss/vite

Windows PowerShellでは、現在地の確認にGet-Locationを使えます。

md:flexが反映されない

md:は「タブレット専用」ではなく、画面幅が768px以上の時に適用される条件です。開発者ツールで表示幅を確認してください。

練習

次の変更を1つずつ試してください。

  1. bg-indigo-600をbg-emerald-600へ変える
  2. md:flexをlg:flexへ変え、切り替わる幅の違いを見る
  3. 見出しの下に日付を追加し、text-sm text-slate-500を付ける

変更するたびにブラウザを確認し、どのクラスがどの見た目を担当したか説明してみましょう。

次のステップ

次は、同じカードを3枚並べてgridとmd:grid-cols-3を試すと、レスポンシブレイアウトへの理解が深まります。Tailwind CSSの更新情報はNews記事、コンポーネント設計は別のPractice記事で扱います。

参考リソース

おすすめ記事

← 一覧に戻る
PR
PR
PR
PR