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

What Is New in Tailwind CSS 3.3

How does Tailwind CSS 3.3 extend the color palette for dark mode?

Tailwind CSS 3.3 adds a 950 shade to every default color, giving you ultra-dark options for true dark-mode designs.

This extra shade sits between the existing 900 and pure black, making it easy to create high-contrast text and subtle UI surfaces without resorting to custom colors.

class="bg-gray-950 text-gray-100"

In practice you can now replace ad-hoc #111 values with bg-slate-950 or bg-indigo-950, keeping your design system consistent.

Can I write my Tailwind config as an ES module or in TypeScript?

Yes, Tailwind 3.3 natively supports ESM and TypeScript configuration files.

Running npx tailwindcss init --esm creates a tailwind.config.mjs that uses export default, while --ts generates a tailwind.config.ts with full type safety.

/* @type {import('tailwindcss').Config} */export default {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
};

Behind the scenes Tailwind uses jiti and Sucrase to transpile the config on the fly, so you don't need a separate build step.

How can I simplify RTL support with logical properties in Tailwind 3.3?

Tailwind 3.3 introduces logical-property utilities that automatically adapt to left-to-right or right-to-left layouts.

Replace ml-3 rtl:mr-3 with a single ms-3 (margin-inline-start) and me-3 (margin-inline-end). The same pattern applies to padding, inset, border-width, border-color, border-radius, and scroll-margin/padding.

class="ms-4 me-2 ps-3 pe-3 rounded-s-lg rounded-e-md"

These utilities can still be combined with the ltr: and rtl: variants when you need explicit overrides.

What new utilities does Tailwind 3.3 provide for gradients, line-clamp, line-height and CSS variables?

Tailwind 3.3 adds fine-grained control over gradients, built-in line-clamp, a line-height shorthand, and a shorthand for CSS variables.

• Gradient stops: from-5%, via-35%, to-85% (0-100% in 5% steps) or any arbitrary value like from-[21.56%].
• Line-clamp: use line-clamp-3 to truncate multi-line text without a plugin.
• Line-height shorthand: combine font size and line height with text-lg/7 or arbitrary values like text-sm/[17px].
• CSS variable shorthand: omit var() in arbitrary values, e.g. bg-[--brand-color] and hover:bg-[--brand-hover-color].

class="bg-gradient-to-r from-indigo-500 from-10% via-purple-500 via-30% to-pink-500 to-90% line-clamp-4 text-lg/7 bg-[--brand-color] hover:bg-[--brand-hover-color]"

These utilities reduce the need for custom CSS and keep your design tokens in one place.