canvas-styling-conventions
Installation
SKILL.md
Project type
Before applying this skill, check package.json for a dependency named
@drupal-canvas/headless or starting with @drupal-canvas/headless-. If one is
present, this is a Canvas Headless codebase — read
canvas-headless first; it overrides the
React-specific guidance below. The Tailwind 4 theme-token guidance in this skill
applies to headless projects unchanged; the cn() and className sections are
React-specific. If no such dependency is present, this is a Canvas-rendered
React codebase: components are React (index.jsx/.tsx) and everything in this
skill applies as written. These are the only two project types.
Technology stack
| Technology | Purpose |
|---|---|
| Tailwind CSS 4.1+ | Styling |
| class-variance-authority (CVA) | Component variants |
clsx + tailwind-merge via cn() |
Class name merging |