Tailwind css tutorial Hindi #5 Working with Colors

Working with Colors in Tailwind

•Apply colors on html elements

Use Tailwind color utility classes on elements like text, background, border, etc.

Example to set background color: <div class="bg-blue-500">...</div>

Example to set text color: <p class="text-red-700">Hello</p>

• How many colors tailwind support by default

Tailwind includes a default palette with about 17 color families (like blue, red, green, gray).

Each color family has multiple shades, allowing lots of flexibility without custom colors.

• Check shades in tailwind colors

Shades range typically from 50 (lightest) to 900 (darkest).

Example: blue-50 (very light), blue-500 (medium), blue-900 (very dark).

•Colors shades range

Most colors have 10 shades: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900.

This range helps you pick the exact tone for your design needs.

•How to remember colors with different properties in tailwind

Tailwind uses prefixes to differentiate color usage:

bg- for background colors (e.g., bg-green-300)

text- for text colors (e.g., text-yellow-700)

border- for border colors (e.g., border-purple-500)

• Interview questions

 Which colors do not have shades in tailwind.?

 how to apply color to underline in css.?