Upgrade to Tailwind CSS 3.4+

A complete guide to help you upgrade from previous versions of Tailwind CSS, including new features and breaking changes.

Upgrade Process

1. Check Current Version

Run npm list tailwindcss to confirm your current version.

2. Update Package

Run npm install tailwindcss@latest to install the latest version.

3. Review Breaking Changes

Inspect the breaking changes section below for required adjustments.

Breaking Changes in 3.4

Deprecated default` Config Option

Replace theme.extend.default with the new theme.defaults configuration format in your tailwind.config.js.

Safari 14+ Only Support

Tailwind CSS 3.4 no longer includes polyfills for older Safari browsers. Update your project to support modern Safari features.

Renamed Formatters

The line-clamp utility is now named line-clamp-1 to align with the new naming convention for values.

Utility Format Changes

hover:[@media(hover)]:text-red-600 should now be written as group-hover/[@media(hover)] when using nested pseudo-classes.

Example Configuration Updates

Before

module.exports = {
  theme: {
    extend: {
      default: ['hover', 'focus'],
    },
  },
};

After

module.exports = {
  theme: {
    defaults: {
      hover: ['focus'],
    },
  },
};

Migration Tools

CLI Command

Run npx tailwindcss -i ./src/index.css -o ./dist/output.css --watch to compile your CSS.

View CLI documentation →

Config Validator

Use npx tailwindcss config:validate to check your configuration for issues.

Validate your config →

Need Help?

Join our developer community or check our migration blog posts for step-by-step guides.