テーマの置き換えとカスタマイズガイド

styles/
├── globals.css          # メインスタイルファイル、テーマ変数とTailwind設定を含む
└── custom.utilities.css # カスタムユーティリティクラス

styles/
├── globals.css      # メインスタイルファイル、テーマ変数とTailwind設定を含む
└── theme.css        # カスタムユーティリティクラス

@tailwind base;
@tailwind components;
@tailwind utilities;
 
@layer components {
  :root {
    --color-1: 0 100% 63%;
    --color-2: 270 100% 63%;
    --color-3: 210 100% 63%;
    --color-4: 195 100% 63%;
    --color-5: 90 100% 63%;
  }
}
@layer components {
  .title-gradient {
    @apply text-foreground/90;
  }
 
  .dark .title-gradient {
    @apply bg-clip-text bg-gradient-to-b from-foreground to-muted-foreground text-transparent;
  }
 
  .highlight-text {
    @apply text-primary dark:text-primary;
  }
 
  .highlight-bg {
    @apply bg-primary dark:bg-primary text-white;
  }
 
  .highlight-button {
    @apply text-white dark:text-white px-8 py-3 rounded-lg font-medium text-center shadow-lg transition-all duration-200;
    @apply bg-primary dark:bg-primary;
  }
 
  .card {
    @apply transition-all duration-300 border border-gray-200 dark:border-gray-700;
  }
 
  .card:hover {
    transform: translateY(-4px);
    @apply border-primary dark:border-primary;
  }
 
  .theme {
    --animate-rainbow: rainbow var(--speed, 2s) infinite linear;
  }
}
 
@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
  100% { transform: translateY(0px); }
}
 
@theme inline {
  @keyframes rainbow {
  0% {
    background-position: 0%;
    }
  100% {
    background-position: 200%;
    }
  }
}