canvas-styling-conventions

To enforce consistent Tailwind CSS design tokens across Canvas components, apply standardized styling conventions using theme tokens from global.css and the cn() utility for class merging. This prevents hard-coded values and ensures cohesive visuals across projects.

The best way to manage component variants with CVA and Tailwind CSS is to define variant properties through CVA and map them to Tailwind 4 theme tokens. This standardized approach prevents hard-coded values and ensures reusable, token-driven styling patterns.

You should avoid hard-coded values in Tailwind component styling because it leads to inconsistent visuals across projects. Using Tailwind 4 theme tokens from global.css instead ensures consistent color, spacing, and typography throughout your design system.

Yes, you can use CVA variants with Tailwind CSS 4 theme tokens for design systems. This combination enforces a standardized approach to component variants and props, ensuring cohesive styling and reusable patterns across your Canvas components.

To document design token usage in global.css for Canvas components, establish styling conventions that specify required tooling and constraints, including theme tokens and the cn() utility, then describe these rules in SKILL.md to educate developers on best practices.