Tailwind と CSS Modules は共存できる？両立パターンと使い分け

2025年6月3日

フロントエンド開発において、CSS の管理手法は年々進化を続けており、開発者は常により良いアプローチを模索しています。その中でも、Tailwind CSS の台頭と従来の CSS Modules の安定性は、多くの開発チームで議論の対象となっているでしょう。一方では Tailwind CSS のユーティリティファーストによる爆速開発、もう一方では CSS Modules のコンポーネントスコープによる確実な封じ込め。果たして、これら異なるアプローチを同一プロジェクト内で共存させることは可能なのでしょうか？本記事では、技術的な観点から両者の共存パターンを詳しく検証し、実際のプロジェクトで活用できる具体的な実装手法をご紹介いたします。単なる理論ではなく、現場で即座に活用できる設定方法や最適化テクニックまで、包括的にお伝えしていきますので、ぜひご期待ください。

現代フロントエンド開発における CSS アーキテクチャの多様化

現代のフロントエンド開発では、CSS の管理・運用手法が飛躍的に多様化しています。従来の全局的な CSS ファイルから始まり、Sass/SCSS による拡張、BEM による命名規則の体系化、そして CSS-in-JS の登場まで、開発者には数多くの選択肢が用意されているのが現状です。

この多様化の背景には、ウェブアプリケーションの複雑化とチーム開発の規模拡大があります。小規模なサイトであれば単純な CSS ファイルでも十分管理可能でしたが、数百・数千のコンポーネントを持つ大規模アプリケーションでは、より洗練されたアーキテクチャが求められるようになりました。

CSS Modules は、この課題に対する一つの解答として登場しました。ファイルレベルでのスコープ分離により、クラス名の衝突を防ぎ、コンポーネント単位での CSS 管理を可能にします。開発者はグローバルな名前空間を気にすることなく、直感的なクラス名を使用できるようになったのです。

javascript// Button.module.css
.button {
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  border: none;
  cursor: pointer;
}

.primary {
  background-color: #3b82f6;
  color: white;
}

.secondary {
  background-color: #6b7280;
  color: white;
}

typescript// Button.tsx
import styles from './Button.module.css';

interface ButtonProps {
  variant?: 'primary' | 'secondary';
  children: React.ReactNode;
}

const Button: React.FC<ButtonProps> = ({
  variant = 'primary',
  children,
}) => {
  return (
    <button
      className={`${styles.button} ${styles[variant]}`}
    >
      {children}
    </button>
  );
};

一方、Tailwind CSS は全く異なるアプローチを提案しました。事前に定義されたユーティリティクラスを組み合わせることで、CSS ファイルを書くことなく迅速にスタイリングを行う手法です。この「ユーティリティファースト」の思想は、特に迅速なプロトタイピングや小〜中規模のプロジェクトで威力を発揮します。

typescript// Tailwind CSS を使用した Button コンポーネント
interface ButtonProps {
  variant?: 'primary' | 'secondary';
  children: React.ReactNode;
}

const Button: React.FC<ButtonProps> = ({
  variant = 'primary',
  children,
}) => {
  const baseClasses =
    'px-4 py-2 rounded border-none cursor-pointer';
  const variantClasses = {
    primary: 'bg-blue-500 text-white',
    secondary: 'bg-gray-500 text-white',
  };

  return (
    <button
      className={`${baseClasses} ${variantClasses[variant]}`}
    >
      {children}
    </button>
  );
};

両者の共存が議論される背景には、それぞれが持つ固有の利点があります。CSS Modules はコンポーネントの独立性を保ちながら、従来の CSS 記法をそのまま活用できる安心感があります。対して Tailwind CSS は、設計システムの一貫性を保ちながら、HTML/JSX 内でのスタイリング完結による開発効率の向上を実現します。

現実のプロジェクトでは、既存のコードベースに新しい手法を導入する必要性や、チームメンバーのスキルレベルの違い、プロジェクトの性質による適材適所の判断など、複雑な要因が絡み合います。そのため、「一つの手法ですべてを解決する」というアプローチよりも、「適切に使い分け、必要に応じて共存させる」というハイブリッドなアプローチが注目されているのです。

