Tailwind CSS の基本と className が長くなるときの対処法

🎨 Tailwind CSS でよく使う基本クラス

Tailwind CSS はユーティリティファーストの CSS フレームワークで、以下のようなクラスを基本的に使用します。

1. レイアウト関連

• Flexbox & Grid

  flex, flex-row, flex-col, justify-center, items-center
  grid, grid-cols-3, gap-4
  

• 幅と高さ

  w-1/2, h-64, max-w-screen-lg, min-h-screen
  

• 余白 (Margin & Padding)

  m-4, mx-auto, p-2, py-6
  

2. 色と背景

• テキストカラー

  text-gray-700, text-blue-500, text-white
  

• 背景色

  bg-gray-100, bg-blue-600, bg-gradient-to-r
  

• ボーダーとシャドウ

  border, border-gray-300, shadow-lg, rounded-lg
  

3. トランジションとホバー

• アニメーション効果

  transition, duration-300, ease-in-out
  

• ホバー時のエフェクト

  hover:bg-blue-700, hover:shadow-xl
  

📝 className が長くなるときの対処法

Tailwind は便利ですが、クラスが増えると className が長くなり、可読性が低下します。そこで、整理する方法を紹介します。

✅ 1. clsx や classnames を使う（推奨）

インストール

npm install clsx
# または
npm install classnames

使用例（clsx）

import clsx from "clsx";

const buttonClass = clsx(
  "px-4 py-2 rounded-lg transition duration-300",
  "bg-blue-500 text-white hover:bg-blue-700",
  "disabled:bg-gray-400"
);

<button className={buttonClass}>Click Me</button>;

classnames を使う場合

import classNames from "classnames";

const buttonClass = classNames(
  "px-4 py-2 rounded-lg transition duration-300",
  "bg-blue-500 text-white hover:bg-blue-700",
  { "disabled:bg-gray-400": true }
);

<button className={buttonClass}>Click Me</button>;

✅ 2. Tailwind の @apply を使う

CSS ファイルに定義

/* styles/globals.css */
.btn-primary {
  @apply px-4 py-2 bg-blue-500 text-white rounded-lg transition duration-300 hover:bg-blue-700;
}

コンポーネントで使用

<button className="btn-primary">Click Me</button>

✅ 3. const にクラスを格納

const buttonStyles =
  "px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-700 transition duration-300";

<button className={buttonStyles}>Click Me</button>;

✅ 4. variants パターン（ユーティリティ関数）

const buttonClass = (type: "primary" | "secondary") =>
  clsx(
    "px-4 py-2 rounded-lg transition duration-300",
    type === "primary"
      ? "bg-blue-500 text-white hover:bg-blue-700"
      : "bg-gray-300 text-black hover:bg-gray-400"
  );

<button className={buttonClass("primary")}>Primary</button>;
<button className={buttonClass("secondary")}>Secondary</button>;

まとめ

方法	使いやすさ	メリット
clsx / classnames	⭐⭐⭐	条件付きクラス適用、可読性向上
@apply	⭐⭐⭐	スタイルの再利用
const に格納	⭐⭐	シンプルで管理しやすい
variants 関数	⭐⭐⭐	柔軟にカスタマイズ可能

おすすめの方法

• 条件付きクラス → clsx or classnames
• 再利用を考える → @apply
• シンプルに整理 → const に格納
• 柔軟にカスタマイズ → 関数 (variants パターン)

Tailwind を活かしつつ、可読性を上げる方法を選んで使おう！🚀