/** @type {import('tailwindcss').Config} */
export default {
  // スキャン対象のファイル
  content: [
    './src/**/*.{html,js,svelte,ts}',
  ],

  // ダークモードの方式
  darkMode: 'class',

  // テーマのカスタマイズ
  theme: {
    extend: {
      // ここに追加
    }
  },

  // プラグイン
  plugins: [],
}

// tailwind.config.js
export default {
  theme: {
    extend: {
      colors: {
        // シンプルな追加
        brand: '#ff6b35',

        // パレット形式
        primary: {
          50: '#f0f9ff',
          100: '#e0f2fe',
          200: '#bae6fd',
          300: '#7dd3fc',
          400: '#38bdf8',
          500: '#0ea5e9',
          600: '#0284c7',
          700: '#0369a1',
          800: '#075985',
          900: '#0c4a6e',
        },
      },
    },
  },
}

// 使用例
// <div class="bg-brand">ブランドカラー</div>
// <div class="text-primary-500">プライマリ500</div>

// tailwind.config.js
export default {
  theme: {
    extend: {
      fontFamily: {
        // カスタムフォント
        sans: ['Inter', 'sans-serif'],
        display: ['Poppins', 'sans-serif'],
        mono: ['JetBrains Mono', 'monospace'],
        jp: ['Noto Sans JP', 'sans-serif'],
      },
    },
  },
}

// 使用例
// <p class="font-sans">基本フォント</p>
// <h1 class="font-display">見出し用</h1>
// <code class="font-mono">コード</code>

// tailwind.config.js
export default {
  theme: {
    extend: {
      spacing: {
        '18': '4.5rem',    // 72px
        '88': '22rem',     // 352px
        '128': '32rem',    // 512px
      },
    },
  },
}

// 使用例
// <div class="p-18">padding 72px</div>
// <div class="w-88">width 352px</div>
// <div class="mt-128">margin-top 512px</div>

// tailwind.config.js
export default {
  theme: {
    // 完全に上書き
    screens: {
      'sm': '640px',
      'md': '768px',
      'lg': '1024px',
      'xl': '1280px',
      '2xl': '1536px',
    },

    // または extend で追加
    extend: {
      screens: {
        'xs': '475px',      // 追加
        '3xl': '1920px',    // 追加
      },
    },
  },
}

// 使用例
// <div class="xs:text-sm">475px以上で適用</div>

// tailwind.config.js
export default {
  theme: {
    extend: {
      animation: {
        'fade-in': 'fadeIn 0.5s ease-out',
        'slide-up': 'slideUp 0.3s ease-out',
        'bounce-slow': 'bounce 2s infinite',
      },
      keyframes: {
        fadeIn: {
          '0%': { opacity: '0' },
          '100%': { opacity: '1' },
        },
        slideUp: {
          '0%': { transform: 'translateY(20px)', opacity: '0' },
          '100%': { transform: 'translateY(0)', opacity: '1' },
        },
      },
    },
  },
}

// 使用例
// <div class="animate-fade-in">フェードイン</div>

// インストール
// npm install @tailwindcss/typography
// npm install @tailwindcss/forms

// tailwind.config.js
export default {
  plugins: [
    require('@tailwindcss/typography'),
    require('@tailwindcss/forms'),
    require('@tailwindcss/aspect-ratio'),
  ],
}

// Typography プラグインの使用例
// <article class="prose lg:prose-xl">
//   <h1>見出し</h1>
//   <p>本文...</p>
// </article>

// tailwind.config.js
export default {
  // 常に含めるクラス
  safelist: [
    'bg-red-500',
    'bg-green-500',
    'bg-blue-500',
    // パターンマッチ
    {
      pattern: /bg-(red|green|blue)-(100|500|900)/,
    },
  ],
}

// これで動的クラスも動作する
// const color = 'red';
// <div class={`bg-${color}-500`}>動的カラー</div>