canvas-styling-conventions
Installation
SKILL.md
Technology stack
| Technology | Purpose |
|---|---|
| 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.
Styling conventions
- Use Tailwind's theme colors (
primary-*,gray-*) defined inglobal.css. - Avoid hardcoded color values; use theme tokens instead.
- Follow the existing focus, hover, and active state patterns from examples.
The cn() utility
Related skills
More from acquia/nebula
nebula-scrape-url
Capture web page screenshots and HTML for design reference. Use when the user
10canvas-component-utils
Use utility components to render formatted text and media correctly. Use when
9canvas-component-metadata
Define valid component.yml metadata for Canvas components, including props,
9nebula-project-structure
Project folder structure and package manager detection for Nebula. Reference
8canvas-component-upload
Upload validated components to Drupal Canvas and recover from common upload
8canvas-data-fetching
Fetch and render Drupal content in Canvas components with JSON:API and SWR
8