Text Color
Below, utility classes to apply color property.
| Class | Properties |
|---|---|
.text-<color>-<tint> | color: var(--#{$color}-#{$tint}); |
Example(s)
Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...
html
<p class="text-gray-500">Lorem ipsum dolor sit amet...</p>
<p class="text-deep-orange-500">Lorem ipsum dolor sit amet...</p>
<p class="text-yellow-500">Lorem ipsum dolor sit amet...</p>
<p class="text-green-500">Lorem ipsum dolor sit amet...</p>
<p class="text-indigo-500">Lorem ipsum dolor sit amet...</p>Pseudo Classes
color is supported by changing state on-the-fly! You can use it like this:
html
<button class="text-indigo-500 hover:text-indigo-600 focus:text-indigo-700 disabled:text-indigo-300">...</button>