canvas-styling-conventions

| 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:

Style Canvas components with Tailwind CSS 4 theme tokens and approved utility patterns. Use when (1) Creating a new component, (2) Adding colors or styling to components, (3) Working with Tailwind theme tokens, (4) Adding or updating design tokens in global.css, (5) Creating color/style props, (6) Any change where component props are added/removed/renamed/retyped and can affect rendered styles. Covers @theme variables, CVA variants, and cn() utility. Source: acquia/nebula.