特に大規模なプロジェクトでは、レガシーコンポーネントの維持と新規開発の効率化を両立させる必要があります。全面的なリファクタリングにはリスクとコストが伴うため、段階的な移行や部分的な共存が現実的な選択肢となることが多いでしょう。

また、デザインシステムの観点からも、両者の特性を活かした使い分けが有効です。グローバルなデザイントークンや基本的なユーティリティは Tailwind CSS で統一し、コンポーネント固有の複雑なスタイリングは CSS Modules で管理するといったアプローチも可能になります。

異なる CSS 手法を同一プロジェクトで使用する際の技術的課題

Tailwind CSS と CSS Modules を同一プロジェクトで併用する際には、いくつかの技術的な課題が浮上します。これらの課題を事前に理解し、適切な対策を講じることが、成功する共存実装の鍵となるでしょう。

クラス名の競合と優先度の問題

最も顕著な課題は、クラス名の競合です。Tailwind CSS は数千のユーティリティクラスを生成し、CSS Modules は独自のハッシュ化されたクラス名を作成します。これらが同一の要素に適用された場合、CSS の詳細度（specificity）ルールに従って優先度が決定されますが、予期しない結果を招く可能性があります。

css/* Tailwind CSS によって生成される */
.bg-blue-500 {
  background-color: #3b82f6;
}

/* CSS Modules によって生成される */
.Button_primary__2k8Hs {
  background-color: #1e40af; /* より濃い青 */
}

このような場合、どちらのスタイルが適用されるかは、CSS の読み込み順序と詳細度によって決まります。開発者の意図とは異なる結果になる可能性があるため、明確なルールと対策が必要です。

バンドルサイズの肥大化

両方の CSS フレームワークを導入することで、バンドルサイズが増大する懸念があります。Tailwind CSS は使用されていないクラスを自動的に除去する purge 機能を持っていますが、CSS Modules と併用する場合、この最適化が正常に動作しない可能性があります。

javascript// 使用していない Tailwind クラスが除去されない例
import styles from './Component.module.css';

const Component = () => {
  // styles.button には Tailwind クラスが含まれているが、
  // purge 機能が検出できない場合がある
  return (
    <button className={styles.button}>Click me</button>
  );
};

開発環境での処理の複雑化

Webpack や Vite などのビルドツールで、両方の CSS 処理を適切に設定する必要があります。PostCSS プラグインの競合や、ファイルの処理順序による問題が発生する可能性があります。

javascript// 設定が複雑になる例
module.exports = {
  module: {
    rules: [
      {
        test: /\.module\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: true,
            },
          },
          'postcss-loader',
        ],
      },
      {
        test: /\.css$/,
        exclude: /\.module\.css$/,
        use: [
          'style-loader',
          'css-loader',
          'postcss-loader',
        ],
      },
    ],
  },
};

型安全性の課題

TypeScript を使用している場合、CSS Modules の型定義と Tailwind CSS のクラス名補完が競合する可能性があります。特に、動的にクラス名を生成する場合の型チェックが困難になることがあります。

typescript// 型安全性が確保しにくい例
interface ComponentProps {
  variant: 'primary' | 'secondary';
  className?: string;
}

const Component: React.FC<ComponentProps> = ({
  variant,
  className,
}) => {
  // CSS Modules のクラス名と Tailwind のクラス名が混在
  const combinedClasses = `${styles[variant]} ${className} bg-blue-500`;
  return <div className={combinedClasses}>Content</div>;
};

保守性とコードの可読性

開発チームにとって、どこで CSS Modules を使い、どこで Tailwind CSS を使うかの判断基準が曖昧になると、コードの一貫性が失われる可能性があります。また、新しいチームメンバーにとって学習コストが増大する懸念もあります。

CSS カスケードの予測困難性

両方の手法が混在することで、CSS のカスケードの動作を予測することが困難になります。特に、グローバルスタイル、CSS Modules のローカルスタイル、Tailwind のユーティリティクラスが同一要素に適用された場合の挙動を理解するのは容易ではありません。

