Tailwind CSS v4 vs v3: What's New in 1970

A complete comparison of Tailwind v4 and v3. Discover the new CSS-first configuration, 10x faster builds, 3D transforms, and whether you should upgrade.

Last updated: April 19, 2026

⚡ TL;DR - Quick Recommendation

Choose Tailwind v4 if:

+Starting a new project in 1970
+You want faster build times (up to 10x)
+You need CSS variables for runtime theming
+You want built-in container queries
+Your audience uses modern browsers

Stay on Tailwind v3 if:

+You need legacy browser support (IE11)
+You rely on v3-only plugins that haven't updated
+Your project is in a critical phase
+You have complex custom configurations
+You don't have time to test the migration

Quick Comparison

Aspect	Tailwind v4	Tailwind v3	Winner
Configuration	CSS-first (@theme directive)	JavaScript (tailwind.config.js)	v4
CSS Variables	Native, runtime accessible	Compiled to static values	v4
Build Speed	Up to 10x faster (Oxide engine)	Fast (JIT compiler)	v4
Bundle Size	Smaller with CSS variables	Good with PurgeCSS	v4
Container Queries	Built-in	Requires plugin	v4
3D Transforms	Native utilities	Limited, custom CSS needed	v4
Browser Support	Modern browsers only	Wider legacy support	v3
Ecosystem Maturity	Growing, some plugins updating	Mature, extensive plugins	v3

1. CSS-First Configurationv4 Winner

Tailwind v4

Configuration moves to CSS using the @theme directive. Your design tokens live alongside your styles, making them portable and shareable.

+ No JavaScript config file needed
+ Design tokens accessible anywhere in CSS
+ Easier to share themes across projects
+ Cleaner project structure

Tailwind v3

Uses a JavaScript tailwind.config.js file for all configuration. This approach is familiar but separates config from styles.

+ Familiar JavaScript syntax
+ Programmatic configuration possible
- Config separate from styles
- Harder to share design tokens

2. Native CSS Variablesv4 Winner

Tailwind v4

All design tokens (colors, spacing, fonts) are CSS custom properties. This enables runtime theming, easy access in custom CSS, and smaller output.

+ Runtime theme switching
+ Access tokens in custom CSS
+ Smaller CSS output
+ DevTools shows variable names

Tailwind v3

Values are compiled to static CSS at build time. The theme() function works in config but not in custom CSS output by default.

+ Smaller CSS output
+ Works everywhere
- No runtime theming
- Cannot use tokens in custom CSS easily

3. Performance (Oxide Engine)v4 Winner

Tailwind v4

Built on the new Oxide engine, written in Rust. Dramatically faster builds, especially for large projects.

Build Speed:

Up to 10x faster

Tailwind v3

JavaScript-based engine with JIT compilation. Fast, but not as optimized as the new Rust-based Oxide engine.

Build Speed:

Good (baseline)

4. Container Queries Built-in

Tailwind v4Built-in

Container queries are first-class citizens. Use @container and @lg: variants without any plugins.

+ No plugin required
+ Works out of the box
+ Same syntax as v3 plugin

Tailwind v3

Requires the @tailwindcss/container-queries plugin. Additional installation and configuration needed.

- Plugin installation required
- Extra config step
+ Same syntax as v4

5. 3D Transforms

Tailwind v4Native

Full 3D transform support with utilities like rotate-x-45, rotate-y-12, perspective-500.

+ rotate-x, rotate-y, rotate-z utilities
+ perspective utilities
+ transform-style-3d
+ backface-visibility utilities

Tailwind v3

Limited to 2D transforms. 3D effects require custom CSS or arbitrary values.

+ 2D rotate, scale, translate, skew
- No 3D rotation utilities
- No perspective utilities
- Custom CSS needed for 3D

6. @starting-style Support (Entry Animations)

Tailwind v4New

Use the starting: variant to define initial styles for CSS entry animations.

