tailwind-merge

Bug Fixes

• Fix TypeScript issue when using moduleResolution: node16 by @LiamMartens in https://github.com/dcastil/tailwind-merge/pull/245

Documentation

• Fix grammar and typos in docs by @jmmarco in https://github.com/dcastil/tailwind-merge/pull/249
• Add tailwind-merge-php to similar packages in docs by @JamesHemery in https://github.com/dcastil/tailwind-merge/pull/246

Full Changelog: https://github.com/dcastil/tailwind-merge/compare/v1.13.1...v1.13.2

Thanks to @bluetch for sponsoring tailwind-merge! ❤️

Bug Fixes

• Fix basis-auto and basis-full not being merged correctly by @lukasz-kapica in https://github.com/dcastil/tailwind-merge/pull/242

Full Changelog: https://github.com/dcastil/tailwind-merge/compare/v1.13.0...v1.13.1

This release focuses on improvements to the docs.

Bug Fixes

• Fix arbitrary length 0 without unit not being recognized by @dcastil in https://github.com/dcastil/tailwind-merge/pull/237
• Fix typo in comment in default-config.ts by @CrutchTheClutch in https://github.com/dcastil/tailwind-merge/pull/227

Documentation

• Add intro video from Simon Vrachliotis to docs by @dcastil in https://github.com/dcastil/tailwind-merge/pull/239
  • @simonswiss made an intro video to tailwind-merge which I added to the docs. Check it out here!
• Add docs about when to use tailwind-merge by @dcastil in https://github.com/dcastil/tailwind-merge/pull/230
  • I added a new page to the docs about when and how to use tailwind-merge which should help you to decide whether you should use it and what alternative approaches exist.
• Make it clearer in docs that tailwind-merge supports composition of class strings by @dcastil in https://github.com/dcastil/tailwind-merge/pull/229

Other

• Add npm package provenance by @dcastil in https://github.com/dcastil/tailwind-merge/pull/219
  • GitHub introduced a new security feature to verify which source commit and build file were used for a specific npm package version. tailwind-merge now publishes provenance signatures alongside all releases on npm. Read more on the GitHub blog.

Full Changelog: https://github.com/dcastil/tailwind-merge/compare/v1.12.0...v1.13.0

With this release tailwind-merge supports all features introduced in Tailwind CSS v3.3.

New Features

• Add support for postfix modifier by @dcastil in https://github.com/dcastil/tailwind-merge/pull/214
  • This adds support for line-height modifiers in font-size utilities like text-lg/7 and more potential postfix modifiers in the future (learn more).
  • All classes are checked for postfix modifiers since there will be more in the future and they'll be configurable with plugins.
  • tailwind-merge can't know from the class syntax alone whether something is a modifier or not. E.g. there is w-1/2 which doesn't contain a modifier. So tailwind-merge always checks whether class without potential modifier exists and if it doesn't it checks for full class. This behavior might get reversed in the next major version as a breaking change (learn more).
  • Added conflictingClassGroupModifiers object to tailwind-merge config (learn more).

Full Changelog: https://github.com/dcastil/tailwind-merge/compare/v1.11.0...v1.12.0

New Features

• Add support for Tailwind CSS v3.3 except line-height shorthand by @dcastil in https://github.com/dcastil/tailwind-merge/pull/210
  • The line-height shorthand in font-size utilities (text-lg/7) introduced in Tailwind CSS v3.3 is not yet supported in tailwind-merge because that feature is a bit more involved. I'll add support for it in a future release. More info in https://github.com/dcastil/tailwind-merge/issues/211.
  • Added new validator isPercent which is needed internally for the default scale of color stop positions.
  • New theme key gradientColorStopPositions supported in tailwind-merge.
  • New logical properties like ps-0 (padding-inline-start: 0px;) are de-duplicated away when using the matching property for all sides afterwards like in this case p-0, but not when using single axis sides like px-0 because padding-inline-start can also be the top or bottom padding depending on writing mode.
    • Basically twMerge('ps-0 p-0') === 'p-0' && twMerge('ps-0 px-0') === 'ps-0 px-0'.
    • If you want to use logical properties and know which writing modes your app is limited to, add the right conflicts yourself to your tailwind-merge config.

Full Changelog: https://github.com/dcastil/tailwind-merge/compare/v1.10.0...v1.11.0

Thanks to @brandonmcconnell for sponsoring tailwind-merge! ❤️