Tailwindmarkup~30 mins

Default color palette and shades in Tailwind - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Default Color Palette and Shades with Tailwind CSS

📖 Scenario: You are creating a simple webpage to display the default Tailwind CSS color palette. This will help you understand how to use Tailwind's built-in colors and their shades.

🎯 Goal: Build a webpage that shows color blocks for the default Tailwind CSS colors and their shades. Each block should have the color as background and the shade number as text.

📋 What You'll Learn

Create a basic HTML structure with <main> to hold color blocks

Use Tailwind CSS default color classes for background colors

Display at least three colors with three shades each

Add text inside each color block showing the shade number

Make the layout responsive using Tailwind's grid utilities

💡 Why This Matters

🌍 Real World

Designers and developers often use Tailwind CSS's default color palette to quickly style websites with consistent colors and shades.

💼 Career

Understanding how to use Tailwind's color utilities and responsive grid system is essential for frontend developers building modern, accessible, and responsive web interfaces.

Progress0 / 4 steps

Set up the HTML skeleton with Tailwind CSS

Create a basic HTML5 page with lang="en", charset="UTF-8", and viewport meta tags. Add a <main> element with the class p-6 to hold the color blocks.

Tailwind




  
  
  Tailwind Colors

Need a hint?

Remember to include the Tailwind CSS CDN link inside the <head> section.

Add a grid container for color blocks

Inside the <main> element, add a div with the classes grid grid-cols-3 gap-4 to create a grid with three columns and spacing between items.

Tailwind




  
  
  Tailwind Colors

Need a hint?

Use Tailwind's grid classes to create a 3-column layout with gaps.

Add color blocks for three colors with three shades each

Inside the div with class grid grid-cols-3 gap-4, add nine div elements. Each should have a background color class from Tailwind's default palette: bg-red-500, bg-red-700, bg-red-900, bg-green-500, bg-green-700, bg-green-900, bg-blue-500, bg-blue-700, and bg-blue-900. Each block should have the classes h-24 flex items-center justify-center text-white font-semibold rounded and contain text showing the shade number (e.g., "500", "700", "900").

Tailwind




  
  
  Tailwind Colors

Need a hint?

Use Tailwind's background color classes and flex utilities to center the shade number text inside each block.

Make the grid responsive and add accessible text

Modify the div with class grid grid-cols-3 gap-4 to add responsive classes sm:grid-cols-1 md:grid-cols-3 so it shows one column on small screens and three columns on medium and larger screens. Also, add aria-label="Color palette grid" to this div for accessibility.

Tailwind




  
  
  Tailwind Colors

Need a hint?

Use Tailwind's responsive grid classes and add an aria-label attribute for accessibility.