Smelte logo
Github Smelte

Color helper classes

Right now Smelte adds very little to what Tailwind has to offer dealing with color except for porting the Material design color palette and adding a few extra utilities like caret color on inputs or colored ripple animation effect. Colors themselves are configured in tailwind.config.js .

.bg-{color}-{variant} gives element appropriate background color:
<div class="bg-deep-purple-500 text-white p-4">This div is deep purple.</div>
This div is deep purple.
.text-{color}-{variant} changes text color accordingly:
<h4 class="text-error-500">This header is error</h4>

This header is error color

Same principle applies to border, but there are also border width border-{n} and type border-{solid|dashed|dotted|none} helpers.
<div class="border-2 border-secondary-600 p-4">This div has secondary border</div>
This div has secondary color border