Tailwind CSS Colors Overview
Text Colors
Use text-{color}-{shade} to apply text colors.
<p class="text-red-500">Red text</p>
<p class="text-blue-500">Blue text</p>
<p class="text-green-500">Green text</p>
<p class="text-yellow-500">Yellow text</p>
Red text (.text-red-500)
Blue text (.text-blue-500)
Green text (.text-green-500)
Yellow text (.text-yellow-500)
Background Colors
Use bg-{color}-{shade} for background colors.
<div class="bg-red-200 p-2">Red background</div>
<div class="bg-blue-200 p-2">Blue background</div>
<div class="bg-green-200 p-2">Green background</div>
<div class="bg-yellow-200 p-2">Yellow background</div>
Red background (.bg-red-200)
Blue background (.bg-blue-200)
Green background (.bg-green-200)
Yellow background (.bg-yellow-200)
Border Colors
Use border-{color}-{shade} for borders.
<div class="border-4 border-red-500 p-2">Red border</div>
<div class="border-4 border-blue-500 p-2">Blue border</div>
<div class="border-4 border-green-500 p-2">Green border</div>
<div class="border-4 border-yellow-500 p-2">Yellow border</div>
Red border (.border-red-500)
Blue border (.border-blue-500)
Green border (.border-green-500)
Yellow border (.border-yellow-500)
Placeholder Colors
Use placeholder-{color}-{shade} for input placeholders.
<input class="placeholder-gray-400" placeholder="Gray placeholder">
<input class="placeholder-red-500" placeholder="Red placeholder">
Hover Colors
Use hover:text-{color}-{shade} or hover:bg-{color}-{shade}.
<p class="hover:text-blue-500">Hover me for blue text</p>
<div class="hover:bg-green-200 p-2">Hover me for green background</div>
Hover me → blue text
Hover me → green background
Gradient Colors
Use bg-gradient-to-{direction} from-{color} to-{color} for gradient backgrounds.
<div class="bg-gradient-to-r from-red-400 to-blue-400 p-4">Gradient</div>
<div class="bg-gradient-to-b from-green-400 to-yellow-400 p-4">Gradient</div>
Red → Blue
Green → Yellow