skills.rest
acquia
acquiaOFFICIAL
Explore all skills by this author →
WebsiteGitHub

canvas-styling-conventions

Enforce Tailwind CSS v4 theme tokens, CVA variants, and cn utility in Canvas components.

16|6|Updated Feb 19, 2025
Search Tags:#tailwind#cva#design-tokens#cn#component-styling#class-variance-authority#theme-variables
One-click install
npx skills add https://github.com/acquia/nebula --skill canvas-styling-conventions-acquia
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: canvas-styling-conventions
Source: https://github.com/acquia/nebula/tree/main/.agents/skills/canvas-styling-conventions
Command: npx skills add https://github.com/acquia/nebula --skill canvas-styling-conventions-acquia

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Enforces consistent, maintainable component styling by requiring Tailwind theme tokens and approved utility patterns so components remain cohesive, accessible, and easy to update across the Canvas codebase.

Core Features & Use Cases

  • Theme-First Styling: Require use of Tailwind CSS v4 theme variables defined in global.css instead of hardcoded color values.
  • Variant-Based Props: Encourage CVA-driven variants and curated enum props rather than arbitrary color strings to ensure consistent design choices and easier theming.
  • Safe Class Merging: Advocate using a cn merging utility that combines clsx with tailwind-merge to resolve conflicting utilities and allow consumer overrides via className passed last.
  • Use Case: When adding a new Button or Card component, use theme tokens for colors, define a small set of colorScheme variants with CVA, accept a className prop for overrides, and avoid adding third-party CSS libraries.

Quick Start

Use the canvas-styling-conventions guidance to convert component styles to use Tailwind theme tokens, cva variants, and a cn merging utility instead of hardcoded color values.

Frequently Asked Questions about canvas-styling-conventions

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

FAQPage Schema
How do I enforce consistent Tailwind styling across React components?▼

Replace raw style values with Tailwind CSS v4 theme variables defined in global.css, use class-variance-authority for variant definitions, and apply a cn utility combining clsx and tailwind-merge to enforce consistent component styling.

What is the best way to manage conflicting Tailwind utility classes in component variants?▼

Use a cn merging utility that combines clsx with tailwind-merge to resolve conflicting utilities and allow consumer overrides via className passed last, ensuring safe class merging across component variants.

How do I set up CVA variants for a Button component using theme tokens?▼

Define a small set of colorScheme variants using class-variance-authority, reference Tailwind theme tokens for colors instead of arbitrary color strings, and accept a className prop for consumer overrides to set up CVA variants for a Button component.

Can I use raw color props or third-party CSS libraries with Tailwind theme tokens?▼

No, the conventions forbid raw color props and third-party CSS libraries to maintain consistent, maintainable component styling, requiring instead Tailwind CSS v4 theme variables and approved utility patterns.

Why does my Tailwind component styling break when consumers pass custom className overrides?▼

Component styling breaks during overrides because utility conflicts are not resolved. Applying a cn utility combining clsx and tailwind-merge fixes this by resolving conflicting utilities and allowing consumer overrides via className passed last.

Related Skills

Explore More Software Engineering Skills→
mjamoremjamore

expo-tailwind-setup

Configure Tailwind CSS v4 styling in Expo projects with NativeWind and Metro.

Community
Intermediate
lety-ailety-ai

fe-component

Generate React UI components with CVA variants and Radix UI primitives.

Official
Intermediate
BinkyTwinBinkyTwin
1

ui-theme

Enforce token-based Tailwind theming with CSS variables for UI colors.

Community
Intermediate
davidsteinbergerdavidsteinberger

code-architecture-tailwind-v4-best-practices

Guide Tailwind CSS v4 component styling with CSS-first configuration and variant abstraction strategies.

Community
Intermediate