これらの課題は決して解決不可能なものではありませんが、適切な設計と実装戦略なしに共存を図ろうとすると、開発効率の低下やバグの原因となる可能性があります。次のセクションでは、これらの課題に対する具体的な解決策を詳しく見ていきましょう。

技術的共存を実現する設定とアーキテクチャ

前述の課題を解決し、Tailwind CSS と CSS Modules の効果的な共存を実現するためには、戦略的なアーキテクチャ設計と適切な技術設定が不可欠です。ここでは、実践的な解決策を段階的にご紹介いたします。

明確な使い分けルールの策定

まず最初に重要なのは、プロジェクト内でどのような場面で CSS Modules を使い、どのような場面で Tailwind CSS を使うかの明確な基準を設けることです。以下のような使い分けルールを推奨します：

用途	推奨手法	理由
基本的なレイアウト・スペーシング	Tailwind CSS	一貫性のあるデザインシステム
グローバルなユーティリティクラス	Tailwind CSS	再利用性と保守性
コンポーネント固有の複雑なスタイル	CSS Modules	カプセル化と詳細な制御
アニメーション・トランジション	CSS Modules	複雑な CSS プロパティの管理
サードパーティライブラリのオーバーライド	CSS Modules	確実なスコープ分離

ディレクトリ構造による分離

プロジェクト構造レベルで両者を整理することで、開発者の認知負荷を軽減できます：

rubysrc/
├── components/
│   ├── ui/                    # Tailwind CSS中心のUIコンポーネント
│   │   ├── Button.tsx
│   │   ├── Card.tsx
│   │   └── Modal.tsx
│   └── features/              # CSS Modules中心の機能コンポーネント
│       ├── UserProfile/
│       │   ├── UserProfile.tsx
│       │   └── UserProfile.module.css
│       └── ProductCard/
│           ├── ProductCard.tsx
│           └── ProductCard.module.css
├── styles/
│   ├── globals.css           # Tailwind のベースクラス
│   ├── components.css        # @apply を使用したコンポーネントクラス
│   └── utilities.css         # カスタムユーティリティ
└── types/
    └── css-modules.d.ts      # CSS Modules の型定義

プレフィックスによる名前空間管理

CSS Modules 内で Tailwind のクラス名を参照する際は、プレフィックスを使用して明確に区別します：

css/* UserProfile.module.css */
.container {
  @apply tw-max-w-4xl tw-mx-auto tw-p-4;
}

.header {
  /* 複雑なスタイルは通常のCSSで記述 */
  background: linear-gradient(
    135deg,
    #667eea 0%,
    #764ba2 100%
  );
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  border-radius: 12px;
}

.title {
  @apply tw-text-2xl tw-font-bold tw-text-white;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

型安全性の確保

TypeScript での型安全性を確保するため、適切な型定義を設定します：

typescript// types/css-modules.d.ts
declare module '*.module.css' {
  const classes: { [key: string]: string };
  export default classes;
}

// types/tailwind.d.ts
type TailwindClass = string; // より厳密には実際のクラス名をリテラル型で定義

interface ComponentProps {
  className?: TailwindClass;
  cssModuleClass?: string;
}

Webpack と Vite での両方の CSS 処理設定

モダンなフロントエンド開発では、Webpack や Vite といったビルドツールが CSS の処理を担当します。Tailwind CSS と CSS Modules を共存させるためには、これらのツールで適切な設定を行う必要があります。

Webpack での設定

Webpack では、ファイルの拡張子や命名規則に基づいて異なる処理ルールを適用できます：

javascript// webpack.config.js
const path = require('path');

module.exports = {
  module: {
    rules: [
      // CSS Modules の処理（.module.css ファイル）
      {
        test: /\.module\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: {
                localIdentName:
                  '[name]__[local]__[hash:base64:5]',
                exportLocalsConvention: 'camelCase',
              },
              importLoaders: 1,
            },
          },
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  require('tailwindcss'),
                  require('autoprefixer'),
                ],
              },
            },
          },
        ],
      },
      // 通常の CSS ファイル（Tailwind CSS を含む）
      {
        test: /\.css$/,
        exclude: /\.module\.css$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  require('tailwindcss'),
                  require('autoprefixer'),
                ],
              },
            },
          },
        ],
      },
    ],
  },
  resolve: {
    extensions: ['.js', '.jsx', '.ts', '.tsx', '.css'],
  },
};