+ starting:opacity-0 for fade-in
+ starting:scale-95 for zoom-in
+ Pure CSS, no JavaScript needed
+ Great for modals, popovers

Tailwind v3

No @starting-style support. Entry animations require JavaScript or CSS animation keyframes.

- JavaScript required for entry states
- Complex keyframe workarounds
- More code for same effect

Breaking Changes in v4

Removed Deprecated Utilities

flex-shrink-* replaced with shrink-*
flex-grow-* replaced with grow-*
overflow-ellipsis replaced with text-ellipsis
decoration-slice replaced with box-decoration-slice

Configuration Changes

No more tailwind.config.js - use CSS @theme instead
Plugins use @plugin directive in CSS
Content paths defined in build tool config, not Tailwind
Some theme() function calls need updating

Browser Requirements

Tailwind v4 requires modern browsers with CSS custom properties and other modern CSS features. IE11 and older browsers are not supported. Check your analytics before upgrading if you have users on legacy browsers.

Migration Guide Summary

Step 1: Run the Upgrade Tool

npx @tailwindcss/upgrade

This automatically converts your config, updates deprecated classes, and migrates your PostCSS setup.

Step 2: Review Changes

Check the generated @theme block in your CSS
Verify plugin migrations (@plugin directives)
Review any manual changes flagged by the tool

Step 3: Test Thoroughly

Check responsive breakpoints
Verify dark mode functionality
Test hover/focus states
Check any custom component styles

Side-by-Side Code Examples

Tailwind v3

// tailwind.config.js
module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#eff6ff',
          500: '#3b82f6',
          900: '#1e3a8a',
        },
      },
      spacing: {
        '128': '32rem',
      },
      fontFamily: {
        display: ['Inter', 'sans-serif'],
      },
    },
  },
  plugins: [
    require('@tailwindcss/typography'),
    require('@tailwindcss/forms'),
  ],
}

Tailwind v4

/* app.css */
@import "tailwindcss";

@theme {
  --color-brand-50: #eff6ff;
  --color-brand-500: #3b82f6;
  --color-brand-900: #1e3a8a;

  --spacing-128: 32rem;

  --font-display: "Inter", sans-serif;
}

@plugin "@tailwindcss/typography";
@plugin "@tailwindcss/forms";

Key difference: v4 moves configuration from JavaScript to CSS. The @theme directive replaces tailwind.config.js, making your design tokens portable and easier to share.

Should You Upgrade?

For new projects in 1970, Tailwind CSS v4 is the clear choice. The CSS-first configuration is more intuitive, builds are significantly faster, and new features like container queries and 3D transforms are built-in.

For existing v3 projects, consider upgrading if:

Build performance is becoming a bottleneck
You need native CSS variables for theming
You want built-in container queries
Your project only supports modern browsers
You have time to test and verify the migration

Hold off on upgrading if:

You rely on v3-only plugins that have not been updated
You need legacy browser support
Your project is in a critical phase with no room for risk
You have complex custom configurations

The upgrade tool makes migration straightforward for most projects. Run it, review the changes, and test thoroughly. The improvements in v4 are worth the migration effort for most teams.

Frequently Asked Questions

Should I upgrade from Tailwind v3 to v4?

For new projects, absolutely use Tailwind v4. For existing v3 projects, consider upgrading if you want faster builds (up to 10x), native CSS variables, built-in container queries, or the new CSS-first configuration. Hold off if you rely on v3-only plugins or need legacy browser support.

What are the biggest changes in Tailwind v4?

The biggest changes are: 1) CSS-first configuration using @theme instead of tailwind.config.js, 2) The Oxide engine written in Rust for 10x faster builds, 3) Native CSS variables for all design tokens, 4) Built-in container queries, 5) 3D transform utilities, and 6) @starting-style support for entry animations.

Will my existing Tailwind v3 code work in v4?

