Tailwind CSS 2.0: What's New, Release History & EOL Status

What Is New in Tailwind CSS 2.0

How does Tailwind CSS 2.0 enable dark mode?

Tailwind CSS 2.0 adds native dark-mode support that can be toggled with the dark: prefix.

Set darkMode: "media" (or "class") in tailwind.config.js and then prefix any utility with dark: to apply it only when dark mode is active.

<div class="bg-white dark:bg-black">
  <h1 class="text-gray-900 dark:text-white">Dark mode</h1>
  <p class="text-gray-500 dark:text-gray-300">The feature you've all been waiting for.</p>
</div>

This works with hover, focus, and responsive variants as well.

What's new in the Tailwind CSS 2.0 color palette and how can I customize it?

Tailwind CSS 2.0 introduces a 22-color palette with ten shades each (50-900), giving you 220 colors out of the box.

The palette lives in the tailwindcss/colors module, so you can import it and replace or extend any color family in tailwind.config.js.

const colors = require('tailwindcss/colors')
module.exports = {
  theme: {
    colors: {
      gray: colors.trueGray,
      indigo: colors.indigo,
      red: colors.rose,
      yellow: colors.amber,
    },
  },
}

Use the new bg-gray-50 or text-indigo-600 utilities just like before, but now you have finer control over light and dark shades.

How have spacing, typography, and opacity scales been expanded in v2.0?

Tailwind CSS 2.0 adds micro-spacing values (e.g., 0.5, 1.5, 2.5, 3.5) and larger utilities (72, 80, 96) for padding, margin, inset, and translate.

• New typography sizes 7xl, 8xl, 9xl for massive headlines.
• Opacity scale now includes steps of 5 and 95, plus a 5 value for ultra-transparent elements.

<span class="ml-0.5">Just a little nudge.</span>
<div class="p-96">This is too much padding.</div>
<h1 class="text-9xl font-bold">What is this, an Apple website?</h1>
<figure class="opacity-5">...</figure>

All inset and translate utilities now accept the full spacing scale, enabling precise positioning without custom CSS.

What are the new outline ring utilities and the official forms plugin?

Tailwind CSS 2.0 replaces the problematic outline property with ring utilities that render as box-shadows and respect border radius.

Use focus:ring-2 focus:ring-blue-300 focus:ring-opacity-50 to create a focus ring, and optionally add ring-offset-2 for a halo effect.

<button class="focus:ring-2 focus:ring-blue-300 focus:ring-opacity-50 focus:outline-none">Click me</button>

The new @tailwindcss/forms plugin normalizes form controls and makes them easy to style with utilities alone.

module.exports = {
  plugins: [require('@tailwindcss/forms')],
}

After installing, a checkbox can be styled like class="h-4 w-4 rounded border-gray-300 text-indigo-500 focus:ring-2 focus:ring-indigo-200" without any custom CSS.