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

What Is New in Tailwind CSS 3.0

What is the impact of the always-on Just-in-Time engine in Tailwind CSS 3.0?

The JIT engine now runs by default, delivering instant rebuilds and dramatically smaller CSS bundles.

• Build times drop from seconds to milliseconds in most projects.
• Only the utilities you actually use are generated, keeping the final CSS lean.
• Stackable variants (e.g., hover:focus:) become trivial because the engine resolves them on the fly.

npm install -D tailwindcss@latest postcss autoprefixer

In practice you no longer need to configure a separate "watch" mode; Tailwind watches your source files automatically.

How does Tailwind CSS 3.0 expand the default color system?

All extended palette colors are shipped enabled out of the box, giving you fifty shades of gray plus cyan, rose, fuchsia, lime, sky, and more.

• Use any shade directly: bg-cyan-500, text-rose-200, etc.
• No need to manually enable extended colors in tailwind.config.js.
• Opacity utilities work with the new / syntax, e.g., bg-gray-500/30.

This matters if you previously trimmed the palette to reduce file size; the JIT engine now handles the larger set without penalty.

Which new layout utilities does Tailwind CSS 3.0 introduce for complex designs?

Version 3.0 adds scroll-snap, multi-column, and aspect-ratio utilities, plus portrait/landscape and RTL/LTR modifiers.

• Scroll snap: snap-x snap-center to create carousel-like experiences.
• Multi-column: columns-1 sm:columns-3 for newspaper-style layouts.
• Aspect ratio: aspect-video replaces padding-hack tricks.
• Orientation modifiers: portrait:hidden and landscape:hidden.
• Direction modifiers: rtl:ml-4 and ltr:mr-4 for bidirectional sites.

These utilities are composable with existing responsive prefixes, so you can build sophisticated layouts without writing custom CSS.

What are the new styling capabilities for native form controls and print media?

You can now style checkboxes, radios, and file inputs with the accent-color and file: modifiers, and control print output with the print: prefix.

<input type="checkbox" class="accent-violet-500" checked />
<input type="file" class="file:mr-4 file:rounded-full file:bg-violet-50 file:text-violet-700" />
<div class="print:hidden">Screen only content</div>
<div class="hidden print:block">Print only content</div>

• Accent color aligns native controls with your brand palette.
• File input utilities let you customize button appearance without extra markup.
• Print utilities let you hide or reveal elements when the page is printed.

Most teams will replace custom JavaScript form styling with these utilities, reducing bundle size and maintenance overhead.