Vite での設定

Vite では、より簡潔な設定で同様の機能を実現できます：

javascript// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  css: {
    modules: {
      // CSS Modules の設定
      localsConvention: 'camelCase',
      generateScopedName:
        '[name]__[local]__[hash:base64:5]',
    },
    postcss: {
      plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
      ],
    },
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
});

Next.js での設定

Next.js プロジェクトでは、内蔵の CSS サポートを活用できます：

javascript// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    appDir: true,
  },
  // CSS Modules は自動的にサポートされる
  // Tailwind CSS は globals.css で @tailwind ディレクティブを使用
};

module.exports = nextConfig;

PostCSS 設定による詳細制御

PostCSS の設定ファイルで、プラグインの実行順序と競合回避を管理します：

javascript// postcss.config.js
module.exports = {
  plugins: {
    'postcss-import': {},
    'tailwindcss/nesting': 'postcss-nesting',
    tailwindcss: {},
    autoprefixer: {},
    // 本番環境でのCSS最適化
    ...(process.env.NODE_ENV === 'production'
      ? {
          cssnano: {
            preset: [
              'default',
              {
                discardComments: { removeAll: true },
              },
            ],
          },
        }
      : {}),
  },
};

PostCSS 設定による競合回避

PostCSS は、CSS の前処理と後処理を行う強力なツールです。Tailwind CSS と CSS Modules の共存において、PostCSS の適切な設定は競合回避の鍵となります。

プラグインの実行順序の最適化

PostCSS プラグインの実行順序は、処理結果に大きな影響を与えます。以下の順序を推奨します：

javascript// postcss.config.js
module.exports = {
  plugins: [
    // 1. CSS のインポート処理
    require('postcss-import'),

    // 2. ネストしたセレクタの展開（Tailwind CSS のネスト機能を使用する場合）
    require('tailwindcss/nesting')(
      require('postcss-nesting')
    ),

    // 3. Tailwind CSS の処理
    require('tailwindcss'),

    // 4. ブラウザ対応のプレフィックス追加
    require('autoprefixer'),

    // 5. 本番環境での最適化
    ...(process.env.NODE_ENV === 'production'
      ? [
          require('cssnano')({
            preset: [
              'default',
              {
                discardComments: { removeAll: true },
                normalizeWhitespace: true,
              },
            ],
          }),
        ]
      : []),
  ],
};

カスタム PostCSS プラグインの作成

特定の競合を解決するため、カスタムプラグインを作成することも可能です：

javascript// postcss-conflict-resolver.js
const conflictResolver = () => {
  return {
    postcssPlugin: 'conflict-resolver',
    Rule(rule) {
      // CSS Modules のクラス名と競合する Tailwind クラスを検出
      if (rule.selector.includes('[class*="__"]')) {
        // ハッシュ化されたクラス名を含むセレクタの詳細度を調整
        rule.selector = rule.selector.replace(
          /(\w+__\w+__\w+)/,
          '.$1.$1'
        );
      }
    },
  };
};
conflictResolver.postcssPlugin = 'conflict-resolver';

module.exports = conflictResolver;

条件付きプラグイン適用

ファイルの種類に応じて、異なる PostCSS プラグインを適用できます：

javascript// webpack.config.js での高度な設定
module.exports = {
  module: {
    rules: [
      {
        test: /\.module\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: { modules: true },
          },
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  require('postcss-import'),
                  require('tailwindcss'),
                  require('autoprefixer'),
                  // CSS Modules 専用の後処理
                  require('./postcss-modules-optimizer'),
                ],
              },
            },
          },
        ],
      },
    ],
  },
};

クラス名衝突の防止策

クラス名の衝突は、共存実装において最も注意すべき問題の一つです。以下の戦略で効果的に防止できます。

