tailwindcss

Tailwind CSS 開発スキル

ファイル構成：このスキルは分割構成を使用しています。高度なパターンについては references/ を参照してください。

1. 概要

このスキルでは、ユーティリティファースト CSS を使用して JARVIS AI アシスタントのインターフェースをスタイリングし、一貫性があり保守しやすい HUD デザインを作成するための Tailwind CSS の専門知識を提供します。

リスクレベル：低 - セキュリティ上の影響範囲が最小限のスタイリングフレームワーク

主な用途：

• ホログラフィック UI パネルのスタイリング
• レスポンシブ HUD レイアウト
• トランジション用のアニメーションユーティリティ
• カスタム JARVIS テーマ設定

2. 主な責務

2.1 基本原則

1. TDD を最優先：スタイリングを実装する前にコンポーネントテストを作成します
2. パフォーマンスを考慮：CSS の出力サイズとレンダリングパフォーマンスを最適化します
3. ユーティリティファースト：ユーティリティクラスからスタイルを組み立て、パターンが繰り返される場合はコンポーネントとして抽出します
4. デザインシステム：JARVIS のカラーパレットとスペーシングを設定ファイルで定義します
5. レスポンシブデザイン：ブレークポイントユーティリティを使ったモバイルファーストの設計にします
6. ダークモードをデフォルトに：HUD は常にダークテーマにします
7. アクセシビリティ：十分なコントラスト比を維持します

3. 実装ワークフロー（TDD）

3.1 スタイリングされたコンポーネントの TDD プロセス

スタイリングするコンポーネントすべてで、次のワークフローに従います。

ステップ 1：失敗するテストを先に作成する

// tests/components/HUDPanel.test.ts
import { describe, it, expect } from 'vitest'
import { mount } from '@vue/test-utils'
import HUDPanel from '~/components/HUDPanel.vue'

describe('HUDPanel', () => {
  it('renders with correct JARVIS theme classes', () => {
    const wrapper = mount(HUDPanel, {
      props: { title: 'System Status' }
    })

    const panel = wrapper.find('[data-testid="hud-panel"]')
    expect(panel.classes()).toContain('bg-jarvis-bg-panel/80')
    expect(panel.classes()).toContain('border-jarvis-primary/30')
    expect(panel.classes()).toContain('backdrop-blur-sm')
  })

  it('applies responsive grid layout', () => {
    const wrapper = mount(HUDPanel)
    const grid = wrapper.find('[data-testid="panel-grid"]')

    expect(grid.classes()).toContain('grid-cols-1')
    expect(grid.classes()).toContain('md:grid-cols-2')
    expect(grid.classes()).toContain('lg:grid-cols-3')
  })

  it('shows correct status indicator colors', async () => {
    const wrapper = mount(HUDPanel, {
      props: { status: 'active' }
    })

    const indicator = wrapper.find('[data-testid="status-indicator"]')
    expect(indicator.classes()).toContain('bg-jarvis-primary')
    expect(indicator.classes()).toContain('animate-pulse')

    await wrapper.setProps({ status: 'error' })
    expect(indicator.classes()).toContain('bg-jarvis-danger')
  })

  it('maintains accessibility focus styles', () => {
    const wrapper = mount(HUDPanel)
    const button = wrapper.find('button')

    expect(button.classes()).toContain('focus:ring-2')
    expect(button.classes()).toContain('focus:outline-none')
  })
})

ステップ 2：テストを通すために必要な最小限を実装する

<template>
  <div
    data-testid="hud-panel"
    class="bg-jarvis-bg-panel/80 border border-jarvis-primary/30 backdrop-blur-sm rounded-lg p-4"
  >
    <div
      data-testid="panel-grid"
      class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"
    >
      <slot />
    </div>
    <span
      data-testid="status-indicator"
      :class="statusClasses"
    />
    <button class="focus:ring-2 focus:outline-none focus:ring-jarvis-primary">
      Action
    </button>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

const props = defineProps<{
  title?: string
  status?: 'active' | 'warning' | 'error' | 'inactive'
}>()

const statusClasses = computed(() => ({
  'bg-jarvis-primary animate-pulse': props.status === 'active',
  'bg-jarvis-warning': props.status === 'warning',
  'bg-jarvis-danger': props.status === 'error',
  'bg-gray-500': props.status === 'inactive'
}))
</script>

ステップ 3：必要に応じてリファクタリングする

繰り返されるパターンを @apply ディレクティブに抽出します。

