Colors
Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too.
Text colors
.text-primary
.text-primary-darker
.text-secondary
.text-secondary-darker
.text-success
.text-success-darker
.text-danger
.text-danger-darker
.text-warning
.text-warning-darker
.text-info
.text-info-darker
.text-subtle
.text-muted
.text-default
.text-highlight
.text-emphasis
.text-dark
.text-light
.text-black/50
.text-white/50
.text-gray-950
.text-gray-900
.text-gray-700
.text-gray-600
.text-gray-500
.text-gray-400
.text-gray-300
.text-gray-200
.text-gray-100
.text-gray-50
<h5 class="text-primary">.text-primary</h5>
<h5 class="text-primary-darker">.text-primary-darker</h5>
<h5 class="text-secondary">.text-secondary</h5>
<h5 class="text-secondary-darker">.text-secondary-darker </h5>
<h5 class="text-success">.text-success</h5>
<h5 class="text-success-darker">.text-success-darker</h5>
<h5 class="text-danger">.text-danger</h5>
<h5 class="text-danger-darker">.text-danger-darker</h5>
<h5 class="text-warning">.text-warning</h5>
<h5 class="text-warning-darker">.text-warning-darker</h5>
<h5 class="text-info">.text-info</h5>
<h5 class="text-info-darker">.text-info-darker</h5><br />
<h5 class="text-subtle">.text-subtle</h5>
<h5 class="text-muted">.text-muted</h5>
<h5 class="text-default">.text-default</h5>
<h5 class="text-highlight">.text-highlight</h5>
<h5 class="text-emphasis">.text-emphasis</h5><br />
<h5 class="text-dark"> <span class="bg-light">.text-dark</span></h5>
<h5 class="text-light"><span class="bg-dark">.text-light</span></h5>
<h5 class="text-black/50"><span class="bg-light">.text-black/50</span></h5>
<h5 class="text-white/50"><span class="bg-dark">.text-white/50</span></h5><br />
<h5 class="text-gray-950"> <span class="dark:bg-light">.text-gray-950</span></h5>
<h5 class="text-gray-900"> <span class="dark:bg-light">.text-gray-900</span></h5>
<h5 class="text-gray-700">.text-gray-700</h5>
<h5 class="text-gray-600">.text-gray-600</h5>
<h5 class="text-gray-500">.text-gray-500</h5>
<h5 class="text-gray-400">.text-gray-400</h5>
<h5 class="text-gray-300">.text-gray-300</h5>
<h5 class="text-gray-200">.text-gray-200</h5>
<h5 class="text-gray-100"><span class="bg-dark dark:bg-transparent">.text-gray-100</span></h5>
<h5 class="text-gray-50"><span class="bg-dark dark:bg-transparent">.text-gray-50</span></h5>Text opacity
This is default primary text
This is 75% opacity primary text
This is 50% opacity primary text
This is 25% opacity primary text
<h5 class="text-primary">This is default primary text</h5>
<h5 class="text-primary/75">This is 75% opacity primary text</h5>
<h5 class="text-primary/50">This is 50% opacity primary text</h5>
<h5 class="text-primary/25">This is 25% opacity primary text</h5>
