0Pricing
Tailwind CSS Academy · Lesson

Text Color and Opacity

Apply text color utilities from Tailwind's color palette and adjust opacity to create hierarchy and contrast.

Text Color and Opacity is a free Tailwind CSS Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Tailwind CSS Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Tailwind's Color System

Tailwind ships a rich color palette: 22 colors like blue, indigo, red, and green, each with 11 shades from 50 (near-white) to 950 (near-black). Plenty to work with.

<!-- Tailwind color naming: {color}-{shade} -->
<p class="text-blue-500">Blue 500</p>
<p class="text-blue-700">Blue 700 (darker)</p>
<p class="text-blue-200">Blue 200 (lighter)</p>

Applying Text Color

Color text with text-{color}-{shade}. Low shades are light, mid are vivid, high are dark. text-gray-700 reads softly on white; text-gray-900 gives bold contrast.

<h1 class="text-gray-900">Main Heading</h1>
<h2 class="text-gray-700">Sub Heading</h2>
<p class="text-gray-600">Body text at a comfortable shade.</p>
<span class="text-gray-400">Metadata or secondary info</span>

Brand Colors in Text

Use vivid shades for meaning: text-blue-600 for links, text-red-600 for errors, text-green-600 for success. These conventions feel instantly familiar to users.

<a href="#" class="text-blue-600 hover:text-blue-800 underline">Link</a>
<p class="text-red-600">Error: Invalid email address.</p>
<p class="text-green-600">Success: Changes saved!</p>
<p class="text-yellow-700">Warning: Disk space is low.</p>

Text Opacity Modifier

Fade a color with the slash modifier: text-blue-600/50 shows blue at 50% opacity. It is cleaner than element opacity, which would dim the children too.

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

Color Contrast for Accessibility

For accessibility, text needs enough contrast — aim for a 4.5:1 ratio. Shade 700 on white usually passes; avoid light shades 50 to 400 as text on white.

<!-- Accessible: dark text on light background -->
<p class="bg-white text-gray-800">Good contrast ratio (passes WCAG AA)</p>

<!-- Inaccessible: light text on white background -->
<p class="bg-white text-gray-300">Poor contrast (fails WCAG)</p>

Text Color on Dark Backgrounds

On dark backgrounds, flip the text light: text-white or text-gray-100 for primary, text-gray-400 for secondary. That is the heart of a clean dark theme.

<div class="bg-gray-900 p-8 rounded-xl">
  <h2 class="text-white font-bold text-2xl mb-2">Dark Card</h2>
  <p class="text-gray-400 text-sm">Secondary text on dark background.</p>
  <a href="#" class="text-indigo-400 hover:text-indigo-300">Learn more</a>
</div>

Gradient Text Effect

Make a gradient text effect with bg-gradient-to-r from-* to-* plus bg-clip-text text-transparent. The gradient shows only through the letters — very modern.

<h1 class="text-5xl font-extrabold bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent">
  Gradient Headline
</h1>

Hover Color Changes

Add a hover: variant to change text color on hover — essential for links and buttons. Use transition-colors for a smooth fade, and pair it with focus:.

<a href="#"
   class="text-gray-600 hover:text-indigo-600 focus:text-indigo-600 transition-colors duration-200 font-medium">
  Hover or focus me
</a>

Semantic Color Usage

Pick a semantic palette: one color for brand, red for danger, green for success, yellow for warnings. Used consistently, color teaches users at a glance.

<div class="space-y-2">
  <p class="text-indigo-600 font-medium">Primary action</p>
  <p class="text-red-600 font-medium">Danger / Error</p>
  <p class="text-green-600 font-medium">Success / Confirmed</p>
  <p class="text-yellow-700 font-medium">Warning / Caution</p>
  <p class="text-gray-500 font-medium">Neutral / Disabled</p>
</div>

Text Color in Dark Mode

Add a dark: prefix to any text color and it kicks in during dark mode. One line of HTML serves both your light and dark themes — no duplicate markup.

<p class="text-gray-900 dark:text-gray-100">
  Adapts automatically between themes.
</p>
<p class="text-gray-500 dark:text-gray-400">
  Secondary text adapts too.
</p>

Using Arbitrary Color Values

Need a color outside the palette? Use brackets: text-[#ff5733] for an exact hex. Handy for brand colors, but use sparingly to keep your system consistent.

<!-- Arbitrary color (one-off brand match) -->
<span class="text-[#ff5733] font-bold">Brand Orange</span>

<!-- Better: define in config for reuse -->
/* tailwind.config.js theme.extend.colors.brand: '#ff5733' */
<span class="text-brand font-bold">Brand Orange</span>

Quick Check

Quick check! See how color and opacity landed. 🎨

Lesson Recap

Great! text-{color}-{shade} taps the palette, the slash sets opacity without dimming children, and dark: handles dark mode. Next up: line height and spacing.

Frequently asked questions

Is the “Text Color and Opacity” lesson free?

Yes — the full text of “Text Color and Opacity” is free to read here on the web, and the Tailwind CSS Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Tailwind CSS Academy course, upgrade to CoddyKit PRO.

What will I learn in “Text Color and Opacity”?

Apply text color utilities from Tailwind's color palette and adjust opacity to create hierarchy and contrast. You practise Tailwind CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Tailwind CSS Academy?

No prior experience is required. Tailwind CSS Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Text Color and Opacity” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Tailwind CSS Academy lesson?

Yes. Every Tailwind CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. Font Size and Font Weight
  2. Text Color and Opacity
  3. Line Height and Letter Spacing
  4. Text Alignment and Decoration
← Back to Tailwind CSS Academy