Shift with red gradient lettering

Upgrade Tailwind UI 1.x to Tailwind UI 2.x

The Tailwind UI Shift automates the changes for upgrading from Tailwind UI 1.x to Tailwind UI 2.x. This includes all of the changes for Tailwind UI for Tailwind 2.x.

This includes upgrading your Tailwind configuration file, bumping your dependencies, replacing utility class references, and much more.

The Tailwind UI Shift does not change your markup. It changes the styles so they match the new Tailwind UI components.

The Tailwind UI Shift does not include all changes for upgrading to Tailwind 2.x. You should run the Tailwind 2.x Shift first, or implement the changes in the Tailwind Upgrade Guide.

Using the Tailwind UI Shift to automatically upgrade your project has an estimated time savings of 1 hour.

Screenshot of a pull request with automated changes from the Tailwind UI Shift

Watch a demo

Requirements

  • Running Tailwind 2.x (configurable for any project).
  • A project using Tailwind UI 1.x.

Automated Upgrades

The Tailwind UI Shift automates many of the changes for upgrading Tailwind UI for Tailwind CSS 2.x, including:

  • Removing the @tailwindcss/ui plugin.
  • Adding the new first-party Tailwind plugins.
  • Converting max-content and min-content utilities.
  • Updating form-* elements.
  • Reviewing uses of fractional padding values.
  • Replacing focus with ring utilities.
  • Removing transitions for interactive elements.
  • Enabling new Tailwind UI variants.
  • Bumping package.json for Tailwind UI.

Manual Upgrades

There are some upgrades the Tailwind UI 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.