Colors
Color list
Click a color to copy it to the clipboard
Usage
Import and use in JS
import { getThemeColor } from '@/../tailwind.config'<div className="w-20 h-20" style={{ background: getThemeColor('brand') }} />Use with tailwind<div className="w-20 h-20 bg-brand" />Use as a css variable<div className="w-20 h-20" style={{ background: 'var(--color-brand)' }} />Modifiers
With tailwind you can do this
<div className="w-20 h-20 bg-brand-900/50" />You can replicate the behavior with JS for consistencyimport { getThemeColor } from '@/../tailwind.config'<div className="w-20 h-20" style={{ background: getThemeColor('brand', { variant: 900, opacity: 50 }) }} />A bit more tricky using CSS, but doable<div className="w-20 h-20" style={{ background: 'hsl(from var(--color-brand-900) h s l / 50%)' }} />Autocomplete
The getThemeColor function gives you the ability to autocomplete all the parameters
