スタイルシートの例

CSS ディレクティブが出力スタイルシートを変える場合は StylesheetExample を使います。サーバーが現在のプリセットでリテラルのソースをコンパイルし、必要な変数と keyframes を含む完全な結果を表示します。この組み合わせは DocumentCodeExample を再利用し、キーボードでのコピー、見えるフォーカス、クリップボードの結果通知を備えます。ページ内で視覚効果を実行するものではありません。

@theme {  --color-brand: #4f46e5;}.card {  background-color: var(--color-brand);}

.card {  background-color: var(--color-brand);}@layer theme {  :root,  :host {    --color-brand: #4f46e5  }}

@theme {  --color-brand: #4f46e5;}@safelist "bg-brand";

@layer theme {  :root,  :host {    --color-brand: #4f46e5  }}@layer utilities {  .bg-brand {    background-color: var(--color-brand)  }}

@layer theme {  :root, :host {    --color-brand: #4f46e5;  }}@keyframes fade-in {  to { opacity: 1; }}

@layer theme {  :root,  :host {    --color-brand: #4f46e5;  }}@keyframes fade-in {  to {    opacity: 1;  }}

selector

テーマの宣言内の明示的なネイティブセレクター。

<StylesheetExample  title="A safelisted color token"  source={"@theme { --color-brand: #4f46e5;  }\n\n@safelist \"bg-brand\";"}/>

コンポーネントはタイトルと単独の CSS ソースを受け取ります。複数ファイルが必要な import、reference、アセットにはフィクスチャに基づく例を使います。コンパイラーはサーバーに置き、ソースと結果の全行を可搬 Markdown に残し、コードはブロック内でスクロールできるようにします。ビルドエラーはドキュメントの検査で必ず表面化させます。

上のトークン、safelist、ネイティブリソースの例は同じ表示方法を使います。DocumentOptions は説明にインラインコードやリンクも受け取り、名前と任意の既定値は別に保ちます。どちらのコンポーネントも測定対象のデモレイアウト外に置きます。

実際の使い方はテーマとバリアント、管理される定義、条件付きブロックを参照してください。