Tailwind CSS

Colors & Backgrounds

20 min Lesson 4 of 35

Understanding Tailwind's Color System

Tailwind CSS provides one of the most comprehensive and thoughtfully designed color systems in any CSS framework. The color palette consists of carefully crafted shades organized into a consistent scale, making it easy to create beautiful, accessible interfaces.

Color Scale Philosophy

Tailwind's color scale runs from 50 (lightest) to 950 (darkest) with 10 primary shades in between. This granular control allows precise color selection while maintaining visual harmony. The 500 shade is typically used as the base color.

The Color Palette

Tailwind includes 22 color families out of the box, each with 10-11 shades:

Primary Colors

Slate: Cool gray - professional and modern
Gray: True gray - neutral and versatile
Zinc: Warm gray - subtle and sophisticated
Neutral: Balanced gray - clean and minimal
Stone: Earthy gray - organic and grounded

Brand Colors

Red: Danger, errors, alerts
Orange: Warning, attention
Amber: Warm accent, caution
Yellow: Highlight, sunshine
Lime: Fresh, energetic
Green: Success, positive actions
Emerald: Rich green, premium
Teal: Professional, calming
Cyan: Bright, tech-focused
Sky: Light blue, airy
Blue: Trust, primary actions
Indigo: Deep blue, sophisticated
Violet: Creative, artistic
Purple: Luxury, premium
Fuchsia: Bold, vibrant
Pink: Playful, friendly
Rose: Romantic, elegant

Text Colors

Apply text colors using the text-{color}-{shade} pattern:

Text Color Examples

<!-- Basic text colors -->
<p class="text-gray-900">Primary text (darkest gray)</p>
<p class="text-gray-700">Secondary text (medium gray)</p>
<p class="text-gray-500">Tertiary text (light gray)</p>

<!-- Brand colors -->
<p class="text-blue-600">Primary blue text</p>
<p class="text-red-600">Error or danger text</p>
<p class="text-green-600">Success message text</p>
<p class="text-yellow-600">Warning text</p>

<!-- Shades demonstration -->
<p class="text-blue-50">Very light blue (50)</p>
<p class="text-blue-100">Light blue (100)</p>
<p class="text-blue-200">Lighter blue (200)</p>
<p class="text-blue-300">Light blue (300)</p>
<p class="text-blue-400">Soft blue (400)</p>
<p class="text-blue-500">Base blue (500) - default</p>
<p class="text-blue-600">Deep blue (600)</p>
<p class="text-blue-700">Darker blue (700)</p>
<p class="text-blue-800">Very dark blue (800)</p>
<p class="text-blue-900">Darkest blue (900)</p>
<p class="text-blue-950">Extremely dark blue (950)</p>

Practical Text Color Usage

Typography Hierarchy with Colors

<article class="max-w-2xl mx-auto p-8">
    <!-- Main heading - darkest for maximum contrast -->
    <h1 class="text-4xl font-bold text-gray-900 mb-4">
        Article Title
    </h1>

    <!-- Meta information - medium gray -->
    <div class="text-sm text-gray-600 mb-8">
        Published on <time class="text-gray-700">January 15, 2026</time>
        by <span class="text-blue-600 hover:text-blue-700">John Doe</span>
    </div>

    <!-- Body text - slightly lighter than heading -->
    <p class="text-lg text-gray-800 leading-relaxed mb-6">
        Body paragraph with good readability. Text should be dark enough
        for comfortable reading but not as dark as headings.
    </p>

    <!-- Supporting text - lighter still -->
    <p class="text-gray-600 mb-4">
        Supporting information or less important details.
    </p>

    <!-- Call to action - brand color -->
    <a href="#" class="inline-block text-blue-600 hover:text-blue-700 font-semibold">
        Read more →
    </a>
</article>

Text Color Best Practices

Use gray-900 for primary headings (maximum contrast)
Use gray-700 or gray-800 for body text
Use gray-600 for secondary text and labels
Use gray-500 or gray-400 for tertiary text, placeholders
Never use shades lighter than 400 for text on white backgrounds (accessibility)

Background Colors

Apply background colors using the bg-{color}-{shade} pattern:

Background Color Examples

<!-- Neutral backgrounds -->
<div class="bg-white">White background</div>
<div class="bg-gray-50">Very light gray - subtle contrast</div>
<div class="bg-gray-100">Light gray - section backgrounds</div>
<div class="bg-gray-900">Dark background - for dark themes</div>
<div class="bg-black">Pure black background</div>

