Tailwind CSS 設定および初期化

18.1.1. 依存関係のインストール

プロジェクトに Tailwind CSS v3 を導入するには、以下のパッケージをインストールしなければなりません。

npm install -D tailwindcss@3 postcss autoprefixer
npx tailwindcss init -p --ts

package.json の devDependencies に以下の項目が含まれていなければなりません。

{
  "devDependencies": {
    "tailwindcss": "^3.4.0",
    "postcss": "^8.4.0",
    "autoprefixer": "^10.4.0"
  }
}

• tailwindcss は必ず 3.x バージョンを使用しなければなりません。
• postcss と autoprefixer は Tailwind CSS の必須の付随依存関係です。
• --ts フラグを使用して TypeScript ベースの設定ファイルを生成します。

---

18.1.2. tailwind.config.ts

tailwind.config.ts ファイルはプロジェクトルートに配置しなければなりません。

import type { Config } from 'tailwindcss'

export default {
  content: [
    './index.html',
    './src/**/*.{vue,ts,tsx,js,jsx}',
  ],
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#f0f5ff',
          100: '#e0ebff',
          500: '#3b82f6',
          600: '#2563eb',
          700: '#1d4ed8',
        },
      },
      fontFamily: {
        sans: ['Pretendard', 'sans-serif'],
        mono: ['JetBrains Mono', 'monospace'],
      },
      spacing: {
        '4.5': '1.125rem',
        '18': '4.5rem',
      },
    },
  },
  plugins: [],
} satisfies Config

項目	設定原則
content	Vue ファイルと TypeScript ファイルの両方を含めなければなりません
theme.extend	デフォルトテーマを維持しながらプロジェクト固有の値を拡張します
theme 直接修正	デフォルト値を上書きするため使用しません
plugins	サードパーティプラグインはチームの合意後に追加します

---

18.1.3. PostCSS 設定

postcss.config.js ファイルをプロジェクトルートに作成します。

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

• tailwindcss プラグインは必ず autoprefixer よりも先に登録しなければなりません。
• 追加の PostCSS プラグインは autoprefixer の後に配置します。
• Vite は PostCSS 設定を自動的に認識するため、別途の連携作業は不要です。

---

18.1.4. グローバル CSS 構成

src/styles/main.css ファイルに Tailwind ディレクティブを宣言します。

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer を使用してカスタムスタイルの優先順位を制御します。

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html {
    @apply text-gray-900 bg-white antialiased;
  }
  body {
    @apply min-h-screen;
  }
}

@layer components {
  .btn-base {
    @apply inline-flex items-center justify-center rounded-md font-medium
           transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2;
  }
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

• @layer base は HTML 要素のデフォルトスタイルリセットに使用します。
• @layer components は再利用コンポーネントクラスを定義する際に使用します。
• @layer utilities は Tailwind にないカスタムユーティリティを追加する際に使用します。
• main.css は src/main.ts で最上位にインポートしなければなりません。

// src/main.ts
import './styles/main.css'
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')