Shift with red gradient lettering

Upgrade Tailwind 1.x to Tailwind 2.x

The Tailwind 2.x Shift automates the upgrade of your project from Tailwind 1.x to Tailwind 2.x. Using the Tailwind 2.x Shift to automatically upgrade your project has an estimated time savings of 4 hours.

Tailwind 2.x is the latest stable release. This means both Tailwind and the Tailwind 2.x Shift will continue to receive updates.

Screenshot of a pull request with atomic commits for each change of the Tailwind 2.x Shift

Watch a demo

Requirements

  • A project running Tailwind 1.x.
  • Running Node.js 12.13 or higher.

Core Upgrades

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

  • Removing instances of old Tailwind utility classes.
  • Converting old Tailwind utility classes.
  • Bumping package.json for Tailwind 2.x.
  • Adding PostCSS and autoprefixer dependencies.
  • Updating the tailwindcss/typography and tailwindcss/forms plugins.
  • Enabling new Tailwind 2.x variants.
  • Changing Tailwind configuration option key names.
  • Restructuring your Tailwind config file.
  • Modernizing @apply statements.
  • Stripping theme() array dereferences.
  • Prefixing keyframe animations.

Additional Upgrades

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

Manual Upgrades

There are some upgrades the Tailwind 2.x Shift can not perform automatically. When Shift detects these it adds a detailed comment on the Pull Request to help guide any additional upgrade steps.

In addition, if you are using Tailwind UI within your project, you may also run the Tailwind UI Shift to complete the upgrade to Tailwind 2.x.

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. If you are not using a Tailwind configuration file and have a complex project structure, you may configure Shift with your project paths.

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.