Color schemes
Playground${variant} ${color} leaf flex items-center justify-center h-16``transparent
primary
secondary
base
danger
warning
`interactive`transparent
primary
secondary
base
danger
warning
`outlined`transparent
primary
secondary
base
danger
warning
Configurable
You can configure and add infinite color schemes by extending the theme in tailwind.config.js.
Use the naming convention to get accurate results:
DEFAULT- The default color scheme. As normally used in tailwind
contrast- The contrast color for the default color. Usually used for text
hover- The color to use when hovering on
interactiveelements active- The color to use when hovering on
interactiveelements focus- The color to use when hovering on
interactiveelements