Colors and Backgrounds

🧑‍🏫 Sabse pehle — simple mein samjho#

Tailwind mein ek bohot hi khoobsurat built-in color palette hota hai. Har color ke aage ek number lagta hai (50 se leke 950 tak) jo uski lightness ya darkness batata hai. Jaise bg-red-500 ek normal laal color hai, par bg-red-900 ekdam dark maroon type ka laal hoga. Ye same numbers background (bg-), text (text-), border (border-) sab jagah use hote hain.

Applying Colors#

The syntax always follows the pattern: {property}-{color}-{shade}.

• Text Color: text-blue-600, text-gray-900, text-white
• Background Color: bg-green-500, bg-black, bg-transparent
• Border Color: border-red-400

The Shade Scale#

The color palette scales from 50 (lightest) to 950 (darkest).

• 50 - 100: Great for subtle background highlights.
• 400 - 500 - 600: Ideal for primary brand colors and active buttons.
• 800 - 900 - 950: Best suited for deep text colors or dark mode backgrounds.

Opacity (Transparency)#

In older versions of Tailwind, you adjusted opacity by appending a separate class like bg-opacity-50. In modern Tailwind (v3 and v4), you simply append a forward slash / followed by the percentage directly to the color class!

• bg-blue-500/50 (Applies a blue background at 50% opacity)
• text-black/75 (Black text at 75% opacity)

Gradients#

Tailwind makes CSS gradients incredibly intuitive. You define the direction, the starting color, and the ending color (and optionally a middle color).

1. Set the direction: bg-gradient-to-r (to right), bg-gradient-to-b (to bottom), bg-gradient-to-tr (to top-right).
2. Set the start color: from-blue-500
3. Set the middle color (Optional): via-purple-500
4. Set the end color: to-pink-500

<!-- Try changing the gradient colors, opacity (/50), or text colors! -->
<div class="relative max-w-sm mx-auto p-8 rounded-2xl overflow-hidden shadow-2xl">
  <!-- Gradient Background -->
  <div class="absolute inset-0 bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500"></div>
  
  <!-- Content -->
  <div class="relative z-10 bg-white/20 backdrop-blur-md border border-white/30 p-6 rounded-xl">
    <h3 class="text-xl font-bold text-white mb-2 shadow-sm">Beautiful Colors</h3>
    <p class="text-white/90 text-sm">
      This card uses a background gradient, combined with a semi-transparent white container (bg-white/20) and text opacity (text-white/90) to create a glassmorphism effect.
    </p>
  </div>
</div>

Background Images and Properties#

• bg-[url('/image.png')] (Arbitrary syntax to load custom images)
• bg-cover (Scales the background image to cover the element entirely)
• bg-contain (Scales the image to fit without clipping)
• bg-center (Centers the background image)
• bg-no-repeat (Prevents the background from tiling)