<!-- Brand backgrounds -->
<div class="bg-blue-500 text-white">Primary button background</div>
<div class="bg-blue-600 text-white">Primary button hover state</div>
<div class="bg-blue-100 text-blue-800">Subtle blue highlight</div>

<!-- Status backgrounds -->
<div class="bg-green-100 text-green-800">Success message</div>
<div class="bg-yellow-100 text-yellow-800">Warning message</div>
<div class="bg-red-100 text-red-800">Error message</div>
<div class="bg-blue-100 text-blue-800">Info message</div>

Creating Semantic Alert Components

Alert Components with Background Colors

<!-- Success Alert -->
<div class="bg-green-50 border-l-4 border-green-500 p-4 mb-4">
    <div class="flex items-start">
        <svg class="w-5 h-5 text-green-500 mt-0.5" 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"></path>
        </svg>
        <div class="ml-3">
            <h3 class="text-sm font-medium text-green-800">Success!</h3>
            <p class="text-sm text-green-700 mt-1">Your changes have been saved successfully.</p>
        </div>
    </div>
</div>

<!-- Error Alert -->
<div class="bg-red-50 border-l-4 border-red-500 p-4 mb-4">
    <div class="flex items-start">
        <svg class="w-5 h-5 text-red-500 mt-0.5" 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"></path>
        </svg>
        <div class="ml-3">
            <h3 class="text-sm font-medium text-red-800">Error</h3>
            <p class="text-sm text-red-700 mt-1">There was a problem saving your changes.</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">
        <svg class="w-5 h-5 text-yellow-500 mt-0.5" 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"></path>
        </svg>
        <div class="ml-3">
            <h3 class="text-sm font-medium text-yellow-800">Warning</h3>
            <p class="text-sm text-yellow-700 mt-1">Your session will expire in 5 minutes.</p>
        </div>
    </div>
</div>

<!-- Info Alert -->
<div class="bg-blue-50 border-l-4 border-blue-500 p-4 mb-4">
    <div class="flex items-start">
        <svg class="w-5 h-5 text-blue-500 mt-0.5" 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"></path>
        </svg>
        <div class="ml-3">
            <h3 class="text-sm font-medium text-blue-800">Info</h3>
            <p class="text-sm text-blue-700 mt-1">A new software update is available.</p>
        </div>
    </div>
</div>

Custom Colors

You can extend Tailwind's color palette with custom colors in your configuration file:

tailwind.config.js - Custom Colors

module.exports = {
    theme: {
        extend: {
            colors: {
                // Single custom color
                'brand': '#1da1f2',

                // Custom color with shades
                'primary': {
                    50: '#eff6ff',
                    100: '#dbeafe',
                    200: '#bfdbfe',
                    300: '#93c5fd',
                    400: '#60a5fa',
                    500: '#3b82f6',  // Base shade
                    600: '#2563eb',
                    700: '#1d4ed8',
                    800: '#1e40af',
                    900: '#1e3a8a',
                    950: '#172554',
                },

                // Brand colors
                'brand-blue': '#1da1f2',
                'brand-dark': '#14171a',
                'brand-gray': '#657786',
            },
        },
    },
}

// Usage in HTML
<div class="bg-brand text-white">Custom brand color</div>
<div class="bg-primary-500 text-white">Custom primary color</div>
<div class="bg-brand-blue text-white">Brand blue</div>

Generating Color Palettes

Use tools like UIColors.app, Coolors.co, or Tailwind Shades Generator to generate full color palettes (50-950) from a single base color. This ensures your custom colors have the same visual consistency as Tailwind's default palette.

Opacity Modifiers

Tailwind allows you to adjust color opacity using the /{opacity} syntax:

Opacity Modifier Examples

<!-- Background opacity -->
<div class="bg-blue-500/100">100% opacity (fully opaque)</div>
<div class="bg-blue-500/75">75% opacity</div>
<div class="bg-blue-500/50">50% opacity</div>
<div class="bg-blue-500/25">25% opacity</div>
<div class="bg-blue-500/10">10% opacity</div>
<div class="bg-blue-500/0">0% opacity (fully transparent)</div>

