❮ Previous Next ❯

Colors & Backgrounds

  • Learn text color, background color, and gradient utilities in Tailwind.

  • How Colors Work in Tailwind CSS

    In Tailwind CSS, colors are not arbitrary values like #ff0000.

    Instead, Tailwind provides:

    • A predefined color palette

    • Multiple shades per color

    • A consistent design scale

    This ensures:

    • Visual consistency

    • Predictable UI

    • Better design decisions

    Tailwind treats colors as part of a design system, not decoration.

    Understanding the Tailwind Color System

    Each color in Tailwind has:

    • A name (blue, gray, red, etc.)

    • Shades from 50 (lightest) to 900 (darkest)

    Example color family:

    blue-50

    blue-100

    blue-200

    ...

    blue-900

    Lower numbers → lighter
    Higher numbers → darker

  • Text Color Utilities

    What Are Text Color Utilities ?

    Text color utilities control the color of text using the syntax:

    Text-{color}-{shade}

Tailwind Text Color Utilities

Text color utilities in Tailwind apply predefined color values directly to text elements. 

<p class="text-gray-700">
  Normal body text
</p>

<p class="text-blue-600">
  Informational text
</p>

<p class="text-red-600">
  Error message
</p>

<p class="text-green-600">
  Success message
</p>

<h1 class="text-3xl font-bold text-gray-900">
  Main Heading
</h1>

<h2 class="text-xl font-semibold text-blue-700">
  Section Heading
</h2>

  • Best practice:

    • Use darker shades for headings

    • Use medium shades for body text

      Common Text Color Use Cases

      PurposeRecommended Color
      Headingsgray-900
      Body textgray-600 / gray-700
      Linksblue-600
      Errorsred-600
      Successgreen-600
      Warningsyellow-600

      This improves readability and UX.

      Background Color Utilities

      What Are Background Color Utilities ?

      Background color utilities control the background of elements using:

      bg-{color}-{shade}

    Tailwind Background Color Utilities

    Background color utilities in Tailwind use bg-{color}-{shade} classes to style element backgrounds. 

    <div class="bg-gray-100 p-4">
  Light background section
</div>

<div class="bg-blue-600 text-white p-4">
  Primary section
</div>

<div class="bg-red-100 text-red-700 p-4">
  Error alert
</div>

    • Background colors are often paired with:

      • Padding

      • Text color

      • Border radius

    Tailwind Button Background Colors

    Use background color utilities with spacing and rounded classes to style buttons in Tailwind. 

    <button class="bg-blue-600 text-white px-4 py-2 rounded">
  Primary Button
</button>

<button class="bg-gray-200 text-gray-800 px-4 py-2 rounded">
  Secondary Button
</button>

    • This replaces traditional CSS button styling entirely.

      Hover States with Background Colors

      Tailwind supports state-based styling.

    Tailwind Hover Background

    Use the hover: modifier in Tailwind to change styles when the user hovers over an element. 

    <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded">
  Hover Me
</button>

    • Meaning:

      • Normal → bg-blue-600

      • Hover → bg-blue-700

      No CSS selectors required.

      Combining Text & Background Colors Correctly

    Text and Background Color Contrast

    Choose text and background colors with good contrast to ensure readability and accessibility. 

    <!-- Bad combination -->
<p class="text-gray-400 bg-white">
  Hard to read
</p>

<!-- Good combination -->
<p class="text-gray-800 bg-white">
  Easy to read
</p>

    • Rule:

      • Dark text on light background

      • Light text on dark background

    Tailwind Card Component

    Use background, spacing, shadow, and typography utilities to create a simple card layout. 

    <div class="bg-white p-6 rounded-lg shadow">
  <h3 class="text-lg font-semibold text-gray-900">
    Card Title
  </h3>
  <p class="text-gray-600 mt-2">
    Card description text
  </p>
</div>

    • This is a real-world UI pattern.

      Neutral Colors vs Brand Colors

      Neutral Colors

      Used for:

      • Layout

      • Backgrounds

      • Text

      Examples:

      • gray-50 → gray-900

        Brand / Accent Colors

        Used for:

        • Buttons

        • Links

        • Highlights

        • Call-to-action

        Examples:

        • blue-600

        • green-600

        • red-600

        Professional UIs:

        • Use neutral colors more

        Use accent colors sparingly

      Tailwind Custom Color

      Tailwind allows adding custom colors in the configuration file and using them as utility classes. 

      <!-- tailwind.config.js -->
<script type="text/plain">
extend: {
  colors: {
    brand: '#1e40af',
  },
}
</script>

<!-- HTML Usage -->
<h1 class="text-brand">
  Brand Text
</h1>

      • This will be covered in theme customization lessons.

        Common Beginner Mistakes

        • Using random colors everywhere

        • Using very light text colors

        • Poor contrast combinations

        • Overusing bright colors

        • Ignoring hover/focus states

        Good UI is controlled, not colorful.

        Best Practices for Colors in Tailwind

        • Stick to default palette initially

        • Use gray shades for most text

        • Use one primary accent color

        • Ensure sufficient contrast

        • Be consistent across UI

      ❮ Previous Next ❯