What are the new features and improvements in TailwindCSS v4.0?

TailwindCSS v4.0 is a major update that introduces many new features and improvements, further enhancing the development experience and performance.

Major New Features

1. Native CSS Support

TailwindCSS v4.0 supports using TailwindCSS features directly in CSS files without JavaScript configuration.

css
/* Use TailwindCSS directly in CSS */
@import "tailwindcss";

.button {
  @apply bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded;
}

/* Use CSS variables */
.button {
  --button-bg: theme('colors.blue.500');
  background-color: var(--button-bg);
}

2. Improved Configuration System

Configuration is more concise, supporting CSS variables as configuration sources.

css
/* Configure theme using CSS variables */
@theme {
  --color-primary: #3b82f6;
  --color-secondary: #10b981;
  --spacing-md: 1rem;
}

.button {
  background-color: var(--color-primary);
  padding: var(--spacing-md);
}

3. Faster Build Speed

Build speed is significantly improved through optimized compilers and caching mechanisms.

javascript
// Automatic cache configuration
module.exports = {
  cache: true, // Enable caching
}

4. Enhanced Type Support

Better type definitions and intelligent hints for TypeScript.

typescript
// Type-safe configuration
import type { Config } from 'tailwindcss';

const config: Config = {
  content: ['./src/**/*.{html,js,ts,jsx,tsx}'],
  theme: {
    extend: {
      colors: {
        primary: '#3b82f6',
      },
    },
  },
};

New Features

1. Container Queries

Native support for container queries, enabling responsive design based on parent container size.

html
<div class="@container">
  <div class="@sm:w-1/2 @lg:w-1/3">
    Container-based responsive layout
  </div>
</div>

2. Improved Dark Mode

More flexible dark mode configuration, supporting automatic detection and manual switching.

css
/* Auto-detect system preference */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #1f2937;
    --text-color: #f9fafb;
  }
}

/* Manual switch */
.dark {
  --bg-color: #1f2937;
  --text-color: #f9fafb;
}

3. New Utility Classes

Many new practical utility classes added to improve development efficiency.

html
<!-- Text truncation -->
<div class="line-clamp-3">
  Text over three lines will be truncated...
</div>

<!-- Scroll snap -->
<div class="snap-x snap-mandatory flex overflow-x-auto">
  <div class="snap-center">Item 1</div>
  <div class="snap-center">Item 2</div>
</div>

<!-- Aspect ratio -->
<div class="aspect-video">
  16:9 ratio container
</div>

Performance Improvements

1. Smaller File Size

Further reduced final file size through optimized CSS generation algorithms.

javascript
// Automatic optimization
module.exports = {
  optimize: true, // Enable optimization
}

2. Faster JIT Compilation

Improved JIT compiler with over 50% faster compilation speed.

javascript
// JIT configuration
module.exports = {
  mode: 'jit',
  jit: {
    // Improved JIT options
  },
}

3. Smart Caching

Smart caching mechanism to avoid repeated compilation.

javascript
// Cache configuration
module.exports = {
  cache: {
    type: 'filesystem',
    cacheDirectory: './.cache/tailwindcss',
  },
}

Development Experience Improvements

1. Better Error Messages

Improved error messages for easier problem identification and resolution.

javascript
// Detailed error information
Error: Unknown utility class 'unknown-class'
  at line 10, column 5 in src/App.js

2. Improved IntelliSense

Enhanced VS Code extension providing more accurate intelligent hints.

json
// .vscode/settings.json
{
  "tailwindCSS.experimental.classRegex": [
    ["className=\"([^`]*)\"", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
  ],
  "tailwindCSS.suggestions": true
}

3. Better Documentation

Redesigned official documentation that is easier to search and learn.

Migration Guide

Migrating from v3.x to v4.0

1. Update Dependencies

bash
npm install tailwindcss@latest

1. Update Configuration File

javascript
// tailwind.config.js
module.exports = {
  // v4.0 configuration
  content: ['./src/**/*.{html,js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

1. Check Breaking Changes

• Some deprecated class names have been removed
• Configuration file format has changed
• Plugin APIs may need adjustment

Common Migration Issues

Issue 1: Some class names no longer work

javascript
// Solution: Use new class names or customize
module.exports = {
  theme: {
    extend: {
      // Add custom class names
    },
  },
}

Issue 2: Build speed becomes slower

javascript
// Solution: Enable caching
module.exports = {
  cache: true,
}

Issue 3: Plugin incompatibility

javascript
// Solution: Update plugins to latest version
npm update @tailwindcss/forms @tailwindcss/typography

Best Practices

1. Use New Features

Fully utilize v4.0 new features to improve development efficiency.

css
/* Use native CSS support */
@import "tailwindcss";

/* Use container queries */
@container {
  .responsive {
    @apply @sm:w-1/2 @lg:w-1/3;
  }
}

2. Optimize Configuration

Simplify configuration, use CSS variables.

css
@theme {
  --color-primary: #3b82f6;
  --color-secondary: #10b981;
}

3. Enable Caching

Ensure build speed.

javascript
module.exports = {
  cache: true,
}

Future Outlook

TailwindCSS v4.0 lays the foundation for future development, including:

• Better performance optimization
• More native CSS feature support
• Improved development tools
• Stronger type safety

Considerations

1. Version Compatibility: Ensure project dependencies are compatible with v4.0
2. Test Coverage: Thoroughly test migrated code
3. Team Training: Provide v4.0 new features training for the team
4. Gradual Migration: Consider gradual migration strategy to reduce risk