次世代Astro UIコンポーネント・ラボ
全12選 実機操作プレビュー＆コピペ集

# AstroプロジェクトでTailwind未導入の場合のみ実行
npx astro add tailwind

コンポーネント内のスムーズな開閉やレーダースキャン演出を有効化するため、`theme.extend` 内に以下を追加します。

// tailwind.config.mjs
export default {
  content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
  theme: {
    extend: {
      keyframes: {
        'radar-sweep': {
          '0%': { transform: 'rotate(0deg)' },
          '100%': { transform: 'rotate(360deg)' },
        },
        'fade-in': {
          '0%': { opacity: '0', transform: 'translateY(6px)' },
          '100%': { opacity: '1', transform: 'translateY(0)' },
        },
      },
      animation: {
        'radar-sweep': 'radar-sweep 4s linear infinite',
        'fade-in': 'fade-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards',
      },
    },
  },
  plugins: [],
};

横スクロールテーブルやスライダーのスクロールバーをすっきり隠すためのCSSユーティリティです。

/* スクロールバー非表示ユーティリティ */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}