/* assets/css/components.css */
@layer components {
  .hud-panel {
    @apply bg-jarvis-bg-panel/80 border border-jarvis-primary/30 backdrop-blur-sm rounded-lg p-4;
  }

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

ステップ 4：完全な検証を実行する

# Run all style-related tests
npm run test -- --grep "HUDPanel"

# Check for unused CSS
npx tailwindcss --content './components/**/*.vue' --output /dev/null

# Verify build size
npm run build && ls -lh .output/public/_nuxt/*.css

4. パフォーマンスパターン

4.1 Purge の最適化

// tailwind.config.js
// Good: Specific content paths
export default {
  content: [
    './components/**/*.{vue,js,ts}',
    './layouts/**/*.vue',
    './pages/**/*.vue',
    './composables/**/*.ts'
  ]
}

// Bad: Too broad, includes unused files
export default {
  content: ['./src/**/*']  // Includes tests, stories, etc.
}

4.2 JIT モードの効率化

// Good: Let JIT generate only used utilities
export default {
  mode: 'jit',  // Default in v3+
  theme: {
    extend: {
      // Only extend what you need
      colors: {
        jarvis: {
          primary: '#00ff41',
          secondary: '#0891b2'
        }
      }
    }
  }
}

// Bad: Defining unused variants
export default {
  variants: {
    extend: {
      backgroundColor: ['active', 'group-hover', 'disabled']  // May not use all
    }
  }
}

4.3 @apply の抽出戦略

<style>
@layer components {
  .btn-jarvis {
    @apply px-4 py-2 rounded font-medium transition-all duration-200
           focus:outline-none focus:ring-2 focus:ring-offset-2;
  }
}
</style>


<style>
.my-unique-element {
  @apply p-4 m-2 text-white;  /* Just use utilities in template */
}
</style>

4.4 レスポンシブブレークポイントの効率化

<div class="p-2 md:p-4 lg:p-6">
  <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4">
</div>


<div class="p-2 sm:p-2 md:p-4 lg:p-4 xl:p-6">
  <div class="grid grid-cols-1 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-2">
</div>

4.5 ダークモードの効率化

// Good: Single dark mode strategy (JARVIS is always dark)
export default {
  darkMode: 'class',  // Use 'class' for explicit control
  theme: {
    extend: {
      colors: {
        jarvis: {
          bg: {
            dark: '#0a0a0f',  // Define dark colors directly
            panel: '#111827'
          }
        }
      }
    }
  }
}

// Bad: Light/dark variants when app is always dark
<div class="bg-white dark:bg-gray-900">  // Unnecessary light styles

4.6 アニメーションのパフォーマンス

// Good: GPU-accelerated properties
export default {
  theme: {
    extend: {
      keyframes: {
        glow: {
          '0%, 100%': { opacity: '0.5' },  // opacity is GPU-accelerated
          '50%': { opacity: '1' }
        }
      }
    }
  }
}

// Bad: Layout-triggering properties
keyframes: {
  resize: {
    '0%': { width: '100px' },  // Triggers layout recalc
    '100%': { width: '200px' }
  }
}

5. 技術スタックとバージョン

5.1 推奨バージョン

パッケージ	バージョン	備考
tailwindcss	^3.4.0	JIT モードに対応した最新バージョン
@nuxtjs/tailwindcss	^6.0.0	Nuxt 統合
tailwindcss-animate	^1.0.0	アニメーションユーティリティ

5.2 設定

// tailwind.config.js
export default {
  content: [
    './components/**/*.{vue,js,ts}',
    './layouts/**/*.vue',
    './pages/**/*.vue',
    './composables/**/*.ts',
    './plugins/**/*.ts'
  ],
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        jarvis: {
          primary: '#00ff41',
          secondary: '#0891b2',
          warning: '#f59e0b',
          danger: '#ef4444',
          bg: {
            dark: '#0a0a0f',
            panel: '#111827'
          }
        }
      },
      fontFamily: {
        mono: ['JetBrains Mono', 'monospace'],
        display: ['Orbitron', 'sans-serif']
      },
      animation: {
        'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
        'scan': 'scan 2s linear infinite',
        'glow': 'glow 2s ease-in-out infinite alternate'
      },
      keyframes: {
        scan: {
          '0%': { transform: 'translateY(-100%)' },
          '100%': { transform: 'translateY(100%)' }
        },
        glow: {
          '0%': { boxShadow: '0 0 5px #00ff41' },
          '100%': { boxShadow: '0 0 20px #00ff41' }
        }
      }
    }
  },
  plugins: [
    require('@tailwindcss/forms'),
    require('tailwindcss-animate')
  ]
}

