Tailwind CSSカスタマイズ入門｜色・余白・フォントの設定方法

Tailwind
CSSのデフォルトカラーやスペーシング、そのまま使っていませんか。

プロジェクトにブランドカラーがあるのに bg-blue-500
で妥協している。セクション間の余白が微妙に足りないけど、近い値で我慢している。心当たりがあるなら、tailwind.config.js
を触るタイミングです。

数行の追記で、色も余白もフォントも自由に追加できます。この記事では、実務で使う4つのカスタマイズ（色・余白・フォント・ブレークポイント）を、コピペで動くコード付きで解説します。

Tailwind CSSの導入がまだの方は、先にTailwind
CSS入門ガイドを読んでおくとスムーズです。

tailwind.config.js
の基本構造

カスタマイズの鍵は theme
プロパティです。ここに2つの書き方があります。

// tailwind.config.js
module.exports = {
  theme: {
    // ① 直接書く → デフォルトを「すべて上書き」
    colors: {
      black: '#000',
      white: '#fff',
      brand: '#3b82f6',
    },

    // ② extend で書く → デフォルトを「残したまま追加」
    extend: {
      colors: {
        brand: '#3b82f6',
      },
    },
  },
}

theme.colors に直接書くと、Tailwindが持つ
red-500 も gray-100
も全部消えます。正直、初見でこれをやって画面が真っ白になったときは焦りました。

基本は extend を使ってください。
デフォルトを残したまま、自分のカスタム値を足せます。上書きが必要になるケースは、デザインシステムで使う色を厳格に制限したいときくらいです。

カラーのカスタマイズ

ブランドカラーを追加する

一番よくあるユースケースです。自社やプロジェクトのブランドカラーを
extend.colors に追加します。

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: '#0f62fe',
        accent: '#ff6b35',
        surface: '#f8f9fa',
      },
    },
  },
}

これで
bg-brand、text-accent、bg-surface
がクラスとして使えるようになります。

<button class="bg-brand text-white px-4 py-2 rounded hover:bg-brand/80">
  申し込む
</button>

bg-brand/80
のように不透明度修飾子もそのまま使えます。追加設定は不要です。

濃淡バリエーション（100〜900）を定義する

ボタンのhover、背景、テキスト。同系色の濃淡を使い分けたい場面は多いです。オブジェクトで定義します。

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50:  '#eff6ff',
          100: '#dbeafe',
          200: '#bfdbfe',
          300: '#93c5fd',
          400: '#60a5fa',
          500: '#0f62fe', // メインカラー
          600: '#0d56de',
          700: '#0a3fb0',
          800: '#083083',
          900: '#052055',
        },
      },
    },
  },
}

bg-brand-100、text-brand-700、border-brand-300
のように使えます。Tailwind
CSSで文字をデザインする方法と組み合わせれば、テキスト装飾にもブランドカラーを統一できます。

一度定義すると、プロジェクト全体で「この色、何のHEXだっけ」と迷わなくなります。地味ですが、開発速度への影響は大きいです。

デフォルトカラーを上書きする場合の注意

extend ではなく theme.colors
に直接書くと、デフォルトの全カラーが消えます。

// ⚠️ デフォルトカラーが全て消える
module.exports = {
  theme: {
    colors: {
      brand: '#0f62fe',
      gray: {
        100: '#f3f4f6',
        900: '#111827',
      },
    },
    // red, blue, green... 全て使えなくなる
  },
}

デザインシステムで使える色を限定したい場合には有効ですが、意図せずやると
text-red-500 や bg-blue-200
が効かなくなります。チームで使う場合は extend
が安全です。

スペーシングのカスタマイズ

カスタム余白を追加する

デフォルトの余白（p-4 = 1rem、p-8 =
2rem）で足りないケースは意外と多いです。セクション間の大きめ余白や、微調整用の小さい値を追加できます。

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      spacing: {
        '13': '3.25rem',
        '15': '3.75rem',
        '18': '4.5rem',
        '22': '5.5rem',
        '30': '7.5rem',
        '128': '32rem',
      },
    },
  },
}

spacing
に追加した値は、p-（padding）、m-（margin）、w-（width）、h-（height）、gap-
など全てのスペーシング系ユーティリティで使えます。

<!-- セクション間の大きめ余白 -->
<section class="py-30">...</section>

<!-- 微調整 -->
<div class="mt-13">...</div>

<!-- 幅の指定にも使える -->
<aside class="w-128">...</aside>

ぶっちゃけ、py-30
のようなセクション間余白を追加するだけで、ページの印象がかなり変わります。デフォルトの
py-24（6rem）と
py-30（7.5rem）、たった1.5remの差ですが体感は大きいです。

フォントのカスタマイズ

fontFamily: Google Fonts
を追加する

fontFamily を拡張して、Google Fonts
やカスタムフォントを追加できます。

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        display: ['"Noto Sans JP"', 'sans-serif'],
        body: ['"Inter"', '"Noto Sans JP"', 'sans-serif'],
        mono: ['"JetBrains Mono"', 'monospace'],
      },
    },
  },
}

HTML側で Google Fonts の読み込みも忘れずに。

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">

使い方はシンプルです。

<h1 class="font-display text-4xl font-bold">見出しテキスト</h1>
<p class="font-body">本文テキスト</p>
<code class="font-mono">const x = 42;</code>

