tailwindcss-performance

Tailwind CSS のパフォーマンス最適化

v4 のパフォーマンス向上

Tailwind CSS v4 では、Rust でエンジンが全面的に書き直されています。

指標	v3	v4
フルビルド	ベースライン	最大 5 倍高速
インクリメンタルビルド	ミリ秒	マイクロ秒（100 倍以上）
エンジン	JavaScript	Rust

JIT（ジャストインタイム）コンパイル

JIT の仕組み

JIT は、ファイル内でクラスが検出されると、その都度スタイルを生成します。

1. ソースファイルをスキャンしてクラス名を探します
2. 使用する CSS のみを生成します
3. 最小限に最適化された出力を生成します

v4：常時 JIT

v3 とは異なり、v4 では JIT が常に有効になっており、設定は不要です。

@import "tailwindcss";
/* JIT is automatic */

コンテンツの検出

自動検出（v4）

v4 ではテンプレートファイルが自動的に検出されるため、コンテンツの設定は不要です。

/* v4 - Works automatically */
@import "tailwindcss";

明示的なコンテンツ指定（v4）

自動検出が機能しない場合は、ソースを明示的に指定してください。

@import "tailwindcss";
@source "./src/**/*.{html,js,jsx,ts,tsx,vue,svelte}";
@source "./components/**/*.{js,jsx,ts,tsx}";

パスの除外

@source not "./src/legacy/**";

ツリーシェイキング

仕組み

Tailwind のビルドプロセスでは、未使用の CSS が削除されます。

Source: All possible utilities (~15MB+)
↓
Scan: Find used class names
↓
Output: Only used styles (~10-50KB typical)

本番ビルド

# Vite - automatically optimized for production
npm run build

# PostCSS - ensure NODE_ENV is set
NODE_ENV=production npx postcss input.css -o output.css

動的なクラス名

問題点

Tailwind は動的に組み立てられたクラス名を検出できません。

// BAD - Classes won't be generated
const color = 'blue'
className={`text-${color}-500`}  // ❌ Not detected

const size = 'lg'
className={`text-${size}`}  // ❌ Not detected

解決策

1. 完全なクラス名を使用する

// GOOD - Full class names
const colorClasses = {
  blue: 'text-blue-500',
  red: 'text-red-500',
  green: 'text-green-500',
}
className={colorClasses[color]}  // ✓ Detected

2. データ属性を使用する

// GOOD - Style based on data attributes
<div data-color={color} className="data-[color=blue]:text-blue-500 data-[color=red]:text-red-500">

3. クラスをセーフリストに追加する

/* In your CSS for v4 */
@source inline("text-blue-500 text-red-500 text-green-500");

4. CSS 変数

@theme {
  --color-dynamic: oklch(0.6 0.2 250);
}

<div class="text-[var(--color-dynamic)]">Dynamic color</div>

トランジションの最適化

個別のトランジションを使用する

<button class="transition-all duration-200">


<button class="transition-colors duration-200">
<button class="transition-transform duration-200">
<button class="transition-opacity duration-200">

GPU アクセラレーション対応のプロパティ

滑らかなアニメーションには、transform と opacity を優先してください。

<div class="transform hover:scale-105 transition-transform">


<div class="opacity-100 hover:opacity-80 transition-opacity">


<div class="left-0 hover:left-4 transition-all">

CSS 変数の使用

ネイティブ変数を優先する

v4 では、theme() の代わりに CSS 変数を直接使用してください。

/* v3 - Uses theme() function */
.element {
  color: theme(colors.blue.500);
}

/* v4 - Use CSS variables (faster) */
.element {
  color: var(--color-blue-500);
}

静的なテーマ値

パフォーマンスが重要な処理では、次のようにします。

@import "tailwindcss/theme.css" theme(static);

これにより、CSS 変数を使用する代わりにテーマ値がインライン化されます。

ビルドの最適化

Vite の設定

// vite.config.js
import tailwindcss from '@tailwindcss/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [tailwindcss()],
  build: {
    // Minify CSS
    cssMinify: 'lightningcss',
    // Optimize chunks
    rollupOptions: {
      output: {
        manualChunks: {
          // Split vendor CSS if needed
        }
      }
    }
  }
})

cssnano を使用した PostCSS

// postcss.config.mjs
export default {
  plugins: {
    '@tailwindcss/postcss': {},
    cssnano: process.env.NODE_ENV === 'production' ? {} : false
  }
}

バンドルサイズの削減

1. 未使用のプラグインを避ける

/* Only load what you need */
@plugin "@tailwindcss/typography";
/* Don't load unused plugins */

2. カラーパレットを制限する

@theme {
  /* Disable default colors */
  --color-*: initial;

  /* Define only needed colors */
  --color-primary: oklch(0.6 0.2 250);
  --color-secondary: oklch(0.7 0.15 180);
  --color-gray-100: oklch(0.95 0 0);
  --color-gray-900: oklch(0.15 0 0);
}

3. ブレークポイントを制限する

@theme {
  /* Remove unused breakpoints */
  --breakpoint-2xl: initial;

  /* Keep only what you use */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
}

キャッシュ戦略

開発

• v4 のインクリメンタルビルドは、すでに非常に高速です
• ほとんどの場合、追加のキャッシュは不要です

CI/CD

# GitHub Actions example
- name: Cache node_modules
  uses: actions/cache@v4
  with:
    path: node_modules
    key: ${{ runner.os }}-node-${{ hashFiles('package-lock.json') }}

- name: Build
  run: npm run build

パフォーマンスの測定

ビルド時間の分析

# Time your build
time npm run build

# Verbose output
DEBUG=tailwindcss:* npm run build

バンドルの分析

# Install analyzer
npm install -D vite-bundle-analyzer

# Analyze bundle
npm run build -- --analyze

CSS サイズの確認

# Check output CSS size
ls -lh dist/assets/*.css

# Gzipped size
gzip -c dist/assets/main.css | wc -c

パフォーマンスのチェックリスト

開発

• JIT が動作している（スタイルがすぐに更新される）
• 大きなファイルに関するコンソール警告がない
• ホットリロードが高速である

本番環境

• NODE_ENV=production が設定されている
• CSS が最小化されている
• 未使用の CSS が削除されている
• 動的なクラス名に関する問題がない
• CSS サイズが妥当である（通常は 50 KB 未満）

よくある問題

問題	解決策
CSS の出力が大きい	動的なクラスやセーフリストの問題がないか確認する
ビルドが遅い	v4 であることを確認し、ファイルのグロブパターンを確認する
スタイルが適用されない	コンテンツの検出とクラス名を確認する
アニメーションが遅い	GPU アクセラレーション対応のプロパティを使用する

CSS の遅延読み込み

非常に大規模なアプリでは、CSS のコード分割を検討してください。

// Dynamically import CSS for routes
const AdminPage = lazy(() =>
  import('./admin.css').then(() => import('./AdminPage'))
)

ベストプラクティスのまとめ

1. JIT に任せる - 不必要にセーフリストへ追加しない
2. 完全なクラス名を使用する - 動的な文字列連結を避ける
3. 個別のトランジションを使用する - transition-all は避ける
4. GPU 対応プロパティを使用する - transform と opacity を優先する
5. テーマを最小限にする - 使用するものだけを定義する
6. 本番ビルドを行う - 常に本番モードを使用する
7. 測定する - 実際の CSS サイズを確認する