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. This includes all of the changes listed in the Tailwind Upgrade Guide.
This includes upgrading your Tailwind configuration file, replacing utility class references, adopting the new color palette, and much more.
Using the Tailwind 2.x Shift to automatically upgrade your project has an estimated time savings of 4 hours.
Watch a demo
Requirements
- Running Tailwind 1.x (configurable for any project).
- 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:
- Bumping
package.jsonfor Tailwind 2.x. - Adding PostCSS and autoprefixer dependencies.
- Updating the tailwindcss/typography and tailwindcss/forms plugins.
- Removing instances of old Tailwind utility classes.
- Converting old Tailwind utility classes.
- Enabling new Tailwind 2.x variants.
- Changing Tailwind configuration option key names.
- Adding leading utilities to responsive text elements.
- Modernizing
@applystatements. - Stripping
theme()array dereferences. - Prefixing keyframe animations.
- Converting
screensto new variants.
Additional Upgrades
In addition to the Core Upgrades, the Tailwind 2.x Shift automates optional upgrades listed in the Tailwind Upgrade Guide, including:
- Automating the changes for tailwindcss/typography and tailwindcss/forms plugins.
- Updating configuration options for PurgeCSS 3.0.
- Adopting the new Tailwind 2.x color palette (configurable).
- Optimizing your Tailwind config file.
Manual Upgrades
There are some upgrades the Tailwind 2.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.
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.
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.