既存のクラス名にTailwindのスタイルを適用する方法 ~ @applyディレクティブ ~

@applyディレクティブとは

基本的な使い方

セットアップ

/* styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

シンプルな例

.button {
  @apply bg-blue-500 text-white px-4 py-2 rounded;
}

.card {
  @apply bg-white shadow-lg rounded-lg p-6;
}

<button class="button">クリック</button>
<div class="card">カードコンテンツ</div>

実践的な活用例

ボタンのバリエーション

.btn-primary {
  @apply bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-6 rounded-lg transition-colors duration-200;
}

.btn-secondary {
  @apply bg-gray-200 hover:bg-gray-300 text-gray-800 font-semibold py-2 px-6 rounded-lg transition-colors duration-200;
}

.btn-danger {
  @apply bg-red-600 hover:bg-red-700 text-white font-semibold py-2 px-6 rounded-lg transition-colors duration-200;
}

フォーム要素

.form-input {
  @apply w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent;
}

.form-label {
  @apply block text-sm font-medium text-gray-700 mb-2;
}

.form-error {
  @apply text-red-600 text-sm mt-1;
}

レイアウトコンポーネント

.container-custom {
  @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
}

.grid-layout {
  @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6;
}

.flex-center {
  @apply flex items-center justify-center;
}

ナビゲーション

.nav-link {
  @apply text-gray-600 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium transition-colors;
}

.nav-link-active {
  @apply text-blue-600 bg-blue-50 px-3 py-2 rounded-md text-sm font-medium;
}

レスポンシブデザイン

.responsive-card {
  @apply p-4 md:p-6 lg:p-8 bg-white rounded-lg shadow;
}

.responsive-text {
  @apply text-sm md:text-base lg:text-lg;
}

疑似クラスの適用

.interactive-element {
  @apply bg-gray-100 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 active:bg-gray-300 transition-all;
}

ダークモード対応

.dark-mode-card {
  @apply bg-white dark:bg-gray-800 text-gray-900 dark:text-white p-6 rounded-lg;
}

注意点とベストプラクティス

やるべきこと

1. コンポーネント層で使用する: 再利用可能なコンポーネントに@applyを使用します。

@layer components {
  .custom-button {
    @apply px-4 py-2 bg-blue-500 text-white rounded;
  }
}

2. 複雑なパターンをまとめる: 繰り返し使用する複雑なスタイルの組み合わせに適しています。

避けるべきこと

1. 過度な使用: すべてのスタイルを@applyで書くのは避けましょう。Tailwindの利点（HTML内での視認性、パージの効率性）が失われます。

2. 単純なケース: 1〜2個のユーティリティだけなら、HTMLに直接書く方が良いでしょう。

/* 避けるべき */
.simple-margin {
  @apply mt-4;
}

/* HTMLに直接書く方が良い */
<div class="mt-4">...</div>

トラブルシューティング

スタイルが適用されない場合

1. ビルドプロセスの確認: CSSファイルがTailwindのビルドプロセスを通っているか確認します。

2. クラス名の重複: より具体的なセレクタが必要な場合があります。

/* 優先度を上げる */
.specific-context .button {
  @apply bg-blue-500 text-white px-4 py-2 rounded;
}

3. !importantの使用: 最終手段として使用できます。

.force-style {
  @apply !bg-red-500 !text-white;
}

Tailwind設定値の利用

.custom-component {
  @apply px-4 py-2 rounded;
  background-color: theme('colors.blue.500');
  font-family: theme('fontFamily.sans');
}

まとめ

使用を推奨するケース

• レガシーコードの段階的な移行
• サードパーティライブラリのスタイル上書き
• 複雑で再利用可能なコンポーネントパターン
• CMSなどでHTMLの編集が制限されている場合