Tailwind Token Demo
This temporary page validates custom Tailwind v3 color tokens backed by RGB CSS variables.
Includes checks for classes like bg-primary, text-primary-light, bg-black/50, and border-gray-dark.
Primary
Opacity Variant
Base: bg-primary
Opacity: bg-primary/80
Primary Light
Opacity Variant
Base: bg-primary-light
Opacity: bg-primary-light/60
Primary Lightest
Opacity Variant
Base: bg-primary-lightest
Opacity: bg-primary-lightest/50
Success
Opacity Variant
Base: bg-success
Opacity: bg-success/70
Warning
Opacity Variant
Base: bg-warning
Opacity: bg-warning/75
Danger
Opacity Variant
Base: bg-danger
Opacity: bg-danger/80
Black (custom)
Opacity Variant
Base: bg-black
Opacity: bg-black/50
White (custom)
Opacity Variant
Base: bg-white
Opacity: bg-white/80
Gray Dark
Opacity Variant
Base: bg-gray-dark
Opacity: bg-gray-dark/80
Gray Light
Opacity Variant
Base: bg-gray-light
Opacity: bg-gray-light/80
Gray Lightest
Opacity Variant
Base: bg-gray-lightest
Opacity: bg-gray-lightest/80
Utility Spot Checks
- bg-primary + text-primary-foreground
- text-primary-light + border-gray-dark
- bg-warning + text-danger
- bg-black/50 + text-white