Tailwind CSS ベストプラクティス

フロントエンドアプリケーション向けのスタイリングパターンと規約です。レイアウトユーティリティ、アフォーダンス、カラースキーム、レスポンシブデザイン、className処理を網羅した10のルールが含まれています。

適用する場合

以下の場面で参照してください:

• Tailwindを使用したコンポーネントスタイリング
• レイアウト作成(スタック、グリッド、センタリング)
• レスポンシブデザインの実装
• カラースキームの操作
• classNameプロップのマージ

ルール一覧

レイアウトユーティリティ (重要)

layout-stack-utilities - @rules/layout-stack-utilities.md

flexクラスの代わりにカスタムスタックユーティリティを使用します。

// 悪い例
<div className="flex flex-col gap-4">
<div className="flex flex-row gap-4">

// 良い例
<div className="v-stack gap-4">
<div className="h-stack gap-4">

利用可能なユーティリティ:

• v-stack - 垂直スタック(flexコラム)
• h-stack - 水平スタック(flexロー)
• v-stack-reverse - 逆順の垂直スタック
• h-stack-reverse - 逆順の水平スタック
• z-stack - 重なるスタック(グリッドベース、子要素を互いに重ねてセンタリング)
• center - コンテンツを水平・垂直にセンタリング
• spacer - 利用可能なスペースを埋める柔軟なスペーサー
• circle - アスペクト比1/1の完全な円形

layout-prefer-gaps - @rules/layout-prefer-gaps.md

子要素のマージンの代わりに親要素にgap-*を使用します。

// 悪い例
<div>
  <Item className="mb-4" />
  <Item className="mb-4" />
</div>

// 良い例
<div className="flex flex-col gap-4">
  <Item />
  <Item />
</div>

layout-responsive-stacks - @rules/layout-responsive-stacks.md

ブレークポイントでレイアウト方向を切り替えます。

// モバイル: 垂直、デスクトップ: 水平
<div className="v-stack lg:h-stack gap-4">
  <main className="grow">...</main>
  <aside className="shrink-0 lg:w-80">...</aside>
</div>

// モバイル: 水平、デスクトップ: 垂直
<div className="h-stack md:v-stack">

カラースキーム (重要)

color-schemes - @rules/color-schemes.md

カスタムdarkバリアントを備えたクラスベースのカラースキームを使用します。

<button className="rounded-full bg-gray-900 px-4 py-2 text-white dark:bg-gray-100 dark:text-gray-900">
  Toggle
</button>

className処理 (重要)

classname-cn-utility - @rules/classname-cn-utility.md

コンポーネント内でclassNameをマージする際には常にcn()を使用します。

import { cn } from "~/lib/cn";

function Button({ className, variant }: Props) {
  return (
    <button
      className={cn(
        "base-classes",
        {
          "variant-primary": variant === "primary",
          "variant-secondary": variant === "secondary",
        },
        className, // 外部のclassNameは常に最後
      )}
    />
  );
}

classname-prop-types - @rules/classname-prop-types.md

classNameプロップに適切な型を使用します。

import type { ClassName, ClassNameRecord } from "~/lib/cn";

// 単一要素
type Props = {
  className?: ClassName;
};

// 複数要素
type Props = {
  className?: ClassNameRecord<"root" | "label" | "input">;
};

// 使用例
<Input className={{ root: "w-full", label: "font-bold" }} />;

アフォーダンス (高)

affordance-classes - @rules/affordance-classes.md

要素に依存しないビジュアルパターンを定義し、ユーティリティと組み合わせます。

<label className="ui-button" htmlFor="document-upload">
  Choose file
</label>

レスポンシブデザイン (中)

responsive-breakpoints - @rules/responsive-breakpoints.md

Tailwindのデフォルトと共にレスポンシブプレフィックスを使用します。

// 標準ブレークポイント (min-width)
<div className="px-4 md:px-8 lg:px-12">

// 標準ブレークポイントで表示/非表示を切り替え
<div className="hidden md:block">デスクトップのみ</div>
<div className="md:hidden">モバイルのみ</div>

responsive-text - @rules/responsive-text.md

テキストをレスポンシブにスケーリングします。

// レスポンシブなフォントサイズ
<h1 className="text-2xl md:text-3xl lg:text-4xl">

// テキストに合わせたレスポンシブ行の高さ
<p className="text-sm leading-5 md:text-base md:leading-6">

responsive-capabilities - @rules/responsive-capabilities.md

デバイスラベルではなく入力機能(ポインタ/ホバー)に基づいて設計します。

<button className="h-10 w-10 pointer-coarse:h-12 pointer-coarse:w-12">
  <Icon />
</button>

アンチパターン

しないこと	すること
flex flex-col	v-stack
flex flex-row	h-stack
flex items-center justify-center	center
bg-gray-100	bg-neutral-100
bg-[#hex]	デザイントークンを使用
cn()なしのclassName="..."	cn("...", className)
レスポンシブ用のインラインstyle	Tailwindプレフィックス

主要ファイル

ファイル	用途
tailwind.config.js	設定、カスタムユーティリティ、色
app/styles/global.css	カラースキームのCSS変数
app/styles/tailwind.css	追加ユーティリティ
app/utils/cn.ts	classNameマージユーティリティ