ネームスペース戦略

CSS Modules で Tailwind のクラスを参照する際は、明確なプレフィックスを使用します：

css/* Component.module.css */
.container {
  /* Tailwind クラスには tw- プレフィックスを付与 */
  @apply tw-flex tw-items-center tw-space-x-4;

  /* コンポーネント固有のスタイル */
  border: 2px solid var(--primary-color);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.title {
  @apply tw-text-xl tw-font-semibold;
  color: var(--title-color);
  letter-spacing: 0.05em;
}

CSS カスタムプロパティによる分離

CSS カスタムプロパティ（CSS 変数）を使用して、値の管理を分離します：

css/* tokens.css */
:root {
  /* デザイントークン */
  --color-primary: #3b82f6;
  --color-secondary: #64748b;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
}

/* Component.module.css */
.button {
  /* CSS変数を使用してTailwindと値を共有 */
  background-color: var(--color-primary);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: 0.375rem;
}

.button:hover {
  background-color: color-mix(
    in srgb,
    var(--color-primary) 90%,
    black
  );
}

条件付きクラス適用の実装

React コンポーネントで、条件に応じてクラスを適用する仕組みを作ります：

typescript// utils/classNames.ts
type ClassValue =
  | string
  | number
  | boolean
  | undefined
  | null;
type ClassArray = ClassValue[];
type ClassObject = Record<
  string,
  boolean | undefined | null
>;

function clsx(
  ...inputs: (ClassValue | ClassArray | ClassObject)[]
): string {
  const classes: string[] = [];

  for (const input of inputs) {
    if (!input) continue;

    if (
      typeof input === 'string' ||
      typeof input === 'number'
    ) {
      classes.push(String(input));
    } else if (Array.isArray(input)) {
      classes.push(clsx(...input));
    } else if (typeof input === 'object') {
      for (const [key, value] of Object.entries(input)) {
        if (value) classes.push(key);
      }
    }
  }

  return classes.join(' ');
}

// コンポーネントでの使用例
import styles from './Button.module.css';

interface ButtonProps {
  variant?: 'primary' | 'secondary';
  size?: 'sm' | 'md' | 'lg';
  disabled?: boolean;
  className?: string;
  children: React.ReactNode;
}

const Button: React.FC<ButtonProps> = ({
  variant = 'primary',
  size = 'md',
  disabled = false,
  className,
  children,
}) => {
  return (
    <button
      className={clsx(
        // CSS Modules のベースクラス
        styles.button,
        styles[variant],

        // Tailwind CSS のユーティリティクラス
        {
          'opacity-50 cursor-not-allowed': disabled,
          'px-2 py-1 text-sm': size === 'sm',
          'px-4 py-2 text-base': size === 'md',
          'px-6 py-3 text-lg': size === 'lg',
        },

        // 追加のカスタムクラス
        className
      )}
      disabled={disabled}
    >
      {children}
    </button>
  );
};

バンドルサイズ最適化の実装

両方の CSS フレームワークを使用する場合、バンドルサイズの最適化は重要な課題です。以下の手法で効果的に最適化できます。

Tailwind CSS の Purge 設定最適化

javascript// tailwind.config.js
module.exports = {
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
    // CSS Modules ファイル内の @apply ディレクティブも対象に
    './src/**/*.module.css',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
  // 開発環境では purge を無効化
  ...(process.env.NODE_ENV === 'production' && {
    safelist: [
      // 動的に生成されるクラス名を安全リストに追加
      'bg-red-500',
      'bg-green-500',
      'bg-blue-500',
      /^text-(red|green|blue)-(400|500|600)$/,
    ],
  }),
};

CSS の分割とコード分割

javascript// webpack.config.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  optimization: {
    splitChunks: {
      cacheGroups: {
        // Tailwind CSS を別チャンクに分離
        tailwind: {
          name: 'tailwind',
          test: /[\\/]node_modules[\\/]tailwindcss[\\/]/,
          chunks: 'all',
          priority: 20,
        },
        // CSS Modules を別チャンクに分離
        modules: {
          name: 'modules',
          test: /\.module\.css$/,
          chunks: 'all',
          priority: 10,
        },
      },
    },
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'css/[name].[contenthash].css',
      chunkFilename: 'css/[name].[contenthash].css',
    }),
  ],
};

