Add support for Tailwind CSS v3.4

docs/README.md

@@ -16,8 +16,8 @@ twMerge('px-2 py-1 bg-red hover:bg-dark-red', 'p-3 bg-[#B91C1C]')
 // → 'hover:bg-dark-red p-3 bg-[#B91C1C]'
 ```
 
-- Supports Tailwind v3.0 up to v3.3 (if you use Tailwind v2, use [tailwind-merge v0.9.0](https://github.com/dcastil/tailwind-merge/tree/v0.9.0))
-- Works in all modern browsers and Node >=12
+- Supports Tailwind v3.0 up to v3.4 (if you use Tailwind v2, use [tailwind-merge v0.9.0](https://github.com/dcastil/tailwind-merge/tree/v0.9.0))
+- Works in all modern browsers and maintained Node versions
 - Fully typed
 - [Check bundle size on Bundlephobia](https://bundlephobia.com/package/tailwind-merge)
 

src/lib/default-config.ts

@@ -193,12 +193,12 @@ export function getDefaultConfig() {
  * Floats
  * @see https://tailwindcss.com/docs/float
  */
- float: [{ float: ['right', 'left', 'none'] }],
+ float: [{ float: ['right', 'left', 'none', 'start', 'end'] }],
  /**
  * Clear
  * @see https://tailwindcss.com/docs/clear
  */
- clear: [{ clear: ['left', 'right', 'both', 'none'] }],
+ clear: [{ clear: ['left', 'right', 'both', 'none', 'start', 'end'] }],
  /**
  * Isolation
  * @see https://tailwindcss.com/docs/isolation
@@ -581,20 +581,35 @@ export function getDefaultConfig() {
  * Width
  * @see https://tailwindcss.com/docs/width
  */
- w: [{ w: ['auto', 'min', 'max', 'fit', isArbitraryValue, spacing] }],
+ w: [
+ {
+ w: [
+ 'auto',
+ 'min',
+ 'max',
+ 'fit',
+ 'svw',
+ 'lvw',
+ 'dvw',
+ isArbitraryValue,
+ spacing,
+ ],
+ },
+ ],
  /**
  * Min-Width
  * @see https://tailwindcss.com/docs/min-width
  */
- 'min-w': [{ 'min-w': ['min', 'max', 'fit', isArbitraryValue, isLength] }],
+ 'min-w': [{ 'min-w': [isArbitraryValue, spacing, 'min', 'max', 'fit'] }],
  /**
  * Max-Width
  * @see https://tailwindcss.com/docs/max-width
  */
  'max-w': [
  {
  'max-w': [
- '0',
+ isArbitraryValue,
+ spacing,
  'none',
  'full',
  'min',
@@ -603,25 +618,47 @@ export function getDefaultConfig() {
  'prose',
  { screen: [isTshirtSize] },
  isTshirtSize,
- isArbitraryValue,
  ],
  },
  ],
  /**
  * Height
  * @see https://tailwindcss.com/docs/height
  */
- h: [{ h: [isArbitraryValue, spacing, 'auto', 'min', 'max', 'fit'] }],
+ h: [
+ {
+ h: [
+ isArbitraryValue,
+ spacing,
+ 'auto',
+ 'min',
+ 'max',
+ 'fit',
+ 'svh',
+ 'lvh',
+ 'dvh',
+ ],
+ },
+ ],
  /**
  * Min-Height
  * @see https://tailwindcss.com/docs/min-height
  */
- 'min-h': [{ 'min-h': ['min', 'max', 'fit', isLength, isArbitraryValue] }],
+ 'min-h': [
+ { 'min-h': [isArbitraryValue, spacing, 'min', 'max', 'fit', 'svh', 'lvh', 'dvh'] },
+ ],
  /**
  * Max-Height
  * @see https://tailwindcss.com/docs/max-height
  */
- 'max-h': [{ 'max-h': [isArbitraryValue, spacing, 'min', 'max', 'fit'] }],
+ 'max-h': [
+ { 'max-h': [isArbitraryValue, spacing, 'min', 'max', 'fit', 'svh', 'lvh', 'dvh'] },
+ ],
+ /**
+ * Size
+ * @see https://tailwindcss.com/docs/size
+ */
+ size: [{ size: [isArbitraryValue, spacing, 'auto', 'min', 'max', 'fit'] }],
  // Typography
  /**
  * Font Size
@@ -811,6 +848,11 @@ export function getDefaultConfig() {
  * @see https://tailwindcss.com/docs/text-overflow
  */
  'text-overflow': ['truncate', 'text-ellipsis', 'text-clip'],
+ /**
+ * Text Wrap
+ * @see https://tailwindcss.com/docs/text-wrap
+ */
+ 'text-wrap': [{ text: ['wrap', 'nowrap', 'balance', 'pretty'] }],
  /**
  * Text Indent
  * @see https://tailwindcss.com/docs/text-indent
@@ -1468,7 +1510,7 @@ export function getDefaultConfig() {
  * Appearance
  * @see https://tailwindcss.com/docs/appearance
  */
- appearance: ['appearance-none'],
+ appearance: [{ appearance: ['none', 'auto'] }],
  /**
  * Cursor
  * @see https://tailwindcss.com/docs/cursor
@@ -1712,6 +1754,11 @@ export function getDefaultConfig() {
  * @see https://tailwindcss.com/docs/screen-readers
  */
  sr: ['sr-only', 'not-sr-only'],
+ /**
+ * Forced Color Adjust
+ * @see https://tailwindcss.com/docs/forced-color-adjust
+ */
+ 'forced-color-adjust': [{ 'forced-color-adjust': ['auto', 'none'] }],
  },
  conflictingClassGroups: {
  overflow: ['overflow-x', 'overflow-y'],
@@ -1727,6 +1774,7 @@ export function getDefaultConfig() {
  m: ['mx', 'my', 'ms', 'me', 'mt', 'mr', 'mb', 'ml'],
  mx: ['mr', 'ml'],
  my: ['mt', 'mb'],
+ size: ['w', 'h'],
  'font-size': ['leading'],
  'fvn-normal': [
  'fvn-ordinal',

src/lib/types.ts

@@ -223,6 +223,7 @@ export type DefaultClassGroupIds =
  | 'font-smoothing'
  | 'font-style'
  | 'font-weight'
+ | 'forced-color-adjust'
  | 'fvn-figure'
  | 'fvn-fraction'
  | 'fvn-normal'
@@ -360,6 +361,7 @@ export type DefaultClassGroupIds =
  | 'shadow-color'
  | 'shadow'
  | 'shrink'
+ | 'size'
  | 'skew-x'
  | 'skew-y'
  | 'snap-align'
@@ -384,11 +386,12 @@ export type DefaultClassGroupIds =
  | 'text-opacity'
  | 'text-overflow'
  | 'text-transform'
+ | 'text-wrap'
  | 'top'
- | 'touch'
+ | 'touch-pz'
  | 'touch-x'
  | 'touch-y'
- | 'touch-pz'
+ | 'touch'
  | 'tracking'
  | 'transform-origin'
  | 'transform'

tests/class-map.test.ts

@@ -112,6 +112,7 @@ test('class map has correct class groups at first part', () => {
  float: ['float'],
  flow: ['display'],
  font: ['font-family', 'font-weight'],
+ forced: ['forced-color-adjust'],
  from: ['gradient-from', 'gradient-from-pos'],
  gap: ['gap', 'gap-x', 'gap-y'],
  grayscale: ['grayscale'],
@@ -233,6 +234,7 @@ test('class map has correct class groups at first part', () => {
  sepia: ['sepia'],
  shadow: ['shadow', 'shadow-color'],
  shrink: ['shrink'],
+ size: ['size'],
  skew: ['skew-x', 'skew-y'],
  slashed: ['fvn-slashed-zero'],
  snap: ['snap-align', 'snap-stop', 'snap-strictness', 'snap-type'],
@@ -246,7 +248,14 @@ test('class map has correct class groups at first part', () => {
  subpixel: ['font-smoothing'],
  table: ['display', 'table-layout'],
  tabular: ['fvn-spacing'],
- text: ['font-size', 'text-alignment', 'text-color', 'text-opacity', 'text-overflow'],
+ text: [
+ 'font-size',
+ 'text-alignment',
+ 'text-color',
+ 'text-opacity',
+ 'text-overflow',
+ 'text-wrap',
+ ],
  to: ['gradient-to', 'gradient-to-pos'],
  top: ['top'],
  touch: ['touch', 'touch-pz', 'touch-x', 'touch-y'],

tests/tailwind-css-versions.test.ts

@@ -34,3 +34,24 @@ test('supports Tailwind CSS v3.3 features', () => {
  expect(twMerge('content-normal content-center content-stretch')).toBe('content-stretch')
  expect(twMerge('whitespace-nowrap whitespace-break-spaces')).toBe('whitespace-break-spaces')
 })
+
+test('supports Tailwind CSS v3.4 features', () => {
+ expect(twMerge('h-svh h-dvh w-svw w-dvw')).toBe('h-dvh w-dvw')
+ expect(
+ twMerge(
+ 'has-[[data-potato]]:p-1 has-[[data-potato]]:p-2 group-has-[:checked]:grid group-has-[:checked]:flex',
+ ),
+ ).toBe('has-[[data-potato]]:p-2 group-has-[:checked]:flex')
+ expect(twMerge('text-wrap text-pretty')).toBe('text-pretty')
+ expect(twMerge('w-5 h-3 size-10 w-12')).toBe('size-10 w-12')
+ expect(twMerge('grid-cols-2 grid-cols-subgrid grid-rows-5 grid-rows-subgrid')).toBe(
+ 'grid-cols-subgrid grid-rows-subgrid',
+ )
+ expect(twMerge('min-w-0 min-w-50 min-w-px max-w-0 max-w-50 max-w-px')).toBe('min-w-px max-w-px')
+ expect(twMerge('forced-color-adjust-none forced-color-adjust-auto')).toBe(
+ 'forced-color-adjust-auto',
+ )
+ expect(twMerge('appearance-none appearance-auto')).toBe('appearance-auto')
+ expect(twMerge('float-start float-end clear-start clear-end')).toBe('float-end clear-end')
+ expect(twMerge('*:p-10 *:p-20 hover:*:p-10 hover:*:p-20')).toBe('*:p-20 hover:*:p-20')
+})