<!-- Text opacity -->
<p class="text-gray-900/100">Fully opaque text</p>
<p class="text-gray-900/75">75% opacity text</p>
<p class="text-gray-900/50">50% opacity text</p>

<!-- Border opacity -->
<div class="border-2 border-gray-300/50">50% opacity border</div>

<!-- Practical example: Overlay -->
<div class="relative">
    <img src="hero.jpg" class="w-full h-96 object-cover">
    <div class="absolute inset-0 bg-black/50 flex items-center justify-center">
        <h2 class="text-4xl font-bold text-white">Hero Title</h2>
    </div>
</div>

Arbitrary Opacity Values

Custom Opacity Values

<!-- Use arbitrary opacity values with square brackets -->
<div class="bg-blue-500/[.35]">35% opacity</div>
<div class="bg-blue-500/[.62]">62% opacity</div>
<div class="bg-blue-500/[.88]">88% opacity</div>

<!-- Hover state with opacity -->
<button class="bg-blue-500 hover:bg-blue-500/90 text-white">
    Hover to see opacity change
</button>

Gradient Backgrounds

Tailwind provides utilities for creating beautiful gradient backgrounds:

Linear Gradients

Gradient Direction and Colors

<!-- Gradient directions -->
<div class="bg-gradient-to-r from-blue-500 to-purple-500">Left to right</div>
<div class="bg-gradient-to-l from-blue-500 to-purple-500">Right to left</div>
<div class="bg-gradient-to-t from-blue-500 to-purple-500">Bottom to top</div>
<div class="bg-gradient-to-b from-blue-500 to-purple-500">Top to bottom</div>

<!-- Diagonal gradients -->
<div class="bg-gradient-to-br from-blue-500 to-purple-500">Top-left to bottom-right</div>
<div class="bg-gradient-to-bl from-blue-500 to-purple-500">Top-right to bottom-left</div>
<div class="bg-gradient-to-tr from-blue-500 to-purple-500">Bottom-left to top-right</div>
<div class="bg-gradient-to-tl from-blue-500 to-purple-500">Bottom-right to top-left</div>

Multi-Color Gradients with Via

Three-Color Gradients

<!-- Three-color gradient with via -->
<div class="bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500">
    Pink → Purple → Indigo
</div>

<div class="bg-gradient-to-br from-green-400 via-blue-500 to-purple-600">
    Green → Blue → Purple
</div>

<div class="bg-gradient-to-r from-yellow-400 via-red-500 to-pink-500">
    Sunset gradient
</div>

<!-- Multiple via colors (Tailwind v3.1+) -->
<div class="bg-gradient-to-r from-blue-500 via-purple-500 via-pink-500 to-red-500">
    Four-color gradient
</div>

Gradient with Opacity

Transparent Gradients

<!-- Fade to transparent -->
<div class="bg-gradient-to-r from-blue-500 to-transparent">
    Fades to transparent
</div>

<!-- Opacity modifiers on gradients -->
<div class="bg-gradient-to-r from-blue-500/50 to-purple-500/50">
    50% opacity gradient
</div>

<!-- Practical example: Image overlay gradient -->
<div class="relative h-96">
    <img src="background.jpg" class="w-full h-full object-cover">
    <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent">
        <div class="absolute bottom-8 left-8 text-white">
            <h2 class="text-4xl font-bold">Gradient Overlay</h2>
            <p class="text-lg">Text remains readable</p>
        </div>
    </div>
</div>

Real-World Gradient Examples

Modern Gradient Card

<div class="max-w-sm mx-auto">
    <!-- Gradient Card -->
    <div class="rounded-2xl overflow-hidden shadow-2xl">

        <!-- Gradient Header -->
        <div class="h-32 bg-gradient-to-br from-purple-600 via-pink-500 to-red-500"></div>

        <!-- Content -->
        <div class="bg-white p-6 -mt-8">
            <div class="w-16 h-16 rounded-full bg-gradient-to-br from-blue-500 to-purple-600
                        flex items-center justify-center text-white text-2xl font-bold mb-4">
                JS
            </div>

            <h3 class="text-xl font-bold text-gray-900 mb-2">
                JavaScript Course
            </h3>

            <p class="text-gray-600 mb-4">
                Master modern JavaScript with hands-on projects and real-world examples.
            </p>

            <button class="w-full py-3 bg-gradient-to-r from-purple-600 to-pink-600
                           hover:from-purple-700 hover:to-pink-700
                           text-white font-semibold rounded-lg
                           transform transition hover:scale-105">
                Enroll Now
            </button>
        </div>

    </div>
