3 min read
•Question 6 of 38easyHow to use Colors in Tailwind CSS?
Understanding color utilities and customization.
What You'll Learn
- Color naming convention
- Background, text, border colors
- Opacity modifiers
Color Classes
index.htmlHTML
<div class="bg-blue-500 text-white border-blue-700">
Blue background, white text, dark blue border
</div>Color Scale
Colors range from 50 (lightest) to 950 (darkest):
index.htmlHTML
<div class="bg-gray-50">Very light</div>
<div class="bg-gray-500">Medium</div>
<div class="bg-gray-950">Very dark</div>Color Properties
| Prefix | Property |
|---|---|
| bg- | background-color |
| text- | color |
| border- | border-color |
| ring- | box-shadow ring |
Opacity Modifier
index.htmlHTML
<div class="bg-black/50">50% opacity black</div>
<div class="text-blue-500/75">75% opacity text</div>