setup-tailwind-typescript

name	setup-tailwind-typescript
description	Next.jsまたはReactプロジェクトでTailwind CSSとTypeScriptを設定します。 インストール、設定、カスタムテーマの拡張、コンポーネントパターン、 型安全なスタイリングユーティリティを扱います。既存のTypeScriptプロジェクトに Tailwind CSSを追加するとき、プロジェクトのデザインシステム向けにTailwind テーマをカスタマイズするとき、型安全なコンポーネントスタイリングパターンを セットアップするとき、またはTailwindプラグインや拡張機能を設定するときに使用します。
locale	ja
source_locale	en
source_commit	6f65f316
translator	claude-opus-4-6
translation_date	2026-03-16T00:00:00.000Z
license	MIT
allowed-tools	Read Write Edit Bash Grep Glob
metadata	{"author":"Philipp Thoss","version":"1.0","domain":"web-dev","complexity":"basic","language":"TypeScript","tags":"tailwind, typescript, css, styling, configuration"}

TypeScriptでTailwind CSSをセットアップ

カスタムテーマ、ユーティリティ、型安全なパターンを持つTypeScriptプロジェクトにTailwind CSSを設定します。

使用タイミング

• 既存のTypeScriptプロジェクトにTailwind CSSを追加するとき
• プロジェクトのデザインシステム向けにTailwindテーマをカスタマイズするとき
• 型安全なコンポーネントスタイリングパターンをセットアップするとき
• Tailwindプラグインや拡張機能を設定するとき

入力

• 必須: TypeScriptプロジェクト（Next.js、Vite、またはスタンドアロンReact）
• オプション: デザインシステムトークン（色、スペーシング、フォント）
• オプション: 含めるTailwindプラグイン

手順

ステップ1: Tailwind CSSのインストール

npm install -D tailwindcss @tailwindcss/postcss postcss

Next.jsの場合（まだ含まれていない場合）：

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

期待結果： tailwindcss、postcss、autoprefixerが開発依存関係としてインストールされます。Next.jsの場合、npx tailwindcss init -pによりtailwind.config.tsとpostcss.config.jsが生成されます。

失敗時： npx tailwindcss initが失敗する場合は、まずnpm install -D tailwindcssでTailwindをインストールして再試行してください。モノリポを使用している場合は、ワークスペースのルートではなくアプリのルートディレクトリからコマンドを実行してください。

ステップ2: tailwind.config.tsの設定

import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      colors: {
        primary: {
          50: "#eff6ff",
          100: "#dbeafe",
          500: ,
          : ,
          : ,
          : ,
        },
        : {
          : ,
          : ,
        },
      },
      : {
        : [, , ],
        : [, ],
      },
      : {
        : ,
        : ,
      },
    },
  },
  : [],
};

  config;