使用 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-conventions使用 Tailwind 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