CSS Summoner

カスタムCSSクラスをプレビューしながら組み合わせるツールです。 クラスの組み合わせを確認し、生成したコードをコピーして実装に活用できます。

ついでに内部的にAstroドキュメントページ、Astroコンポーネント、型定義ファイルも生成してます。

使い方やソースコードはGitHubリポジトリをご覧ください。フィードバックもお待ちしております。

background:
Loading handler for "button"...
適用クラス: btn-base theme-primary

追加クラス

例: 'w-full mb-4 dark:bg-neutral-800'

生成されたクラス

<クラスを選択してください>

適用されるCSSルール

/* Select classes to see relevant CSS rules */

HTMLコード

<!-- Loading HTML... -->

使い方

  1. 左側のパネルからコンポーネントタイプを選択
  2. バリアント、サイズ、角丸などを選択して基本スタイルを設定
  3. モディファイアでさらにスタイルを追加（影、アニメーションなど）
  4. 特殊効果クラスを選択して追加効果を適用
  5. 右側のパネルでリアルタイムにプレビューを確認
  6. 生成されたクラス文字列やHTMLコードをコピーして使用

Component Docs