Critical CSS の抽出

javascript// critical CSS の抽出設定
const path = require('path');
const critical = require('critical');

// ビルド後に実行
critical.generate({
  inline: true,
  base: 'dist/',
  src: 'index.html',
  dest: 'index.html',
  width: 1300,
  height: 900,
  ignore: {
    atrule: ['@font-face'],
    rule: [/\.module_/, /^\.tw-/], // CSS Modules と Tailwind の特定クラスを除外
  },
});

動的インポートによる遅延読み込み

typescript// 重いコンポーネントの遅延読み込み
const HeavyComponent = lazy(() =>
  import('./HeavyComponent').then((module) => ({
    default: module.HeavyComponent,
  }))
);

// CSS も動的に読み込み
const loadComponentStyles = () => {
  return import('./HeavyComponent.module.css');
};

// 使用時
const App = () => {
  const [showHeavy, setShowHeavy] = useState(false);

  const handleShowHeavy = () => {
    // スタイルを事前読み込み
    loadComponentStyles();
    setShowHeavy(true);
  };

  return (
    <div>
      <button onClick={handleShowHeavy}>
        Show Heavy Component
      </button>
      {showHeavy && (
        <Suspense fallback={<div>Loading...</div>}>
          <HeavyComponent />
        </Suspense>
      )}
    </div>
  );
};

実際のプロジェクトでの実装例

以下は、実際のプロジェクトでの共存パターンの実装例です：

typescript// src/components/ProductCard/ProductCard.tsx
import React, { useState } from 'react';
import styles from './ProductCard.module.css';
import { clsx } from '../../utils/classNames';

interface ProductCardProps {
  product: {
    id: string;
    name: string;
    price: number;
    image: string;
    inStock: boolean;
  };
  onAddToCart: (productId: string) => void;
  className?: string;
}

const ProductCard: React.FC<ProductCardProps> = ({
  product,
  onAddToCart,
  className,
}) => {
  const [isHovered, setIsHovered] = useState(false);

  return (
    <div
      className={clsx(
        // CSS Modules のベーススタイル
        styles.card,

        // Tailwind CSS のユーティリティクラス
        'group relative overflow-hidden rounded-lg shadow-lg transition-all duration-300',
        'hover:shadow-xl transform hover:-translate-y-1',

        // 条件付きスタイル
        {
          'opacity-75': !product.inStock,
        },

        // 追加のカスタムクラス
        className
      )}
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
    >
      {/* 画像部分 - CSS Modules で複雑なオーバーレイ効果 */}
      <div className={styles.imageContainer}>
        <img
          src={product.image}
          alt={product.name}
          className='w-full h-48 object-cover transition-transform duration-300 group-hover:scale-105'
        />
        {!product.inStock && (
          <div className={styles.outOfStockOverlay}>
            <span className='text-white font-semibold'>
              在庫切れ
            </span>
          </div>
        )}
      </div>

      {/* コンテンツ部分 - Tailwind CSS でレイアウト */}
      <div className='p-4'>
        <h3 className='text-lg font-semibold text-gray-900 mb-2 line-clamp-2'>
          {product.name}
        </h3>

        <div className='flex items-center justify-between'>
          <span className='text-xl font-bold text-blue-600'>
            ¥{product.price.toLocaleString()}
          </span>

          <button
            onClick={() => onAddToCart(product.id)}
            disabled={!product.inStock}
            className={clsx(
              // CSS Modules のボタンスタイル
              styles.addToCartButton,

              // Tailwind CSS の状態別スタイル
              'px-4 py-2 rounded-md font-medium transition-all duration-200',
              {
                'bg-blue-600 text-white hover:bg-blue-700 active:bg-blue-800':
                  product.inStock,
                'bg-gray-300 text-gray-500 cursor-not-allowed':
                  !product.inStock,
              }
            )}
          >
            {product.inStock ? 'カートに追加' : '在庫切れ'}
          </button>
        </div>
      </div>

      {/* ホバー時のアニメーション - CSS Modules */}
      <div
        className={clsx(styles.hoverEffect, {
          [styles.visible]: isHovered,
        })}
      >
        <div className='absolute inset-0 bg-gradient-to-t from-black/20 to-transparent' />
      </div>
    </div>
  );
};

