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 drupal-canvas/skills
canvas-component-definition
Start here for any React component task to enforce the canonical Canvas
96canvas-component-metadata
Define valid component.yml metadata for Canvas components, including props,
94canvas-component-utils
Use utility components to render formatted text and media correctly. Use when
80canvas-data-fetching
Fetch and render Drupal content in Canvas components with JSON:API and SWR
80canvas-component-composability
Design Canvas-ready React components with slots and decomposition-first
78canvas-component-push
Push validated Canvas component changes to Drupal Canvas and recover from
52