TailwindCSSのカスタマイズをClaudeに任せる

TailwindCSSは柔軟なカスタマイズが魅力ですが、tailwind.config.jsの設定やデザイントークンの整理は意外と手間がかかりますよね。Claude Codeを活用すれば、こうした作業をスムーズに進められます。

Tailwind設定のカスタマイズをClaudeに依頼する

まずはプロジェクトのデザイン要件をそのまま伝えてみましょう。たとえば次のように入力します。

ブランドカラーは #3B5BDB（プライマリ）と #F03E3E（アクセント）です。
フォントは Inter をベースに、見出し用に Poppins を使います。
spacing のベース単位は 4px にしたいです。
この要件で tailwind.config.js を生成してください。

すると Claude は以下のような設定ファイルを生成してくれます。

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#3B5BDB',
        accent: '#F03E3E',
      },
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
        heading: ['Poppins', 'sans-serif'],
      },
      spacing: {
        base: '4px',
      },
    },
  },
};

「なぜこの構造にしたか」も説明してくれるので、設定の意図を理解しながら進められます。

コンポーネント設計をペアで進める

デザイントークンが固まったら、UIコンポーネントの設計に移りましょう。Claudeには既存のコードを貼り付けて改善を依頼するのが効果的です。

以下のボタンコンポーネントを、先ほどのデザイントークンを使って
バリアント（primary / secondary / danger）対応にリファクタしてください。
また @apply を使ったクラス抽出も提案してください。

このように「既存コード＋具体的な要求」をセットで渡すと、Claudeはプロジェクトのコンテキストを踏まえた提案を返してくれます。バリアントの分岐ロジックやアクセシビリティ属性まで含めてくれることも多いです。

※コンテキスト: Claudeが一度に記憶・参照できる会話・コードの範囲。上限を超えると古い情報が失われる。※トークン: AIがテキストを処理する最小単位。日本語は1文字あたり約1〜2トークン。使用量に応じてAPIコストが変わる。

デザインシステムのドキュメントも自動生成

コンポーネントが揃ってきたら、デザインシステムのドキュメント化もClaudeに頼めます。

src/components 配下のコンポーネントを確認して、
各コンポーネントのProps一覧・使用例・デザイントークンとの対応表を
Markdown形式でまとめてください。

Storybook用のストーリーファイルの雛形生成も得意なので、「Storybook形式で書いて」と一言加えるだけで対応してくれます。設計・実装・ドキュメントを一気通貫でClaudeと進めると、デザインシステムの構築コストを大幅に削減できますよ。