aicanvas-me

Tailwind V4 — Design skill for Claude Code

Design community

Tailwind CSS v4 — Project Patterns.

How to install Tailwind V4

Installs to ~/.claude/skills/aicanvas-me-aicanvas-tailwind-v4/SKILL.md

Terminal

mkdir -p ~/.claude/skills/aicanvas-me-aicanvas-tailwind-v4 && curl -fsSL https://raw.githubusercontent.com/aicanvas-me/aicanvas/HEAD/skills/tailwind-v4.md -o ~/.claude/skills/aicanvas-me-aicanvas-tailwind-v4/SKILL.md

Restart Claude Code, or start a new session, for it to be picked up.

What Tailwind V4 does

Tailwind CSS v4 — Project Patterns

This project uses Tailwind v4. It is a breaking change from v3. Do not use v3 patterns.

Critical differences from v3

v3 (wrong)	v4 (correct)
`tailwind.config.ts` with `theme.extend`	`@theme inline` in `globals.css`
`@apply` utility composition	Use utility classes directly in JSX
`darkMode: 'class'` in config	`@variant dark (&:where(.dark, .dark *))` in CSS
`bg-opacity-50`	`bg-sand-900/50` (slash syntax)
`text-op

Alternatives in Design

Pack — Bundle every designlang output (DTCG tokens, Tailwind, shadcn, Figma vars, motion, anatomy, Storybook, prompts 3.6k ★
App Onboarding Questionnaire — A Claude Code skill that designs and builds high-converting questionnaire-style app onboarding flows — modelle 751 ★
Makepad Skills — Makepad UI development skills for Rust apps: setup, patterns, shaders, packaging, and troubleshooting 723 ★