Most v3 code will work in v4. However, some deprecated utilities have been removed (like flex-shrink-* replaced with shrink-*). The upgrade tool (npx @tailwindcss/upgrade) automatically converts most of your code and flags anything that needs manual attention.

How do I migrate from Tailwind v3 to v4?

Run 'npx @tailwindcss/upgrade' in your project. This tool automatically converts your config to CSS @theme, updates deprecated classes, and migrates your PostCSS setup. After running it, review the changes and test thoroughly.

Does Tailwind v4 work with React, Vue, and Next.js?

Yes, Tailwind v4 works with all major frameworks. For Vite-based projects, use the @tailwindcss/vite plugin for the best experience. For Next.js and other frameworks, update your PostCSS configuration as needed.

What happened to tailwind.config.js in v4?

In Tailwind v4, configuration moves from JavaScript (tailwind.config.js) to CSS using the @theme directive. This makes your design tokens portable, shareable, and directly accessible in your CSS. The upgrade tool automatically converts your existing config.

Are Tailwind plugins compatible with v4?

Many plugins need updates for v4 compatibility. Official plugins like @tailwindcss/typography and @tailwindcss/forms have been updated. For third-party plugins, check if they support v4 or use the @plugin directive in your CSS to load them.

Master Tailwind CSS with Frontend Hero

Whether you use Tailwind v3 or v4, Frontend Hero helps you inspect, extract, and convert Tailwind classes from any website. Get 11 developer tools in one extension.

Get Frontend Hero now →

Tailwind v4 spacing cheatsheet →

Tailwind CSS v4 vs v3: What's New in 1970

⚡ TL;DR - Quick Recommendation

Choose Tailwind v4 if:

Stay on Tailwind v3 if:

Quick Comparison

1. CSS-First Configurationv4 Winner

Tailwind v4

Tailwind v3

2. Native CSS Variablesv4 Winner

Tailwind v4

Tailwind v3

3. Performance (Oxide Engine)v4 Winner

Tailwind v4

Tailwind v3

4. Container Queries Built-in

Tailwind v4Built-in

Tailwind v3

5. 3D Transforms

Tailwind v4Native

Tailwind v3

6. @starting-style Support (Entry Animations)

Tailwind v4New

Tailwind v3

Breaking Changes in v4

Removed Deprecated Utilities

Configuration Changes

Browser Requirements

Migration Guide Summary

Step 1: Run the Upgrade Tool

Step 2: Review Changes

Step 3: Test Thoroughly

Side-by-Side Code Examples

Tailwind v3

Tailwind v4

Should You Upgrade?

Frequently Asked Questions

More Extension Comparisons

Best Color Pickers

Best CSS Inspectors

Best Page Rulers

Best Screenshot Tools

Best Image Downloaders

Best Font Identifiers

Best Tailwind Tools

Best Palette Extractors

Best Developer Tools

ColorZilla Alternatives

WhatFont Alternatives

CSS Peeper Alternatives

Eye Dropper Alternatives

Site Palette Alternatives

Tailscan Alternatives

ColorZilla vs Eye Dropper

WhatFont vs Fontanello

CSS Peeper vs VisBug

Tailwind vs CSS Modules

Styled Components vs Tailwind

Flexbox vs CSS Grid

Tailwind vs Bootstrap

rem vs em vs px

CSS Scan vs Frontend Hero

Tailscan vs Frontend Hero

For React Developers

For Tailwind Users

For Freelancers

25 Must-Have Extensions

All-in-One Extensions

Too Many Extensions?

Free vs Paid

Animation Libraries

Page Ruler Alternatives

Grid Inspector Alternatives

CSS Scan Alternatives

VisBug Alternatives

GoFullPage Alternatives

Fonts Ninja Alternatives

ColorZilla vs Frontend Hero

CSS Peeper vs Frontend Hero

Tailwind vs Chakra UI

DaisyUI vs shadcn/ui