tailwind-merge strips out leading- utility classes during merge

[gavgrego]

When using tailwind-merge, any leading- utility classes (e.g., leading-6) are being stripped out from the final output, while other Tailwind utilities work correctly.

Steps to reproduce:
Using tailwind-merge in a utility function:

import { clsx } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

Using the utility with a leading- class:

className={cn(
  "flex w-full leading-6 items-center ...",
  className
)}

Expected behavior:
The leading-XYZ class should be preserved in the final output

Actual behavior:
The leading-XYZ class is stripped out

Other Tailwind utilities (like gap-4, etc) work correctly. Seems to solely be an issue with 'leading' that I tested.

Using clsx alone without tailwind-merge preserves the leading- classes correctly.

This is being used in a monorepo setup w/ Turborepo, here's my package.json for the ui package that the util function is exported from.

  "name": "@tw-merge/ui",
  "version": "1.0.0",
  "description": "Shared components",
  "exports": {
    ".": "./src/index.tsx",
    "./tailwind": "./tailwind.config.ts",
    "./postcss": "./postcss.config.js",
    "./globals.css": "./src/globals.css",
    "./lib/utils": "./src/lib/utils.ts"
  },
  "scripts": {
    "lint": "eslint \"**/*.ts*\"",
    "generate:component": "turbo gen react-component"
  },
  "private": true,
  "devDependencies": {
    "@types/node": "^22.9.0",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "typescript": "^5"
  },
  "dependencies": {
    "@next/font": "^14.2.15",
    "@radix-ui/react-checkbox": "^1.1.2",
    "@radix-ui/react-dialog": "^1.1.2",
    "@radix-ui/react-dropdown-menu": "^2.1.2",
    "@radix-ui/react-label": "^2.1.0",
    "@radix-ui/react-radio-group": "^1.2.1",
    "@radix-ui/react-select": "^2.1.2",
    "@radix-ui/react-separator": "^1.1.0",
    "@radix-ui/react-slot": "^1.1.0",
    "@radix-ui/react-tooltip": "^1.1.4",
    "@tanstack/react-table": "^8.20.5",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.1",
    "lucide-react": "^0.454.0",
    "postcss": "^8.4.47",
    "react": "^18",
    "react-dom": "^18",
    "tailwind-merge": "^2.5.4",
    "tailwindcss": "^3.4.14",
    "tailwindcss-animate": "^1.0.7"
  },
  "peerDependencies": {
    "next": "15.0.0"
  }
}

[dcastil]

Hey @gavgrego! 👋

Not 100% sure without the exact classes you're passing to tailwind-merge, but I suspect the reason why the line-height classes like leading-6 get removed is because you have a font-size class like text-lg afterwards which sets a line-height CSS property, overriding preceding line-height classes. If you want to change this overriding behavior and don't use line-heights in your font-size classes, you can override the conflict between the font-size and line-height classes:

import { extendTailwindMerge } from 'tailwind-merge'

const twMerge = extendTailwindMerge({
    override: {
        conflictingClassGroups: {
            // In the default config the value is ['leading']
            // See https://github.com/dcastil/tailwind-merge/blob/v2.5.5/src/lib/default-config.ts#L1786
            'font-size': []
        }
    },
    // … rest of your config
})

---

Related: #482, #446, #257, #218, #187, #59