Shift with red gradient lettering

Upgrade Tailwind 2.x to Tailwind 3.x

The Tailwind 3.x Shift automates the upgrade of your project from Tailwind 2.x to Tailwind 3.x. This includes all of the changes listed in the Upgrade Guide.

The Tailwind 3.x Shift upgrades your Tailwind configuration file, replaces utility class references, adopts the new color palette, and much more.

Using the Tailwind 3.x Shift to automatically upgrade your Tailwind project has an estimated time savings of 2 hours.

Tailwind 3.x is the latest release. This means both Tailwind and the Tailwind 3.x Shift will continue to receive updates. You may check the Tailwind blog for any important updates.

Screenshot of a pull request with automated changes from the Tailwind 3.x Shift

Watch a demo

Requirements

Core Upgrades

The Tailwind 3.x Shift automates many of the upgrades listed in the Tailwind Upgrade Guide, including:

  • Bumping package.json for Tailwind 3.x.
  • Updating the tailwindcss/typography and tailwindcss/forms plugins.
  • Removing instances of old Tailwind utility classes.
  • Converting old Tailwind utility classes.
  • Changing Tailwind configuration option key names.
  • Converting screens to new variants.

Additional Upgrades

In addition to the Core Upgrades, the Tailwind 3.x Shift automates optional upgrades listed in the Tailwind Upgrade Guide, including:

  • Enabling the new Tailwind Just-in-Time (JIT) mode.
  • Adopting the new Tailwind 3.x color palette (configurable).
  • Optimizing your Tailwind config file.

Manual Upgrades

There are some upgrades the Tailwind 3.x Shift can not perform automatically. When Shift detects these it adds a detailed comment to the Pull Request to guide any additional steps you may need to do manually.

Custom Configuration

By default, Shift will look for the Tailwind config file to determine your project path. This will be used as the base path when searching for additional assets and templates.

When not specified, Shift will assume a Laravel project structure. If you are not using a Tailwind configuration file or have a different project structure, you may configure Shift for your project.

Sign in with any of the following services to connect Shift with your Laravel project.


Don't use one of these services?

Temporarily push your project to a free, private repository on one of these cloud-based services or upgrade your project locally with Shift for Docker.