export default ProductCard;

css/* src/components/ProductCard/ProductCard.module.css */
.card {
  @apply tw-bg-white tw-border tw-border-gray-200;

  /* CSS Modules 独自の複雑なスタイル */
  background: linear-gradient(
    145deg,
    #ffffff 0%,
    #f8fafc 100%
  );
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1);

  /* カスタムアニメーション */
  animation: slideInUp 0.6s ease-out forwards;
}

.imageContainer {
  position: relative;
  overflow: hidden;
}

.outOfStockOverlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.8);
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  backdrop-filter: blur(4px);
}

.addToCartButton {
  /* CSS Modules での詳細なボタンスタイル */
  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
  text-transform: uppercase;
  letter-spacing: 0.05em;

  &:hover:not(:disabled) {
    box-shadow: 0 4px 8px rgba(59, 130, 246, 0.4);
    transform: translateY(-1px);
  }

  &:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(59, 130, 246, 0.3);
  }
}

.hoverEffect {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  pointer-events: none;
}

.hoverEffect.visible {
  opacity: 1;
}

/* カスタムアニメーション */
@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* レスポンシブ対応 */
@media (max-width: 640px) {
  .card {
    @apply tw-mx-2;

    .addToCartButton {
      @apply tw-text-sm tw-px-3 tw-py-1;
    }
  }
}

この実装例では、以下の共存パターンが実現されています：

レイアウトとユーティリティ: Tailwind CSS で基本的なレイアウトとスペーシング
複雑なスタイリング: CSS Modules でグラデーション、シャドウ、アニメーション
状態管理: 両方の手法を組み合わせた条件付きスタイリング
レスポンシブ対応: Tailwind CSS のブレークポイントと CSS Modules のメディアクエリの併用

技術的共存のメリット・デメリットと選択指針

Tailwind CSS と CSS Modules の共存実装について、技術的な観点からメリットとデメリットを整理し、プロジェクトに最適な選択を行うための指針をご提示いたします。

共存実装のメリット

段階的移行が可能: 既存の CSS Modules コードベースに Tailwind CSS を徐々に導入できるため、リスクを最小化しながら新しい技術を採用できます。
適材適所の活用: シンプルなユーティリティスタイルは Tailwind CSS で、複雑なコンポーネントスタイルは CSS Modules でと、それぞれの強みを活かした開発が可能です。
チームスキルの活用: CSS Modules に慣れたメンバーと Tailwind CSS を好むメンバーが共存するチームでも、それぞれの得意分野を活かせます。
デザインシステムの柔軟性: グローバルなデザイントークンは Tailwind CSS で統一し、個別のコンポーネントスタイルは CSS Modules で詳細制御するといった、柔軟なアーキテクチャが構築できます。

共存実装のデメリット

学習コストの増大: 開発者は両方の CSS 手法を理解する必要があり、特に新しいチームメンバーの教育コストが増加します。
バンドルサイズの増大: 適切な最適化を行わないと、両方のフレームワークが含まれることでファイルサイズが増大する可能性があります。
保守性の複雑化: どちらの手法を使うかの判断基準が曖昧だと、コードの一貫性が失われ、保守性が低下する恐れがあります。
ビルド設定の複雑化: Webpack や Vite の設定が複雑になり、新しいツールの導入や設定変更時のトラブルシューティングが困難になる場合があります。

プロジェクト選択指針

共存実装を検討する際は、以下の基準で判断することを推奨します：

