Enhance Tailwind config with custom themes

.github/workflows/node.js.yml

@@ -0,0 +1,31 @@
+# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
+# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs
+
+name: Node.js CI
+
+on:
+  push:
+    branches: [ "main" ]
+  pull_request:
+    branches: [ "main" ]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [18.x, 20.x, 22.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+
+    steps:
+    - uses: actions/checkout@v4
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v4
+      with:
+        node-version: ${{ matrix.node-version }}
+        cache: 'npm'
+    - run: npm ci
+    - run: npm run build --if-present
+    - run: npm test

tailwind.config.ts

@@ -1,7 +1,10 @@
 import type { Config } from "tailwindcss";
+import defaultTheme from "tailwindcss/defaultTheme"; // Tailwindのデフォルトテーマをインポート
 
 const config = {
+  // ダークモードはクラスベースで切り替えます
   darkMode: ["class"],
+  // コンテンツのパス設定（一般的なReact/Next.jsプロジェクトの構造）
   content: [
     "./pages/**/*.{ts,tsx}",
     "./components/**/*.{ts,tsx}",
@@ -13,11 +16,27 @@ const config = {
     container: {
       center: true,
       padding: "2rem",
+      // カスタム画面サイズ (breakpoints) を拡張
       screens: {
-        "2xl": "1400px",
+        'sm': '640px',
+        'md': '768px',
+        'lg': '1024px',
+        'xl': '1280px',
+        '2xl': "1400px",
+        '3xl': "1600px", // ワイドデスクトップ用
+        '4xl': "1920px", // ウルトラワイド用
       },
     },
     extend: {
+      // 1. フォントファミリーの拡張
+      fontFamily: {
+        // メインフォントとして 'Inter' を設定
+        sans: ["Inter", ...defaultTheme.fontFamily.sans],
+        // 見出しやアクセント用に 'Poppins' を追加 (例: className="font-heading")
+        heading: ["Poppins", ...defaultTheme.fontFamily.sans],
+      },
+
+      // 2. カラーパレット (shadcn/uiのCSS変数ベースのカラーを保持)
       colors: {
         border: "hsl(var(--border))",
         input: "hsl(var(--input))",
@@ -53,11 +72,22 @@ const config = {
           foreground: "hsl(var(--card-foreground))",
         },
       },
+
+      // 3. ボーダーラディウスの拡張
       borderRadius: {
         lg: "var(--radius)",
         md: "calc(var(--radius) - 2px)",
         sm: "calc(var(--radius) - 4px)",
+        xl: "calc(var(--radius) + 2px)", // より大きな丸みを追加
       },
+
+      // 4. カスタムシャドウの追加
+      boxShadow: {
+        // より目立つ、深みのあるシャドウ (例: className="shadow-3xl")
+        '3xl': '0 35px 60px -15px rgba(0, 0, 0, 0.4)',
+      },
+
+      // 5. アコーディオン用キーフレームとアニメーション (元の設定を保持)
       keyframes: {
         "accordion-down": {
           from: { height: "0" },
@@ -74,6 +104,7 @@ const config = {
       },
     },
   },
+  // プラグイン (アニメーション系を保持)
   plugins: [require("tailwindcss-animate"), require("tailwindcss-animated")],
 } satisfies Config;