Upgrading tailwindcss 0.1 to 0.2
Breaking0.1.6 → 0.2.2Breaking8New4Changed1Fixed2
BreakingUpgrade verdict
8 breaking changes.
In plain terms
- Moves the defaultConfig function into a separate module, changing how the generated config references default values.
- Setting a border width no longer changes the border's color or style, so you may need to set those explicitly if you relied on the old behavior.
- Border width classes no longer reset border color and style, so you may need to add color and style classes where you relied on the old behavior.
- If you use a custom config file, you must add auto to your margin scale or mx-auto and similar classes stop working.
Must act Top 3 of 8 that need code or config changes
What you must change
Breaking8
Moves the defaultConfig function into a separate module, changing how the generated config references default values.
defaultConfigStops border width utilities from overriding border color and style, so responsive width changes no longer reset them.
border-2borderborder-dashedborder-redChanges border width utilities to set only width so border color and style cascade across breakpoints.
border-2border-4Moves auto margin values out of hard-coded utilities into the customizable margin scale in the config.
mx-automl-automarginMoves the defaultConfig function into a separate module, requiring it from tailwindcss/defaultConfig instead of tailwindcss.
defaultConfigrequire('tailwindcss').defaultConfig()require('tailwindcss/defaultConfig')()Combines border radius position and size into single utilities like rounded-t-lg instead of separate rounded-lg rounded-t classes.
rounded-lgrounded-trounded-t-lgrounded-lrounded-l-lgrounded-tl-lgrounded-tr-lgrounded-bl-lgMakes @apply throw an explicit error unless the applied class is a simple, un-nested, single definition class.
@applyMakes @apply strict: applying a class that appears in multiple rulesets now throws an error.
@apply