プロジェクトの特性	推奨アプローチ	理由
新規プロジェクト（小〜中規模）	Tailwind CSS 単体	シンプルで統一されたアプローチ
新規プロジェクト（大規模）	共存パターン	柔軟性と拡張性の確保
既存プロジェクト（CSS Modules）	段階的共存導入	リスク最小化と投資効率
短期プロトタイプ	Tailwind CSS 単体	開発速度優先
長期運用アプリケーション	共存パターン	保守性と拡張性のバランス

技術的成熟度による判断基準

チームの技術レベル	推奨戦略	注意点
Tailwind CSS 初心者が多い	CSS Modules 中心 + 部分的 Tailwind CSS	段階的学習でリスク軽減
CSS Modules 経験豊富	共存パターン	既存知識を活かしながら新技術導入
両方に精通	プロジェクト要件に応じて最適選択	技術的制約よりもビジネス要件を重視

パフォーマンス要件による選択

javascript// パフォーマンス測定の実装例
const measureCSSPerformance = () => {
  const perfData = performance
    .getEntriesByType('resource')
    .filter((entry) => entry.name.includes('.css'))
    .map((entry) => ({
      name: entry.name,
      size: entry.transferSize,
      loadTime: entry.duration,
    }));

  console.table(perfData);

  // バンドルサイズの分析
  const totalCSSSize = perfData.reduce(
    (sum, entry) => sum + entry.size,
    0
  );
  const tailwindSize = perfData
    .filter((entry) => entry.name.includes('tailwind'))
    .reduce((sum, entry) => sum + entry.size, 0);
  const modulesSize = perfData
    .filter((entry) => entry.name.includes('module'))
    .reduce((sum, entry) => sum + entry.size, 0);

  return {
    total: totalCSSSize,
    tailwind: tailwindSize,
    modules: modulesSize,
    ratio: tailwindSize / modulesSize,
  };
};

保守性重視の実装ガイドライン

長期的な保守性を重視する場合は、以下のガイドラインに従うことを推奨します：

明確な責任分離: ユーティリティレイヤーとコンポーネントレイヤーの責任を明確に分離
ドキュメント化: 使い分けルールとベストプラクティスの文書化
自動化: ESLint ルールや Prettier 設定による自動的な品質管理
モニタリング: バンドルサイズとパフォーマンスの継続的な監視

まとめ：技術的共存による実用的な CSS アーキテクチャの実現

本記事では、Tailwind CSS と CSS Modules の技術的共存について、実装レベルの詳細から実践的な運用指針まで包括的に解説いたしました。両者の共存は決して不可能ではなく、適切な設計と実装により、それぞれの利点を活かした効率的な開発環境を構築できることがお分かりいただけたのではないでしょうか。

重要なポイントとして、共存実装の成功は技術的な設定だけでなく、チーム内での明確なルール策定と継続的な品質管理にかかっています。単純に両方のツールを導入するだけでは、かえって開発効率の低下や保守性の悪化を招く可能性があるため、戦略的なアプローチが不可欠です。

Webpack や Vite での設定方法、PostCSS による競合回避、クラス名衝突の防止策など、本記事で紹介した技術的な手法は、すぐに実際のプロジェクトで活用していただけるものばかりです。特に、段階的な移行を検討している既存プロジェクトにとって、これらの実装パターンは貴重な指針となるでしょう。

バンドルサイズの最適化についても、適切な設定により両方のフレームワークを使用しながらもパフォーマンスを維持することが可能です。Critical CSS の抽出や動的インポートなどの高度な最適化手法も、実際のプロジェクト要件に応じて段階的に導入できます。

現代のフロントエンド開発では、「一つの正解」を求めるよりも、プロジェクトの特性やチームの状況に応じた最適解を見つけることが重要です。Tailwind CSS と CSS Modules の共存パターンは、その選択肢の一つとして、多くの開発チームにとって有効なアプローチとなり得ます。

技術の進歩とともに、CSS アーキテクチャの選択肢はさらに多様化していくことでしょう。しかし、本記事で解説した基本的な原則と実装手法は、将来の新しい技術との共存においても応用できる普遍的な価値を持っています。ぜひ、皆様のプロジェクトでこれらの手法を試していただき、より効率的で保守性の高い CSS アーキテクチャの構築にお役立てください。