Task 3: TailwindCSS設定統合とLINE Design System適用¶

概要¶

task2-service/ui の TailwindCSS設定に LINE Design System を完全統合し、デザインの一貫性を確保する

作業ディレクトリ¶

/home/ito/task2-service/ui/

実装ファイル¶

ui/
├── tailwind.config.js          # LINE Design System統合
├── src/styles/
│   ├── globals.css            # グローバルスタイル
│   ├── line-design.css        # LINE Design System
│   └── components.css         # コンポーネントスタイル
├── postcss.config.js          # PostCSS設定
└── package.json               # 依存関係更新

実装仕様¶

1. TailwindCSS設定統合¶

// tailwind.config.js
module.exports = {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
      colors: {
        // LINE Design System Color Palette
        line: {
          green: '#00B900',
          blue: '#3366CC', 
          gray: {
            50: '#F8F9FA',
            100: '#F1F3F4',
            200: '#E8EAED',
            300: '#DADCE0',
            400: '#BDC1C6',
            500: '#9AA0A6',
            600: '#80868B',
            700: '#5F6368',
            800: '#3C4043',
            900: '#202124'
          }
        },
        primary: {
          50: '#F0F9FF',
          500: '#00B900', // LINE Green
          600: '#009900',
          700: '#007700'
        },
        success: { /* 既存設定維持 */ },
        warning: { /* 既存設定維持 */ },
        error: { /* 既存設定維持 */ }
      },
      fontFamily: {
        sans: ['Inter', 'Hiragino Sans', 'ヒラギノ角ゴシック', 'sans-serif']
      },
      spacing: {
        '18': '4.5rem',
        '88': '22rem'
      },
      borderRadius: {
        'line': '8px',
        'line-lg': '12px'
      },
      boxShadow: {
        'line': '0 1px 3px 0 rgba(0, 0, 0, 0.1)',
        'line-lg': '0 4px 6px -1px rgba(0, 0, 0, 0.1)'
      }
    }
  },
  plugins: []
};

2. LINE Design Components CSS¶

/* src/styles/line-design.css */
@layer components {
  /* Cards */
  .line-card {
    @apply bg-white rounded-line shadow-line border border-line-gray-200;
    @apply hover:shadow-line-lg transition-all duration-200;
  }
  
  /* Buttons */
  .line-btn {
    @apply px-4 py-2 rounded-line font-medium transition-colors duration-150;
  }
  
  .line-btn-primary {
    @apply line-btn bg-line-green text-white hover:bg-green-600;
  }
  
  .line-btn-secondary {
    @apply line-btn bg-line-gray-100 text-line-gray-700 hover:bg-line-gray-200;
  }
  
  /* Form Elements */
  .line-input {
    @apply w-full px-3 py-2 border border-line-gray-300 rounded-line;
    @apply focus:outline-none focus:ring-2 focus:ring-line-green focus:border-transparent;
  }
  
  /* Typography */
  .line-heading {
    @apply font-bold text-line-gray-900;
  }
  
  .line-text {
    @apply text-line-gray-700;
  }
  
  .line-text-sm {
    @apply text-sm text-line-gray-600;
  }
}

3. グローバルスタイル統合¶

/* src/styles/globals.css */
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
@import './line-design.css';

/* LINE Design System Base */
* {
  font-feature-settings: 'kern';
}

body {
  @apply font-sans text-line-gray-900 bg-line-gray-50;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Focus styles */
*:focus {
  outline: 2px solid theme('colors.line.green');
  outline-offset: 2px;
}

4. パッケージ依存関係¶

{
  "devDependencies": {
    "tailwindcss": "^3.3.0",
    "autoprefixer": "^10.4.14",
    "postcss": "^8.4.24",
    "@tailwindcss/forms": "^0.5.3",
    "@tailwindcss/typography": "^0.5.9"
  }
}

成果物¶

• tailwind.config.js LINE Design統合
• line-design.css コンポーネント作成
• globals.css グローバルスタイル
• components.css カスタムスタイル
• package.json 依存関係更新
• PostCSS設定最適化

設計要件¶

カラーパレット統一¶

• Primary: LINE Green (#00B900)
• Gray Scale: LINE Gray 50-900
• Semantic Colors: Success/Warning/Error維持

コンポーネント設計原則¶

• Utility-first approach
• 再利用可能なコンポーネントクラス
• アクセシビリティ対応
• モバイルファースト

レスポンシブ対応¶

/* Mobile First */
.news-grid {
  @apply grid grid-cols-1;
  @apply md:grid-cols-2;
  @apply lg:grid-cols-3;
  @apply xl:grid-cols-4;
}

テスト項目¶

• TailwindCSS ビルド確認
• LINE Design色適用確認
• コンポーネントスタイル確認
• レスポンシブ動作確認
• ダークモード対応 (将来拡張)

完了条件¶

• TailwindCSS設定統合完了
• LINE Design System完全適用
• 全コンポーネントスタイル統一
• レスポンシブ対応完了
• ビルド・動作確認完了

参照: 親チケット #223
実装目標: 1-2日
優先度: 高