tailwind-syntax-modern-utilities
Installation
SKILL.md
Tailwind CSS : Modern Utilities (v4 only)
Seven v4-only utility families that surface modern CSS features. Each maps to a CSS specification that v3 either never wrapped or relied on plugins for. ALWAYS check the v4-version gate before adopting these; NEVER backport to v3 (silent failure).
Quick Reference
Seven utility families covered
| Family | Purpose | Underlying CSS spec |
|---|---|---|
transition-discrete |
Allow discrete properties (display, visibility) to transition | transition-behavior: allow-discrete |
starting: variant |
Set initial values for enter animations | @starting-style |
field-sizing-content |
Auto-resize form controls based on content | field-sizing: content |
scheme-* |
Declare colour scheme for native form controls | color-scheme |
font-stretch-* |
Variable-font width axis | font-stretch (a.k.a. font-width) |
inset-shadow-* |
Inset box-shadows | box-shadow: inset ... |
inset-ring-* |
Inset ring (separate from outer ring) | box-shadow: inset 0 0 0 N |