</div>

Background Size, Position, and Repeat

Background Size

Background Size Utilities

<!-- Background size -->
<div class="bg-[url('/img/pattern.png')] bg-auto">Auto size (original)</div>
<div class="bg-[url('/img/pattern.png')] bg-cover">Cover (fills container)</div>
<div class="bg-[url('/img/pattern.png')] bg-contain">Contain (fit inside)</div>

<!-- Common use case: Hero section -->
<div class="h-96 bg-[url('/img/hero.jpg')] bg-cover bg-center bg-no-repeat">
    <div class="h-full flex items-center justify-center bg-black/50">
        <h1 class="text-5xl font-bold text-white">Hero Title</h1>
    </div>
</div>

Background Position

Background Position Utilities

<!-- Corner positions -->
<div class="bg-[url('/img/bg.jpg')] bg-top">Top</div>
<div class="bg-[url('/img/bg.jpg')] bg-bottom">Bottom</div>
<div class="bg-[url('/img/bg.jpg')] bg-left">Left</div>
<div class="bg-[url('/img/bg.jpg')] bg-right">Right</div>
<div class="bg-[url('/img/bg.jpg')] bg-center">Center (default)</div>

<!-- Combined positions -->
<div class="bg-[url('/img/bg.jpg')] bg-top-left">Top Left</div>
<div class="bg-[url('/img/bg.jpg')] bg-top-right">Top Right</div>
<div class="bg-[url('/img/bg.jpg')] bg-bottom-left">Bottom Left</div>
<div class="bg-[url('/img/bg.jpg')] bg-bottom-right">Bottom Right</div>

Background Repeat

Background Repeat Utilities

<!-- Repeat patterns -->
<div class="bg-[url('/img/pattern.png')] bg-repeat">Repeat (default)</div>
<div class="bg-[url('/img/pattern.png')] bg-no-repeat">No repeat</div>
<div class="bg-[url('/img/pattern.png')] bg-repeat-x">Repeat horizontally</div>
<div class="bg-[url('/img/pattern.png')] bg-repeat-y">Repeat vertically</div>
<div class="bg-[url('/img/pattern.png')] bg-repeat-round">Repeat and scale</div>
<div class="bg-[url('/img/pattern.png')] bg-repeat-space">Repeat with spacing</div>

Performance Tip

Large background images can slow down page load. Use optimized images (WebP format, compressed), consider lazy loading, or use CSS gradients instead of image gradients when possible.

Practice Exercise 1: Color Palette

Create a color palette showcase page displaying all shades (50-950) of three colors:

Display each shade as a colored box
Show the shade number (e.g., "blue-500")
Display the hex color value
Make boxes larger on hover
Add copy-to-clipboard functionality (optional)

Practice Exercise 2: Alert Components

Build a set of reusable alert components:

Success, Error, Warning, Info variants
Each with appropriate background and text colors
Include an icon (SVG or emoji)
Add a dismiss button
Use borders or left-accent bars
Ensure good contrast for accessibility

Practice Exercise 3: Gradient Hero Section

Create a hero section with gradient backgrounds:

Full-height hero with gradient background
Experiment with 2-3 color gradients
Add text content with good contrast
Include a call-to-action button with gradient
Add subtle animation on hover
Make it responsive (adjust gradient on mobile)

Summary

In this lesson, we explored Tailwind's comprehensive color system and background utilities:

Color Scale: 50-950 shades for each color family, providing granular control
Text Colors: text-{color}-{shade} for typography hierarchy
Background Colors: bg-{color}-{shade} for surfaces and containers
Custom Colors: Extend the palette with brand colors in config file
Opacity Modifiers: /{opacity} syntax for transparent colors
Gradients: Linear gradients with from, via, to
Background Properties: Control size, position, and repeat of background images

Key best practices:

Use darker shades (700-900) for text on light backgrounds
Pair light backgrounds (50-100) with darker text (700-900)
Maintain 4.5:1 contrast ratio for accessibility
Use semantic colors (green for success, red for errors)
Create visual hierarchy with color intensity
Test gradients on different screen sizes

In the next lesson, we'll dive into typography and text styling utilities, learning how to create beautiful, readable text with Tailwind's type system.