テーマカスタマイズ — @themeとtailwind.config

/* globals.css */
@import "tailwindcss";
 
@theme {
  /* カスタムカラー */
  --color-brand: #2563eb;
  --color-brand-hover: #1d4ed8;
  --color-brand-light: #dbeafe;
 
  /* カスタムフォント */
  --font-sans: 'Noto Sans JP', sans-serif;
 
  /* カスタム間隔 */
  --spacing-18: 4.5rem;
 
  /* カスタムブレークポイント */
  --breakpoint-xs: 480px;
 
  /* カスタムアニメーション */
  --animate-fade-in: fadeIn 300ms ease-out;
}
 
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

<!-- 定義したテーマを使う -->
<div class="bg-brand text-white">ブランドカラー</div>
<p class="font-sans">Noto Sans JP</p>
<div class="mt-18">カスタム間隔</div>
<div class="animate-fade-in">フェードイン</div>

// tailwind.config.js
const { fontFamily } = require('tailwindcss/defaultTheme')
 
module.exports = {
  content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        brand: {
          DEFAULT: '#2563eb',
          hover: '#1d4ed8',
          light: '#dbeafe',
        },
      },
      fontFamily: {
        sans: ['Noto Sans JP', ...fontFamily.sans],
      },
      spacing: {
        18: '4.5rem',
        22: '5.5rem',
      },
      borderRadius: {
        '4xl': '2rem',
      },
      animation: {
        'fade-in': 'fadeIn 300ms ease-out',
      },
      keyframes: {
        fadeIn: {
          '0%': { opacity: '0', transform: 'translateY(-8px)' },
          '100%': { opacity: '1', transform: 'translateY(0)' },
        },
      },
    },
  },
  plugins: [
    require('@tailwindcss/typography'),
    require('@tailwindcss/forms'),
  ],
}

/* globals.css */
@layer components {
  .btn-primary {
    @apply inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700
           text-white font-semibold rounded-lg transition-colors
           focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:outline-none;
  }
}

<button class="btn-primary">送信</button>