Merge Tailwind CSS classes without style conflicts
Package: tailwind-merge
Created by: dcastil
Last modified: Fri, 19 Apr 2024 11:19:42 GMT
Version: 2.3.0
License: MIT
Downloads: 8,797,661
Repository: https://github.com/dcastil/tailwind-merge
Install
npm install tailwind-merge
yarn add tailwind-merge
tailwind-merge
Utility function to efficiently merge Tailwind CSS classes in JS without style conflicts.
import { twMerge } from 'tailwind-merge'
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.4 (if you use Tailwind v2, use tailwind-merge v0.9.0)
- Works in all modern browsers and maintained Node versions
- Fully typed
- Check bundle size on Bundlephobia
Get started
Dependencies
Dependencies
@babel/plugin-transform-runtime: ^7.24.3@babel/preset-env: ^7.24.3@rollup/plugin-babel: ^6.0.4@rollup/plugin-node-resolve: ^15.2.3@rollup/plugin-typescript: ^11.1.6@size-limit/preset-small-lib: ^11.1.2@types/jest: ^29.5.12@typescript-eslint/eslint-plugin: ^7.5.0@typescript-eslint/parser: ^7.5.0babel-plugin-annotate-pure-calls: ^0.4.0babel-plugin-polyfill-regenerator: ^0.6.1eslint: ^8.57.0eslint-plugin-import: ^2.29.1eslint-plugin-jest: ^27.9.0globby: ^11.1.0jest: ^29.7.0prettier: ^3.2.5rollup: ^4.13.2rollup-plugin-delete: ^2.0.0rollup-plugin-dts: ^6.1.0size-limit: ^11.1.2ts-jest: ^29.1.2typescript: ^5.4.3zx: ^7.2.3