font-display と font-body
を分けておくと、あとからフォントを差し替えるときに設定ファイル1箇所の変更で済みます。これはやっておいて損はないです。

fontSize:
カスタムサイズを定義する

デフォルトの text-sm〜text-9xl
で足りない場合、行間（line-height）とセットで定義できます。

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontSize: {
        'hero': ['4.5rem', { lineHeight: '1.1', letterSpacing: '-0.02em' }],
        'caption': ['0.7rem', { lineHeight: '1.4' }],
      },
    },
  },
}

<h1 class="text-hero font-bold">ヒーローセクション</h1>
<span class="text-caption text-gray-500">撮影: 2026年2月</span>

フォント周りの詳しいTailwindクラスは、Tailwind
CSSで文字をデザインする方法でまとめています。

ブレークポイントのカスタマイズ

デフォルトのブレークポイント（sm: 640px、md:
768px…）が合わないプロジェクトでは、screens
で変更できます。

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      'sm': '480px',
      'md': '768px',
      'lg': '1024px',
      'xl': '1280px',
    },
  },
}

注意点が1つ。screens は extend
ではなく直接上書きで使うことが多いです。extend.screens
で追加すると、デフォルトの sm: 640px と自分の
sm: 480px が衝突して予測できない動きになります。

独自のブレークポイント名を追加するなら extend
が使えます。

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      screens: {
        'xs': '375px',     // iPhone SE
        '3xl': '1920px',   // フルHDモニター
      },
    },
  },
}

ブレークポイントを使ったレスポンシブ対応の実装パターンは、Tailwind
CSSレスポンシブ実装ガイドで詳しく解説しています。

プラグインの活用（3選）

Tailwindは公式プラグインで機能を拡張できます。実務でよく使う3つを紹介します。

@tailwindcss/typography

Markdownやリッチテキストのスタイリング用。ブログやドキュメントサイトにはほぼ必須です。

npm install @tailwindcss/typography

// tailwind.config.js
module.exports = {
  plugins: [
    require('@tailwindcss/typography'),
  ],
}

<article class="prose lg:prose-xl">
  <h2>自動でスタイルが当たる</h2>
  <p>prose クラスを付けるだけで、h2, p, ul, code に適切なスタイルが適用されます。</p>
</article>

prose
クラス1つで、見出し・段落・リスト・コードブロックに読みやすいスタイルが当たります。自分でリセットCSSと戦う必要がなくなります。

@tailwindcss/forms

フォーム要素にベーススタイルを適用します。ブラウザデフォルトの見た目をリセットして、Tailwindのユーティリティクラスでスタイリングしやすくなります。

npm install @tailwindcss/forms

// tailwind.config.js
module.exports = {
  plugins: [
    require('@tailwindcss/forms'),
  ],
}

<input type="email" class="rounded-md border-gray-300 focus:border-brand-500 focus:ring-brand-500">

@tailwindcss/container-queries

メディアクエリではなく、親要素の幅に基づいてスタイルを切り替えるコンテナクエリに対応します。

npm install @tailwindcss/container-queries

// tailwind.config.js
module.exports = {
  plugins: [
    require('@tailwindcss/container-queries'),
  ],
}

<div class="@container">
  <div class="@lg:flex @lg:gap-4">
    <!-- 親コンテナが lg サイズ以上のときに flex レイアウト -->
    <div>サイドバー</div>
    <div>メインコンテンツ</div>
  </div>
</div>

ウィジェットやカードコンポーネントなど、配置場所によってレイアウトを変えたい場面で重宝します。コンポーネント指向のUI設計と相性が良いので、Tailwind
CSSで再利用できるUIもあわせて読んでみてください。

Tailwind v4
での変更点（2026年）

Tailwind CSS
v4では設定の仕組みが大きく変わりました。ここまで解説してきた
tailwind.config.js に代わり、CSS
ファイル内で直接設定を書く「CSS-first configuration」
が標準になっています。

v3までの書き方と比較すると、変化の大きさがわかります。

/* app.css — v4 の設定方法 */
@import "tailwindcss";

@theme {
  --color-brand: #0f62fe;
  --color-accent: #ff6b35;
  --spacing-30: 7.5rem;
  --font-family-display: "Noto Sans JP", sans-serif;
}

JavaScriptの設定ファイルではなく、CSSカスタムプロパティとして定義する形です。エディタの補完も効きやすく、CSSに慣れている人にはむしろ直感的かもしれません。

従来の tailwind.config.js も @config
ディレクティブで読み込めるため、既存プロジェクトの移行は段階的に進められます。「今すぐ全部書き換え」ではなく、新規プロジェクトからv4形式に慣れていくのが現実的です。v4への移行を検討している方は、公式の移行ガイドを確認してください。

まとめ

カスタマイズのポイントを整理します。

基本は extend
でデフォルトを残しつつ追加。これだけ覚えておけば安全です。

Tailwind CSSの基本クラスの使い方やスタイル応用編もあわせて読むと、カスタマイズした値をどう活用するかのイメージが広がります。

参考になれば幸いです。

この記事は「Tailwind CSS完全ガイド」シリーズの一部です。 → シリーズ全体を見る：Tailwind
CSS完全ガイド