Skip to content

Upgrading tailwindcss 1 to 2

Breaking1.9.6 → 2.2.19Breaking11Security1Platform2Deprecated4New59Changed45Fixed75Other2

Full comparisonBack to tailwindcss
BreakingUpgrade verdict

10 breaking changes and 2 platform requirement changes and a security fix.

In plain terms
  • In JIT mode, transforms and filters now turn on automatically, so toggling the old enabling classes no longer works.
  • The option to target older browsers, including IE 11, is gone.
  • Three shadow classes are no longer included by default; use the new ring classes instead.
  • The old class name no longer works; use the new name instead.
Must act Top 5 of 17 that need code or config changes

Node.js requirement changed in 2.0.0-alpha.1: >=8.9.0 → >=12.13.0.

Adds arg ^5.0.1, chokidar ^3.5.2, cosmiconfig ^7.0.1, didyoumean ^1.2.2, dlv ^1.1.3, fast-glob ^3.2.7, glob-parent ^6.0.1, is-color-stop ^1.1.0, is-glob ^4.0.1, lodash.topath ^4.5.2, modern-normalize ^1.1.0, normalize-path ^3.0.0, postcss-load-config ^3.1.0, purgecss ^4.0.3, quick-lru ^5.1.1, tmp ^0.2.1.

Drops @fullhuman/postcss-purgecss, autoprefixer, browserslist, normalize.css, postcss, postcss-functions.

Installs 120 packages in all (was 91).

What you must change

Breaking10
Removes the need for transform, filter, and backdrop-filter classes to enable their sub-utilities in Just-in-Time mode.
transformfilterbackdrop-filter
2.2.0GitHub ReleaseSummarizedView source
Removes the target feature and drops any compatibility with IE 11.
target
2.0.0GitHub ReleaseSummarizedView source
Removes shadow-outline, shadow-solid, and shadow-xs by default in favor of the new ring API.
shadow-outlineshadow-solidshadow-xsring
2.0.0GitHub ReleaseSummarizedView source
Renames whitespace-no-wrap to whitespace-nowrap.
whitespace-no-wrapwhitespace-nowrap
2.0.0GitHub ReleaseSummarizedView source
Renames flex-no-wrap to flex-nowrap.
flex-no-wrapflex-nowrap
2.0.0GitHub ReleaseSummarizedView source
Removes the clearfix utility and recommends flow-root instead.
clearfixflow-root
2.0.0GitHub ReleaseSummarizedView source
Changes the special use of 'default' in config to 'DEFAULT'.
defaultDEFAULT
2.0.0GitHub ReleaseSummarizedView source
Removes the scrolling-touch and scrolling-auto utilities.
scrolling-touchscrolling-auto
2.0.0GitHub ReleaseSummarizedView source
Changes the matchUtilities API used to register on-demand utilities in the JIT engine.
matchUtilities
2.2.0GitHub ReleaseSummarizedView source
Introduces a new @apply implementation with slight backwards incompatibilities.
@apply
2.0.0GitHub ReleaseSummarizedView source
Security1
Bumps dependency versions to address security vulnerabilities.
2.2.18GitHub ReleaseSummarizedView source
Platform2
Drops support for Node 8 and 10.
2.0.0GitHub ReleaseSummarizedView source
Upgrades to PostCSS 8 and Autoprefixer 10, and moves postcss and autoprefixer to peerDependencies.
postcssautoprefixer
2.0.0-alpha.21GitHub ReleaseSummarizedView source

Deprecations to plan for

Deprecated4
Notes that the tailwindcss-cli wrapper package is no longer needed and users can switch to tailwindcss.
tailwindcss-clitailwindcss
2.2.0GitHub ReleaseSummarizedView source
Deprecates @tailwind screens in favor of @tailwind variants in Just-in-Time mode.
@tailwind screens@tailwind variants
2.2.0GitHub ReleaseSummarizedView source
Deprecates lightBlue for sky in the extended color palette, with lightBlue working until v3.0.
lightBluesky
2.2.0GitHub ReleaseSummarizedView source
Deprecates blur-0 for blur-none in the default theme, with blur-0 removed in v3.0.
blur-0blur-none
2.2.0GitHub ReleaseSummarizedView source