✨ feat: Tailwind CSSとデザイントークンの導入、Storybookの修正

[yutteee]

タイトル

✨ feat: Tailwind CSSとデザイントークンの導入、Storybookの修正

概要

Tailwind CSS v4をプロジェクトに導入し、Figma MCPを使用してデザインシステムのトークン（color、typography、spacing、border-radius、shadowなど）を取得してTailwind設定に追加しました。また、Storybookが起動しない問題を修正しました。

変更内容

🎨 Tailwind CSS v4の導入

• Tailwind CSS v4.1.17をインストール
• @tailwindcss/postcssをインストール（v4で必要）
• tailwind.config.tsを作成
• postcss.config.mjsを作成
• src/styles/globals.scssにTailwindディレクティブを追加

🎨 Figma MCPからデザイントークンの取得と設定

• Color Variables: text、background、borderのカラーパレットを追加
• Typography: title、heading、body、labelのフォントサイズ、行間、文字間隔を設定
• Spacing: xxxsからxxlまでの間隔トークンを追加
• Border Radius: noneからinfinityまでの角丸トークンを追加
• Border Width: noneからlgまでのボーダー幅トークンを追加
• Box Shadow: elevation-2からelevation-12までの影トークンを追加
• Font Family: BIZ UDPGothicをデフォルトフォントとして設定
• Typography/body/md: デフォルトフォント設定としてグローバルに適用

🐛 Storybookの修正

• Storybook関連パッケージを9.0.15から9.1.16にアップデート
  • storybook@9.1.16
  • @storybook/addon-a11y@9.1.16
  • @storybook/addon-docs@9.1.16
  • @storybook/addon-vitest@9.1.16
  • @storybook/nextjs-vite@9.1.16
  • eslint-plugin-storybook@9.1.16
• definePreviewのインポートエラーを解消

📝 変更ファイル

• tailwind.config.ts: Tailwind設定とデザイントークンの追加
• postcss.config.mjs: PostCSS設定の追加
• src/styles/globals.scss: Tailwindディレクティブとデフォルトフォント設定の追加
• package.json: Tailwind CSS v4、PostCSS、Autoprefixer、Storybook関連パッケージの追加・更新

スクリーンショット

なし（設定ファイルの追加のみ）

備考

• Tailwind CSS v4では、PostCSSプラグインが@tailwindcss/postcssに分離されています
• Figma MCPを使用してデザイントークンを取得し、Tailwind設定に反映しています
• Storybookの起動エラーは、バージョンアップにより解消されました
• デザイントークンはFigmaのデザインシステムと同期されています

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
ori-cube	Ready	Preview	Comment	Nov 15, 2025 9:11am
ori-cube-storybook	Ready	Preview	Comment	Nov 15, 2025 9:11am