skills.rest
drupal-canvas
drupal-canvasOFFICIAL
Explore all skills by this author →
GitHub

canvas-styling-conventions

Style Canvas components with Tailwind 4 theme tokens and CVA variants.

3|1|Updated Feb 11, 2026
Search Tags:#theming#style#cva#design-tokens#tailwind-css#cn
One-click install
npx skills add https://github.com/drupal-canvas/skills --skill canvas-styling-conventions-drupal-canvas
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: canvas-styling-conventions
Source: https://github.com/drupal-canvas/skills/tree/main/skills/canvas-styling-conventions
Command: npx skills add https://github.com/drupal-canvas/skills --skill canvas-styling-conventions-drupal-canvas

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Canvas components often lack consistent styling across projects, leading to visual drift and higher maintenance costs. This Skill provides a standardized approach to styling using Tailwind 4 theme tokens and CVA-based variants, ensuring uniform look and feel.

Core Features & Use Cases

  • Centralizes styling around Tailwind theme tokens defined in global.css.
  • Demonstrates use of class-variance-authority (CVA) for component variants and cn() for className merging.
  • Encourages token-based color and prop definitions to avoid hardcoded values.
  • Applies consistent theming across new components, color updates, and design-token changes.

Quick Start

Start by applying Tailwind 4 theme tokens to a new component and use CVA variants with cn() to compose classNames.

Frequently Asked Questions about canvas-styling-conventions

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I style UI components consistently with Tailwind 4 theme tokens?▼

To style UI components consistently, you define central design tokens within your global.css and apply them to new components. This prevents visual drift by avoiding hardcoded values and enforcing uniform theming across projects.

What's the best way to manage component variants using class-variance-authority and cn?▼

The best way to manage component variants is using class-variance-authority (CVA) to define variant structures and cn() to merge classNames. This approach ensures straightforward mapping for theme-aware properties without hardcoded colors.

How do I update design tokens in global.css without breaking existing component styles?▼

Updating design tokens in global.css requires a token-based approach. By mapping components to theme tokens and avoiding hardcoded color values, changes to tokens propagate consistently, maintaining uniform look and feel.

Why does my Canvas component styling drift across different projects?▼

Canvas component styling drifts across projects due to inconsistent styling and lack of centralized design tokens. Applying Tailwind 4 theme tokens and CVA-based variants solves this by enforcing consistent design-token usage and prop conventions.

Does this styling approach require hardcoded colors for custom component props?▼

No, this styling approach strictly avoids hardcoded colors. It requires theme-aware properties defined through Tailwind 4 theme tokens, ensuring all color and prop definitions map straightforwardly via cn and CVA.

Related Skills

Explore More Design & Creative Skills→
balintbrewsbalintbrews
14

canvas-styling-conventions

Enforce Tailwind CSS 4 theme tokens and CVA variants for Canvas components.

Community
Intermediate
samymitysamymity
1

Design System — Generate & Audit Visual Systems

Generate design token sets and audit UI consistency across accessibility dimensions.

Community
Advanced
ionmidoriionmidori

Modern UI Engineering

Create React UI components with Tailwind CSS, cva, and cn utility.

Community
Intermediate
mgd34msumgd34msu
4

styled-components

Implement CSS-in-JS styling for React components with tagged template literals.

Community
Advanced