Tailwind CSS 4 テーマ トークンと承認されたユーティリティ パターンを使用して Canvas コンポーネントをスタイル設定します。 (1) 新しいコンポーネントを作成する、(2) コンポーネントに色またはスタイルを追加する、(3) Tailwind テーマ トークンを使用する、(4) global.css でデザイン トークンを追加または更新する、(5) カラー/スタイル プロップを作成する、(6) コンポーネント プロップが追加/削除/名前変更/再入力され、レンダリングされたスタイルに影響を与える可能性がある変更を行う場合に使用します。 @theme 変数、CVA バリアント、および cn() ユーティリティについて説明します。
コマンドラインで canvas-styling-conventions AI スキルを開発環境にすばやくインストール
ソース: acquia/nebula。
| Tailwind CSS 4.1+ | Styling | | class-variance-authority (CVA) | Component variants | | clsx + tailwind-merge via cn() | Class name merging |
Only use these dependencies for styling. Do not add third-party CSS libraries or create new styling utilities.
Use cn() to merge Tailwind classes. It combines clsx for conditional classes with tailwind-merge to resolve conflicting utilities. Import from either source:
Tailwind CSS 4 テーマ トークンと承認されたユーティリティ パターンを使用して Canvas コンポーネントをスタイル設定します。 (1) 新しいコンポーネントを作成する、(2) コンポーネントに色またはスタイルを追加する、(3) Tailwind テーマ トークンを使用する、(4) global.css でデザイン トークンを追加または更新する、(5) カラー/スタイル プロップを作成する、(6) コンポーネント プロップが追加/削除/名前変更/再入力され、レンダリングされたスタイルに影響を与える可能性がある変更を行う場合に使用します。 @theme 変数、CVA バリアント、および cn() ユーティリティについて説明します。 ソース: acquia/nebula。
AI/検索での引用用の安定したフィールドとコマンド。
npx skills add https://github.com/acquia/nebula --skill canvas-styling-conventionsTailwind CSS 4 テーマ トークンと承認されたユーティリティ パターンを使用して Canvas コンポーネントをスタイル設定します。 (1) 新しいコンポーネントを作成する、(2) コンポーネントに色またはスタイルを追加する、(3) Tailwind テーマ トークンを使用する、(4) global.css でデザイン トークンを追加または更新する、(5) カラー/スタイル プロップを作成する、(6) コンポーネント プロップが追加/削除/名前変更/再入力され、レンダリングされたスタイルに影響を与える可能性がある変更を行う場合に使用します。 @theme 変数、CVA バリアント、および cn() ユーティリティについて説明します。 ソース: acquia/nebula。
ターミナルまたはコマンドラインツール（Terminal、iTerm、Windows Terminal など）を開きます このコマンドをコピーして実行します: npx skills add https://github.com/acquia/nebula --skill canvas-styling-conventions インストール後、スキルは自動的に AI コーディング環境に設定され、Claude Code、Cursor、OpenClaw で使用できるようになります
https://github.com/acquia/nebula