Tailwind v4 Runtime Parity
Runtime parsing semantics, supported variants, and known constraints.
Flutterwind follows Tailwind-style parsing semantics for class strings.
Semantic contract
- Last utility wins for the same property
- Variant chain uses AND semantics (
md:hover:*applies only when both match) - Runtime state variants supported:
hover:,focus:,active: - Static variants supported: responsive keys,
dark:,light: - Unsupported variants/utilities are ignored and emit debug warnings
Class parsing model
- Tokenization is bracket-aware to preserve arbitrary values
- Variant chains parse as
variant1:variant2:...:utility - Responsive evaluation uses
TailwindConfig.screens
Parity matrix
| Category | Status | Notes |
|---|---|---|
| Utility precedence | supported | Last-write-wins behavior |
Responsive variants (sm..2xl) | supported | Uses configured breakpoints |
Dark mode variant (dark:) | supported | Uses current theme brightness |
Light mode variant (light:) | supported | Inverse of dark mode |
State variants (hover/focus/active) | supported | Runtime conditional application |
Chained variants (md:hover:*) | supported | All conditions must match |
| Arbitrary spacing/sizing values | partial | Supports bracket forms like w-[10rem] |
| Arbitrary colors | partial | Supports forms like bg-[#123456] |
| CSS-only Tailwind v4 features | not supported | Ignored when no Flutter equivalent exists |
Known constraints
- Some Tailwind CSS features are web/CSS-native and do not map 1:1 to Flutter
- Background image semantics require explicit image APIs in Flutterwind
- Utility breadth is evolving; verify with the support matrix page