Colors & Dark Mode

Tailwind includes an expert-curated color palette with 22 default color families, each containing 11 shades (50 to 950).

Tailwind Color Utilities

• bg-{color}-{shade} - Background color (e.g. bg-blue-500)
• text-{color}-{shade} - Text color (e.g. text-slate-800)
• border-{color}-{shade} - Border color (e.g. border-emerald-400)
• ring-{color}-{shade} - Focus ring color (e.g. ring-indigo-300)

Color Opacity Modifiers

You can append /{opacity} to any color utility to quickly adjust its transparency without needing RGBA variables!

Implementing Dark Mode

Tailwind includes a powerful dark: variant modifier. When enabled, any class prefixed with dark: will apply when dark mode is active.

Configuration (`tailwind.config.js`):

module.exports = {
  darkMode: 'class', // Use 'class' strategy for manual toggle, or 'media' for OS preferences
  content: ['./src/**/*.{js,ts,jsx,tsx}'],
  theme: { extend: {} },
}

Dark Mode Component Code Example:

<div className="bg-white text-gray-900 dark:bg-gray-900 dark:text-white p-6 rounded-xl shadow-lg border border-gray-200 dark:border-gray-800">
  <h3 className="text-xl font-bold">Dark Mode Compatible Card</h3>
  <p className="text-gray-600 dark:text-gray-400 mt-2">
    This card automatically adapts its background, text color, and border when dark mode is toggled!
  </p>
</div>