Tailwind CSS Colors, Borders and Shadows
Tailwind has a large colour palette, plus classes for borders, rounded corners and shadows.
The Colour Palette
Each colour has shades from 50 (very light) to 950 (very dark). The colour names include slate, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, pink and rose, plus black and white.
Example
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<body class="p-8">
<div class="flex">
<div class="bg-cyan-50 w-16 h-16"></div>
<div class="bg-cyan-200 w-16 h-16"></div>
<div class="bg-cyan-400 w-16 h-16"></div>
<div class="bg-cyan-600 w-16 h-16"></div>
<div class="bg-cyan-800 w-16 h-16"></div>
<div class="bg-cyan-950 w-16 h-16"></div>
</div>
<p class="mt-2 text-sm text-gray-500">cyan-50, 200, 400, 600, 800 and 950</p>
</body>
</html>Where Colours Go
The same colour names work with different prefixes:
| Prefix | Example | Colours |
|---|---|---|
text- | text-red-600 | Text |
bg- | bg-green-100 | Background |
border- | border-blue-400 | Border |
fill- | fill-amber-500 | The inside of SVG icons |
ring- | ring-cyan-500 | Focus ring outline |
Opacity with a Slash
Add / and a number after a colour to make it see-through: bg-black/50 is black at 50% opacity.
Example
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<body class="p-8 space-y-3">
<div class="bg-cyan-600 text-white p-3">bg-cyan-600</div>
<div class="bg-cyan-600/60 text-white p-3">bg-cyan-600/60</div>
<div class="bg-cyan-600/20 p-3">bg-cyan-600/20</div>
<div class="bg-green-100 text-green-800 border border-green-300 p-3 rounded-md">Payment received: Rs 4,500</div>
<div class="bg-red-100 text-red-800 border border-red-300 p-3 rounded-md">Fee is due by 10 November</div>
</body>
</html>For messages, use a light background (100), a dark text (800) and a middle border (300) of the same colour. It looks clean and is easy to read.
Borders
| Class | Effect |
|---|---|
border | 1px border on all sides |
border-2, border-4 | Thicker borders |
border-t, border-b, border-l, border-r | One side only |
border-dashed | Dashed line |
border-gray-300 | Border colour |
In Tailwind v4 the default border colour is currentColor (the text colour), so add a colour class like border-gray-300 for a light border.
Rounded Corners
| Class | Corners |
|---|---|
rounded-sm | Slightly rounded |
rounded-md | Medium |
rounded-lg, rounded-xl, rounded-2xl | More rounded |
rounded-full | Fully round (circles and pills) |
rounded-t-lg | Top corners only |
Shadows
shadow-sm, shadow-md, shadow-lg, shadow-xl and shadow-2xl add shadows of growing size.
Example
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<body class="bg-gray-100 p-8">
<div class="max-w-xs bg-white border border-gray-200 rounded-2xl shadow-lg p-6 text-center">
<div class="w-20 h-20 mx-auto rounded-full bg-cyan-500 text-white text-3xl font-bold flex items-center justify-center">A</div>
<h3 class="mt-4 text-lg font-bold">Ahmed Raza</h3>
<p class="text-gray-500">Web Developer, Karachi</p>
</div>
</body>
</html>Exercise
Exercise
Which class gives a red background that is 50% transparent?