6. 実装パターン

6.1 HUD パネルコンポーネント

<template>
  <div class="
    relative
    bg-jarvis-bg-panel/80
    border border-jarvis-primary/30
    rounded-lg
    p-4
    backdrop-blur-sm
    shadow-lg shadow-jarvis-primary/10
  ">
    
    <div class="
      absolute inset-0
      bg-gradient-to-b from-transparent via-jarvis-primary/5 to-transparent
      animate-scan
      pointer-events-none
    " />

    
    <div class="relative z-10">
      <h3 class="
        font-display
        text-jarvis-primary
        text-lg
        uppercase
        tracking-wider
        mb-2
      ">
        {{ title }}
      </h3>
      <slot />
    </div>
  </div>
</template>

6.2 ステータスインジケーター

<template>
  <div class="flex items-center gap-2">
    <span :class="[
      'w-2 h-2 rounded-full',
      {
        'bg-jarvis-primary animate-pulse': status === 'active',
        'bg-jarvis-warning': status === 'warning',
        'bg-jarvis-danger animate-ping': status === 'error',
        'bg-gray-500': status === 'inactive'
      }
    ]" />
    <span class="text-sm text-gray-300">{{ label }}</span>
  </div>
</template>

6.3 ボタンのバリエーション

<template>
  <button :class="[
    'px-4 py-2 rounded font-medium transition-all duration-200',
    'focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-jarvis-bg-dark',
    {
      'bg-jarvis-primary text-black hover:bg-jarvis-primary/90 focus:ring-jarvis-primary':
        variant === 'primary',
      'bg-transparent border border-jarvis-secondary text-jarvis-secondary hover:bg-jarvis-secondary/10 focus:ring-jarvis-secondary':
        variant === 'secondary',
      'bg-jarvis-danger text-white hover:bg-jarvis-danger/90 focus:ring-jarvis-danger':
        variant === 'danger'
    }
  ]">
    <slot />
  </button>
</template>

7. 品質基準

7.1 アクセシビリティ

<span class="text-jarvis-primary"></span>


<button class="focus:ring-2 focus:ring-jarvis-primary focus:outline-none">


<span class="sr-only">Status: Active</span>

8. よくある間違いとアンチパターン

8.1 アンチパターン

避ける：カスタム CSS の過剰な使用

<style>
.custom-panel {
  padding: 1rem;
  border-radius: 0.5rem;
}
</style>


<div class="p-4 rounded-lg">

避ける：一貫性のないスペーシング

<div class="p-3 mt-5 mb-2">


<div class="p-4 my-4">

避ける：色のハードコード

<div class="text-[#00ff41]">


<div class="text-jarvis-primary">

9. 実装前チェックリスト

フェーズ 1：コードを書く前

• 想定されるクラス適用を確認するコンポーネントテストを作成する
• JARVIS テーマの色が設定ファイルで定義されていることを確認する
• コンテンツパスにすべてのソースファイルが含まれていることを確認する
• 既存のコンポーネントを確認し、再利用可能なパターンを探す

フェーズ 2：実装中

• カスタム CSS よりもユーティリティを優先する
• 一貫したスペーシングスケール（4、8、12、16...）を適用する
• すべてのインタラクティブ要素にフォーカス状態を含める
• 各サイズでレスポンシブブレークポイントをテストする
• テーマカラーを使い、16 進数値をハードコードしない

フェーズ 3：コミット前

• すべてのコンポーネントテストが成功する：npm test
• CSS エラーなしでビルドが完了する：npm run build
• CSS バンドルサイズが予期せず増加していないことを確認する
• 未使用の @apply 抽出がないことを確認する
• キーボード操作でアクセシビリティをテストする

10. まとめ

Tailwind CSS は、JARVIS のユーティリティファーストなスタイリングを提供します。

1. TDD：実装前にクラス適用のテストを作成します
2. パフォーマンス：コンテンツパスを最適化し、JIT モードを使用します
3. テーマ：JARVIS の色とフォントを設定ファイルで定義します
4. ユーティリティ：ユーティリティからスタイルを組み立て、@apply でパターンを抽出します
5. アクセシビリティ：フォーカス状態と十分なコントラストを維持します

注意：JARVIS HUD には独自のビジュアルアイデンティティがあります。テーマ設定との一貫性を保ち、すべてのスタイリングを vitest でテストしてください。

---

参考資料：

• references/advanced-patterns.md - 複雑なレイアウトパターン