kenzo 3ed95e608a feat(tailwind-design-system): update skill for Tailwind CSS v4 (#427) ...

* feat(tailwind-design-system): update skill for Tailwind CSS v4

Major updates:
- CSS-first configuration with @theme blocks
- @custom-variant for dark mode (not @variant)
- @keyframes must be inside @theme for tree-shaking
- React 19 ref-as-prop patterns (no forwardRef)
- OKLCH colors for better perceptual uniformity
- Native CSS animations (@starting-style, transition-behavior)
- New @utility directive for custom utilities
- @theme inline/static modifiers
- Namespace overrides (--color-*: initial)
- Semi-transparent variants with color-mix()
- Container query tokens

Breaking changes from v3:
- tailwind.config.ts → CSS @theme
- @tailwind directives → @import 'tailwindcss'
- darkMode: 'class' → @custom-variant dark

* fix: address review feedback for tailwind v4 skill

- Add missing semicolon to @custom-variant declaration
- Add missing Slot import from @radix-ui/react-slot
- Add missing DialogPortal declaration
- Add --color-ring-offset to theme for focus states
- Fix misleading comment about @keyframes tree-shaking
- Update comparison table for tailwindcss-animate replacement
- Use standard zod import path (not transitional zod/v4)
- Update upgrade guide link to stable URL
- Format with Prettier

---------

Co-authored-by: Seth Hobson <wshobson@gmail.com>

2026-02-01 20:40:22 -05:00

..

SKILL.md

feat(tailwind-design-system): update skill for Tailwind CSS v4 (#427)

2026-02-01 20:40:22 -05:00