Skip to content

refactor: Tailwind設定をtailwind-configパッケージに集約#280

Merged
gn-t-k merged 1 commit intomainfrom
refactor/centralize-tailwind-config
Nov 2, 2025
Merged

refactor: Tailwind設定をtailwind-configパッケージに集約#280
gn-t-k merged 1 commit intomainfrom
refactor/centralize-tailwind-config

Conversation

@gn-t-k
Copy link
Owner

@gn-t-k gn-t-k commented Nov 1, 2025

概要

Tailwind CSS設定がapps/webpackages/react-componentsで重複していたため、packages/tailwind-configパッケージを作成して共通化しました。

変更内容

新規作成

  • packages/tailwind-config/ - Tailwind設定の共通パッケージ
    • tailwind.css - Tailwind本体、プラグイン、テーマ定義を含む設定ファイル
    • package.json - styleフィールドでtailwind.cssを指定

変更ファイル

  • apps/web/
    • package.json - @next-lift/tailwind-config依存を追加
    • src/app/globals.css - @importで共通設定を読み込み、@sourceディレクティブを追加
  • packages/react-components/
    • package.json - @next-lift/tailwind-config依存を追加
    • src/globals.css - @importで共通設定を読み込み

ドキュメント

  • docs/architecture-decision-record/016-tailwind-config-package.md - 設計判断を文書化
    • 現状の設計理由
    • 将来的なデザイントークンへの移行経路
  • docs/architecture-decision-record/README.md - UI/Stylingセクションを追加
  • docs/architecture-decision-record/overview.md - tailwind-configパッケージを追加

メリット

  • Single Source of Truth - テーマ定義が1箇所に集約
  • メンテナンス性の向上 - カラーやフォントの変更を1箇所で管理
  • 一貫性の保証 - apps/webとpackages/react-componentsで完全に同じテーマ設定
  • 将来の拡張性 - 将来的なデザイントークンへの段階的な移行が可能

技術詳細

  • Tailwind CSS v4のCSS-based設定を使用
  • package.jsonstyleフィールドでCSSファイルを指定(標準的なCSSパッケージの構成)
  • @tailwindcss/postcssの組み込みimport解決機能を利用(postcss-import不要)
  • @sourceディレクティブでTailwindがスキャンすべきファイルを明示的に指定

テスト計画

  • pnpm devでapps/webが正常に起動し、スタイルが適用されることを確認
  • pnpm storybookでpackages/react-componentsのStorybookが正常に起動し、スタイルが適用されることを確認
  • 既存のコンポーネントのビジュアルリグレッションがないことを確認

🤖 Generated with Claude Code

Tailwind CSS設定がapps/webとpackages/react-componentsで重複していたため、
packages/tailwind-configパッケージを作成して共通化。

変更内容:
- packages/tailwind-configパッケージを新規作成
  - globals.cssをtailwind.cssとしてパッケージのルートに配置
  - package.jsonのstyleフィールドでtailwind.cssを指定
- apps/webとpackages/react-componentsのglobals.cssを更新
  - @importでtailwind-configパッケージを参照
  - @sourceディレクティブでスキャン対象ファイルを指定
- ADR-016を追加(Tailwind設定共通化の設計判断を文書化)

メリット:
- Single Source of Truth(テーマ定義を1箇所に集約)
- メンテナンス性の向上
- apps/webとpackages/react-components間の一貫性保証
- 将来的なデザイントークンへの段階的な移行が可能

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
@gn-t-k gn-t-k merged commit aab23d8 into main Nov 2, 2025
4 checks passed
@gn-t-k gn-t-k deleted the refactor/centralize-tailwind-config branch November 2, 2025 06:39
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant