Tailwind CSSの始め方 — 買い物カードの色と余白を変えてみよう

ひよこ

買い物メモを青いカードにしたいんだけど、Tailwind CSSでできる？

ペンギン先生

できるよ。背景、余白、角丸などの小さなCSSクラスを組み合わせる。まず青いカードを作り、p-4をp-8に変えて、内側の余白の違いを見よう。

ひよこ

普通のCSSを書かなくていいの？

ペンギン先生

CSSがなくなるわけではないよ。クラスに対応するCSSをツールが生成し、ページへ読み込む。自分で命名したクラスと通常のCSSも、必要に応じて使える。

ひよこ

どうやって準備するの？

ペンギン先生

この練習はTailwind CSS v4とVite。新しいvanillaプロジェクトを作り、Viteプラグイン、CSSのimport、そのCSSを読むHTMLをそろえる。本文にファイルごとの例があるよ。

ひよこ

クラスを全部覚えないと使えない？

ペンギン先生

最初はbg-blue-500、text-white、p-4、rounded-lgの四つで十分。色や余白を一つずつ変えよう。設定したテーマによって値が変わるので、クラス名だけで固定の数値を決めつけない。

ひよこ

画面の幅に合わせて並べ方も変えたい！

ペンギン先生

grid-cols-1 md:grid-cols-2なら基本は一列、既定のmdの幅以上で二列になる。mdはスマホという機種名ではなく、幅の条件。既定では48remで、テーマで変更できるよ。

ひよこ

自分のブランドの色はどこに書くの？

ペンギン先生

v4ではCSSの@themeに--color-brandを定義するとbg-brandなどを使える。v3のtheme.extendの例とは分けて読む。旧JavaScript設定を使う場合は、v4では@configで明示的に読むよ。

ひよこ

クラスを書いても変わらないときは？

ペンギン先生

CSSの読み込みとViteプラグインを先に確認。次に、ソースに完全なクラス名があるかを調べる。文字列を途中から組み立てても検出できない場合がある。追加の場所を読むなら@sourceも確認しよう。

ひよこ

学習用のCDNを本番に使ってもいい？

ペンギン先生

Play CDNは試すための方法。公開用には導入案内のビルド方式を選ぶ。対応するブラウザーも確認して、まずHTML・CSSの基礎と小さなカードの変更から始めよう。

まず、青い買い物カードを作る

HTMLの基礎とNode.js・npmを用意します。現在のViteはNode.js 20.19以上または22.12以上を要求します。テンプレートの条件も確認してください。Tailwind CSS v4の新しい練習プロジェクトの例です。

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

vite.config.jsを作ります。既存のプロジェクトに入れる場合は、使っているプラグインを消さずに追加してください。

import { defineConfig } from 'vite';
import tailwindcss from '@tailwindcss/vite';
export default defineConfig({
  plugins: [tailwindcss()],
});

src/style.cssを次に置き換えます。

@import "tailwindcss";
@theme {
  --color-brand: #2563eb;
}

index.htmlを次に置き換えます。CSSを読む行も必要です。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport"
      content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/src/style.css">
    <title>買い物カード</title>
  </head>
  <body>
    <main class="p-4">
      <article class="bg-blue-500 text-white p-4 rounded-lg">
        <h1 class="text-xl font-bold">買い物メモ</h1>
        <p>りんごを二つ</p>
      </article>
    </main>
  </body>
</html>

npm run devを実行し、端末に出たURLを開きます。青い角丸カードと白い文字が出れば成功です。カードのp-4をp-8へ変え、次はbg-blue-500をbg-brandへ変えてみましょう。終わったら開発サーバーをCtrl+Cで止めます。

四つのクラスから覚える

クラスはCSSを使うための入口です。どの要素を並べるか、何を見出しにするか、色のコントラストは読みやすいかも考えます。クラスを増やすだけで使いやすい画面になるとは限りません。

二枚のカードを並べるなら

親をgrid grid-cols-1 md:grid-cols-2 gap-4にし、カードを二つ置いて画面幅を変えます。基本は一列、既定のmdは48rem以上で二列です。設定を変えていれば条件も変わります。

効かないときは、順に確認する

1. CSSをHTMLで読み込んでいるか。
2. Viteプラグインが設定され、開発サーバーを起動しているか。
3. 完全なクラス名がソースにあるか。例えばbg-と色名を連結するだけでは検出できない場合があります。
4. 対象ファイルが検出範囲に入るか。v4の@sourceとv3のcontent設定を混同しないようにします。

もう少し詳しく：v3の教材との違い

v4は@importとCSSの@themeから始められます。旧JavaScript設定は自動検出されず、必要なら@configで読み込みます。移行時はブラウザーの対応条件も確認します。Play CDNは開発・試用向けで、本番のビルドの代わりにはしません。

ペンギン先生のまとめ

「Tailwind CSS」って出てきたら「小さなスタイルのクラスを組み合わせて、画面を整える」と思えばだいたいOK！ まず色と余白を一つずつ変えると、役割を覚えやすいよ。

参考資料

• Tailwind：Viteへの導入 — プラグイン・CSSの読み込み
• Tailwind：テーマ — @themeとクラス生成
• Tailwind：レスポンシブ — 既定のmdとモバイルファースト
• Tailwind：ソース検出 — 動的文字列と@source
• Tailwind：移行ガイド — v3設定・対応条件
• Vite：導入 — Node要件とvanillaテンプレート
• Tailwind：Play CDN — 開発用途