Color is one of the most powerful tools in design—it creates mood, draws attention, and communicates brand identity. Tailwind provides a comprehensive color system with hundreds of carefully crafted shades and utilities for applying colors to text, backgrounds, borders, and more. In this lesson, you'll master Tailwind's color palette, gradients, opacity, and background utilities to create visually stunning designs.
Understanding Tailwind's Color Palette
Tailwind includes a default color palette with 22 colors, each with 10-11 shades ranging from very light (50) to very dark (950):
Color Scale (50-950)
Each color has shades numbered:
- 50: Extremely light (almost white)
- 100-400: Light shades
- 500: Base/default shade (most vibrant)
- 600-900: Dark shades
- 950: Extremely dark (almost black)
Default Color Palette
Tailwind's default colors include:
- Grays: slate, gray, zinc, neutral, stone
- Colors: red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose
- Special: black, white, transparent, current, inherit
🎨 Consistent Design
Using Tailwind's color scale ensures consistent, harmonious colors throughout your design. The shades are mathematically calculated to work well together!
Text Colors
Apply colors to text using text-{color}-{shade}:
HTML
<!-- Primary colors at different shades -->
<p class="text-blue-500">Blue text (shade 500)</p>
<p class="text-blue-600">Darker blue text (shade 600)</p>
<p class="text-blue-700">Even darker blue (shade 700)</p>
<!-- Different colors -->
<p class="text-red-500">Red text</p>
<p class="text-green-500">Green text</p>
<p class="text-purple-500">Purple text</p>
<p class="text-yellow-500">Yellow text</p>
<p class="text-pink-500">Pink text</p>
<!-- Gray shades (very common) -->
<p class="text-gray-900">Very dark gray (almost black)</p>
<p class="text-gray-700">Dark gray</p>
<p class="text-gray-600">Medium gray</p>
<p class="text-gray-500">Gray</p>
<p class="text-gray-400">Light gray</p>
<!-- Special colors -->
<p class="text-black">Pure black</p>
<p class="text-white">Pure white</p>
<p class="text-transparent">Transparent (invisible)</p>Common Text Color Patterns
HTML
<!-- Heading: Very dark for contrast -->
<h1 class="text-gray-900 text-4xl font-bold">
Main Heading
</h1>
<!-- Body text: Slightly lighter for readability -->
<p class="text-gray-700 leading-relaxed">
Body text with good readability
</p>
<!-- Muted text: Even lighter for secondary info -->
<p class="text-gray-600 text-sm">
Secondary information or captions
</p>
<!-- Subtle text: Very light for hints -->
<p class="text-gray-400 text-xs">
Placeholder or disabled text
</p>
<!-- Link: Brand color with hover -->
<a href="#" class="text-blue-600 hover:text-blue-700 underline">
Clickable link
</a>
<!-- Success message -->
<p class="text-green-600 font-semibold">
✓ Success! Changes saved.
</p>
<!-- Error message -->
<p class="text-red-600 font-semibold">
✕ Error: Please try again.
</p>
<!-- Warning -->
<p class="text-amber-600 font-semibold">
⚠ Warning: Check your input.
</p>Responsive Text Colors
HTML
<!-- Change color on different screens -->
<p class="text-blue-500 md:text-purple-500 lg:text-green-500">
Blue on mobile, purple on tablet, green on desktop
</p>
<!-- Different shades on hover -->
<button class="text-white bg-blue-500 hover:bg-blue-600 px-6 py-3">
Hover for darker shade
</button>Background Colors
Apply colors to backgrounds using bg-{color}-{shade}:
HTML
<!-- Solid background colors -->
<div class="bg-blue-500 text-white p-4">
Blue background
</div>
<div class="bg-green-500 text-white p-4">
Green background
</div>
<div class="bg-purple-500 text-white p-4">
Purple background
</div>
<!-- Light backgrounds (no white text needed) -->
<div class="bg-blue-50 text-blue-900 p-4">
Very light blue background
</div>
<div class="bg-green-100 text-green-800 p-4">
Light green background
</div>
<!-- Gray backgrounds (very common for UI) -->
<div class="bg-gray-50 p-4">
Subtle gray background
</div>
<div class="bg-gray-100 p-4">
Light gray background
</div>
<div class="bg-gray-800 text-white p-4">
Dark gray background
</div>
<div class="bg-gray-900 text-white p-4">
Very dark background
</div>Background Color Best Practices
Color Contrast Guidelines
- Dark backgrounds (600-900): Use white or very light text
- Light backgrounds (50-200): Use dark text (700-900)
- Medium backgrounds (300-500): Use white text
- Always test readability: Ensure sufficient contrast
Practical Background Examples
HTML
<!-- Alert/notification components -->
<div class="bg-blue-50 border border-blue-200 text-blue-800 p-4 rounded-lg">
ℹ️ Information: Here's something you should know.
</div>
<div class="bg-green-50 border border-green-200 text-green-800 p-4 rounded-lg">
✓ Success: Your changes have been saved!
</div>
<div class="bg-yellow-50 border border-yellow-200 text-yellow-800 p-4 rounded-lg">
⚠️ Warning: Please review your input.
</div>
<div class="bg-red-50 border border-red-200 text-red-800 p-4 rounded-lg">
✕ Error: Something went wrong.
</div>
<!-- Card with subtle background -->
<div class="bg-white shadow-lg rounded-lg p-6">
<h3 class="text-xl font-bold text-gray-900 mb-2">Card Title</h3>
<p class="text-gray-600">Card content goes here...</p>
</div>
<!-- Dark mode card -->
<div class="bg-gray-800 text-white shadow-lg rounded-lg p-6">
<h3 class="text-xl font-bold mb-2">Dark Card</h3>
<p class="text-gray-300">Dark theme content...</p>
</div>
<!-- Badge/tag with colored background -->
<span class="inline-block bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm font-semibold">
New Feature
</span>
<!-- Button variations -->
<button class="bg-blue-600 hover:bg-blue-700 text-white font-semibold px-6 py-3 rounded-lg">
Primary Button
</button>
<button class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-semibold px-6 py-3 rounded-lg">
Secondary Button
</button>
<button class="bg-green-600 hover:bg-green-700 text-white font-semibold px-6 py-3 rounded-lg">
Success Button
</button>
<button class="bg-red-600 hover:bg-red-700 text-white font-semibold px-6 py-3 rounded-lg">
Danger Button
</button>Gradient Backgrounds
Create beautiful gradient backgrounds by combining direction and color utilities:
Gradient Directions
HTML
<!-- Left to right -->
<div class="bg-gradient-to-r from-blue-500 to-purple-500 text-white p-8">
Left to right gradient
</div>
<!-- Right to left -->
<div class="bg-gradient-to-l from-blue-500 to-purple-500 text-white p-8">
Right to left gradient
</div>
<!-- Top to bottom -->
<div class="bg-gradient-to-b from-blue-500 to-purple-500 text-white p-8">
Top to bottom gradient
</div>
<!-- Bottom to top -->
<div class="bg-gradient-to-t from-blue-500 to-purple-500 text-white p-8">
Bottom to top gradient
</div>
<!-- Diagonal gradients -->
<div class="bg-gradient-to-br from-blue-500 to-purple-500 text-white p-8">
Top-left to bottom-right
</div>
<div class="bg-gradient-to-bl from-blue-500 to-purple-500 text-white p-8">
Top-right to bottom-left
</div>
<div class="bg-gradient-to-tr from-blue-500 to-purple-500 text-white p-8">
Bottom-left to top-right
</div>
<div class="bg-gradient-to-tl from-blue-500 to-purple-500 text-white p-8">
Bottom-right to top-left
</div>Multi-Color Gradients
Add middle colors using via-:
HTML
<!-- Three-color gradient -->
<div class="bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 text-white p-8">
Blue → Purple → Pink
</div>
<!-- Four colors using multiple via -->
<div class="bg-gradient-to-r from-red-500 via-yellow-500 via-green-500 to-blue-500 text-white p-8">
Rainbow gradient
</div>
<!-- Subtle gradient with similar colors -->
<div class="bg-gradient-to-br from-blue-400 via-blue-500 to-blue-600 text-white p-8">
Subtle blue gradient
</div>Gradient Color Stops
Control where colors start and end:
HTML
<!-- Start color at 0% (default) -->
<div class="bg-gradient-to-r from-blue-500 from-0% to-purple-500 text-white p-8">
Gradient from start
</div>
<!-- Start color at 50% -->
<div class="bg-gradient-to-r from-blue-500 from-50% to-purple-500 text-white p-8">
Gradient starts halfway
</div>
<!-- Via color at specific position -->
<div class="bg-gradient-to-r from-blue-500 via-purple-500 via-50% to-pink-500 text-white p-8">
Purple exactly in the middle
</div>
<!-- End color at specific position -->
<div class="bg-gradient-to-r from-blue-500 to-purple-500 to-75% text-white p-8">
Purple reaches 75%
</div>Beautiful Gradient Examples
HTML
<!-- Sunset gradient -->
<div class="bg-gradient-to-r from-orange-400 via-red-500 to-purple-600 min-h-screen">
Sunset background
</div>
<!-- Ocean gradient -->
<div class="bg-gradient-to-b from-blue-400 to-blue-900 min-h-screen">
Ocean depth
</div>
<!-- Aurora gradient -->
<div class="bg-gradient-to-r from-green-300 via-blue-500 to-purple-600 min-h-screen">
Northern lights
</div>
<!-- Warm gradient -->
<div class="bg-gradient-to-br from-amber-400 via-orange-500 to-red-600 min-h-screen">
Warm and vibrant
</div>
<!-- Cool gradient -->
<div class="bg-gradient-to-br from-cyan-400 via-blue-500 to-indigo-600 min-h-screen">
Cool and calm
</div>
<!-- Subtle gradient for cards -->
<div class="bg-gradient-to-br from-gray-50 to-gray-100 p-8 rounded-lg shadow">
Subtle gray gradient
</div>
<!-- Button with gradient -->
<button class="bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-700 hover:to-blue-700 text-white font-bold px-8 py-4 rounded-lg">
Gradient Button
</button>✨ Gradient Tips
- Use similar hues for subtle, professional gradients
- Combine complementary colors for vibrant, eye-catching effects
- Test readability—ensure text is readable on gradient backgrounds
- Use gradients sparingly for maximum impact
Opacity
Control transparency of colors using opacity modifiers:
Opacity Syntax
HTML
<!-- Text with opacity -->
<p class="text-blue-600/100">100% opacity (fully opaque)</p>
<p class="text-blue-600/75">75% opacity</p>
<p class="text-blue-600/50">50% opacity</p>
<p class="text-blue-600/25">25% opacity</p>
<p class="text-blue-600/10">10% opacity</p>
<p class="text-blue-600/0">0% opacity (invisible)</p>
<!-- Background with opacity -->
<div class="bg-blue-500/100 text-white p-4">Fully opaque background</div>
<div class="bg-blue-500/75 text-white p-4">75% opacity background</div>
<div class="bg-blue-500/50 text-white p-4">50% opacity background</div>
<div class="bg-blue-500/25 text-gray-900 p-4">25% opacity background</div>Practical Opacity Uses
HTML
<!-- Overlay on image -->
<div class="relative">
<img src="image.jpg" alt="Background" class="w-full h-64 object-cover">
<div class="absolute inset-0 bg-black/50 flex items-center justify-center">
<h2 class="text-white text-4xl font-bold">Text on Overlay</h2>
</div>
</div>
<!-- Semi-transparent card -->
<div class="bg-white/80 backdrop-blur-sm p-6 rounded-lg shadow-lg">
<h3 class="text-xl font-bold mb-2">Frosted Glass Effect</h3>
<p class="text-gray-700">Content with semi-transparent background</p>
</div>
<!-- Disabled state -->
<button class="bg-blue-500/50 text-white/50 px-6 py-3 rounded-lg cursor-not-allowed">
Disabled Button
</button>
<!-- Hover opacity change -->
<div class="bg-blue-500 hover:bg-blue-500/80 text-white p-4 rounded-lg transition">
Hover to change opacity
</div>
<!-- Subtle background tint -->
<div class="bg-blue-500/5 p-8 rounded-lg">
Very subtle blue tint (5% opacity)
</div>Arbitrary Opacity Values
HTML
<!-- Custom opacity percentages -->
<div class="bg-blue-500/[0.15] p-4">15% opacity</div>
<div class="bg-blue-500/[0.33] p-4">33% opacity</div>
<div class="bg-blue-500/[0.67] p-4">67% opacity</div>
<div class="bg-blue-500/[0.85] p-4">85% opacity</div>Border Colors
Apply colors to borders (we'll cover border utilities in detail later):
HTML
<!-- Colored borders -->
<div class="border-2 border-blue-500 p-4">
Blue border
</div>
<div class="border-4 border-red-500 p-4">
Thick red border
</div>
<div class="border border-gray-300 p-4">
Subtle gray border (common for cards)
</div>
<!-- Different border sides with colors -->
<div class="border-l-4 border-blue-500 bg-blue-50 p-4">
Left border accent
</div>
<div class="border-t-2 border-purple-500 p-4">
Top border
</div>
<!-- Hover border color -->
<div class="border-2 border-gray-300 hover:border-blue-500 p-4 transition">
Hover for blue border
</div>Ring Colors
Rings create outline-style borders, perfect for focus states:
HTML
<!-- Focus ring on input -->
<input
type="text"
class="border border-gray-300 rounded-lg px-4 py-2 focus:ring-4 focus:ring-blue-500/50 focus:border-blue-500 outline-none"
placeholder="Focus me"
>
<!-- Button with ring on hover -->
<button class="bg-blue-500 text-white px-6 py-3 rounded-lg hover:ring-4 hover:ring-blue-300 transition">
Hover for ring
</button>
<!-- Card with ring -->
<div class="p-6 rounded-lg ring-2 ring-purple-500">
Card with purple ring
</div>
<!-- Different ring widths -->
<div class="ring-1 ring-gray-300 p-4 rounded">Thin ring</div>
<div class="ring-2 ring-gray-300 p-4 rounded">Medium ring</div>
<div class="ring-4 ring-gray-300 p-4 rounded">Thick ring</div>Divide Colors
Add borders between child elements:
HTML
<!-- Vertical dividers -->
<div class="divide-y divide-gray-200">
<div class="py-4">Item 1</div>
<div class="py-4">Item 2</div>
<div class="py-4">Item 3</div>
<div class="py-4">Item 4</div>
</div>
<!-- Horizontal dividers -->
<div class="flex divide-x divide-gray-300">
<div class="px-4">Column 1</div>
<div class="px-4">Column 2</div>
<div class="px-4">Column 3</div>
</div>
<!-- Colored dividers -->
<div class="divide-y divide-blue-200">
<div class="py-4">Item with blue divider</div>
<div class="py-4">Another item</div>
</div>Interactive Color Palette
Explore Tailwind's complete color palette:
Tailwind Color Palette
Explore all colors and shades in Tailwind's palette
Gray
Blue
Green
Red
💡 Usage Examples:
bg-blue-500 - Background color
text-blue-500 - Text color
border-blue-500 - Border color
Practical Color Examples
Example 1: Status Badges
HTML
<!-- Different status indicators -->
<span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-green-100 text-green-800">
✓ Active
</span>
<span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-yellow-100 text-yellow-800">
⏸ Pending
</span>
<span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-red-100 text-red-800">
✕ Inactive
</span>
<span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-blue-100 text-blue-800">
ℹ Draft
</span>
<span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-gray-100 text-gray-800">
◌ Archived
</span>Example 2: Pricing Cards with Color
HTML
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<!-- Basic plan -->
<div class="bg-white border-2 border-gray-200 rounded-lg p-8">
<h3 class="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-2">
Basic
</h3>
<p class="text-4xl font-bold text-gray-900 mb-4">$9</p>
<button class="w-full bg-gray-200 hover:bg-gray-300 text-gray-800 font-semibold py-3 rounded-lg transition">
Choose Plan
</button>
</div>
<!-- Pro plan (featured) -->
<div class="bg-gradient-to-br from-blue-500 to-purple-600 text-white rounded-lg p-8 transform scale-105 shadow-xl">
<h3 class="text-sm font-semibold uppercase tracking-wider mb-2 opacity-90">
Pro
</h3>
<p class="text-4xl font-bold mb-4">$29</p>
<button class="w-full bg-white text-blue-600 hover:bg-gray-100 font-bold py-3 rounded-lg transition">
Choose Plan
</button>
</div>
<!-- Enterprise plan -->
<div class="bg-white border-2 border-gray-200 rounded-lg p-8">
<h3 class="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-2">
Enterprise
</h3>
<p class="text-4xl font-bold text-gray-900 mb-4">$99</p>
<button class="w-full bg-gray-200 hover:bg-gray-300 text-gray-800 font-semibold py-3 rounded-lg transition">
Choose Plan
</button>
</div>
</div>Example 3: Alert Messages
HTML
<!-- Info alert -->
<div class="bg-blue-50 border-l-4 border-blue-500 p-4 mb-4">
<div class="flex items-start">
<div class="flex-shrink-0">
<svg class="h-5 w-5 text-blue-500" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/>
</svg>
</div>
<div class="ml-3">
<h3 class="text-sm font-semibold text-blue-800">Information</h3>
<p class="text-sm text-blue-700 mt-1">Here's some helpful information for you.</p>
</div>
</div>
</div>
<!-- Success alert -->
<div class="bg-green-50 border-l-4 border-green-500 p-4 mb-4">
<div class="flex items-start">
<div class="flex-shrink-0">
<svg class="h-5 w-5 text-green-500" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
</svg>
</div>
<div class="ml-3">
<h3 class="text-sm font-semibold text-green-800">Success</h3>
<p class="text-sm text-green-700 mt-1">Your changes have been saved successfully!</p>
</div>
</div>
</div>
<!-- Warning alert -->
<div class="bg-yellow-50 border-l-4 border-yellow-500 p-4 mb-4">
<div class="flex items-start">
<div class="flex-shrink-0">
<svg class="h-5 w-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
</svg>
</div>
<div class="ml-3">
<h3 class="text-sm font-semibold text-yellow-800">Warning</h3>
<p class="text-sm text-yellow-700 mt-1">Please review your information before continuing.</p>
</div>
</div>
</div>
<!-- Error alert -->
<div class="bg-red-50 border-l-4 border-red-500 p-4">
<div class="flex items-start">
<div class="flex-shrink-0">
<svg class="h-5 w-5 text-red-500" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
</svg>
</div>
<div class="ml-3">
<h3 class="text-sm font-semibold text-red-800">Error</h3>
<p class="text-sm text-red-700 mt-1">There was an error processing your request.</p>
</div>
</div>
</div>Example 4: Hero Section with Gradient
HTML
<section class="relative min-h-screen flex items-center justify-center overflow-hidden">
<!-- Gradient background -->
<div class="absolute inset-0 bg-gradient-to-br from-indigo-600 via-purple-600 to-pink-600"></div>
<!-- Overlay pattern (optional) -->
<div class="absolute inset-0 bg-black/10"></div>
<!-- Content -->
<div class="relative z-10 max-w-4xl mx-auto px-4 text-center text-white">
<h1 class="text-5xl md:text-6xl lg:text-7xl font-black mb-6">
Build the Future
</h1>
<p class="text-xl md:text-2xl mb-10 text-white/90">
Create amazing experiences with modern web technologies
</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center">
<button class="bg-white text-purple-600 hover:bg-gray-100 font-bold px-8 py-4 rounded-lg transition">
Get Started
</button>
<button class="bg-white/10 hover:bg-white/20 backdrop-blur-sm border-2 border-white font-bold px-8 py-4 rounded-lg transition">
Learn More
</button>
</div>
</div>
</section>Example 5: Data Visualization
HTML
<!-- Progress bars with colors -->
<div class="space-y-4">
<!-- High progress (green) -->
<div>
<div class="flex justify-between mb-1">
<span class="text-sm font-medium text-gray-700">Sales Target</span>
<span class="text-sm font-medium text-green-600">85%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="bg-green-500 h-2 rounded-full" style="width: 85%"></div>
</div>
</div>
<!-- Medium progress (yellow) -->
<div>
<div class="flex justify-between mb-1">
<span class="text-sm font-medium text-gray-700">Customer Satisfaction</span>
<span class="text-sm font-medium text-yellow-600">65%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="bg-yellow-500 h-2 rounded-full" style="width: 65%"></div>
</div>
</div>
<!-- Low progress (red) -->
<div>
<div class="flex justify-between mb-1">
<span class="text-sm font-medium text-gray-700">Bug Resolution</span>
<span class="text-sm font-medium text-red-600">45%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="bg-red-500 h-2 rounded-full" style="width: 45%"></div>
</div>
</div>
</div>Adding Custom Colors
Extend Tailwind's palette with your brand colors in CSS:
src/style.css
@import "tailwindcss";
@theme {
/* Add custom brand colors */
--color-brand-primary: #3b82f6;
--color-brand-secondary: #8b5cf6;
--color-brand-accent: #ec4899;
/* Or add a full color scale */
--color-brand-50: #eff6ff;
--color-brand-100: #dbeafe;
--color-brand-200: #bfdbfe;
--color-brand-300: #93c5fd;
--color-brand-400: #60a5fa;
--color-brand-500: #3b82f6; /* Base */
--color-brand-600: #2563eb;
--color-brand-700: #1d4ed8;
--color-brand-800: #1e40af;
--color-brand-900: #1e3a8a;
}HTML
<!-- Use custom colors -->
<div class="bg-brand-primary text-white p-4">
Primary brand color
</div>
<div class="bg-brand-500 text-white p-4">
Brand color with shade
</div>
<button class="bg-brand-accent text-white px-6 py-3 rounded-lg">
Accent Button
</button>Color Playground
Experiment with colors, gradients, and opacity:
Colors & Gradients Playground
Try different colors, gradients, and opacity combinations
Beautiful Colors
Tailwind makes it easy to create stunning color combinations with gradients, opacity, and more.
Color Best Practices
Follow These Guidelines:
- Ensure sufficient contrast: Use tools to check WCAG compliance
- Limit your palette: Pick 2-3 primary colors plus grays
- Use semantic colors: Red for errors, green for success, etc.
- Test in different contexts: Light and dark backgrounds
- Be consistent: Use the same shades throughout
- Consider accessibility: Color shouldn't be the only indicator
- Use opacity wisely: Great for overlays and layering
- Test gradients: Ensure text remains readable
Key Takeaways
- Tailwind provides 22 colors with 10-11 shades each (50-950)
- Use
text-{color}-{shade}for text colors - Use
bg-{color}-{shade}for background colors - Create gradients with
bg-gradient-to-{direction},from-, andto- - Add middle colors to gradients with
via- - Apply opacity using
/syntax (e.g.,bg-blue-500/50) - Ensure proper contrast between text and backgrounds
- Use semantic colors for status indicators (green, yellow, red)
- Extend the palette with custom brand colors in CSS
- Test accessibility and readability with all color combinations
What's Next?
You've mastered Tailwind's color system! You can now create beautiful, accessible color schemes with solid colors, gradients, and opacity.
Congratulations on completing the Typography & Colors category! You've built a strong foundation in Tailwind CSS fundamentals.
In upcoming lessons, you'll learn about borders, shadows, effects, responsive design, and advanced techniques to take your Tailwind skills to the next level!
🎯 Practice Challenge!
Design a landing page hero section with a gradient background, semi-transparent overlay, and contrasting text. Create a color scheme with primary, secondary, and accent colors, then use them consistently throughout a set of UI components (buttons, alerts, badges)!
Test Your Understanding
Question 1 of 3Score: 0/0