https://github.com/dcastil/tailwind-merge

Merge Tailwind CSS classes without style conflicts
https://github.com/dcastil/tailwind-merge

css tailwindcss utility-classes

Last synced: 4 months ago
JSON representation

Merge Tailwind CSS classes without style conflicts

• Host: GitHub
• URL: https://github.com/dcastil/tailwind-merge
• Owner: dcastil
• License: mit
• Created: 2021-07-15T08:37:57.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2024-01-24T21:06:21.000Z (5 months ago)
• Last Synced: 2024-01-30T09:41:11.463Z (5 months ago)
• Topics: css, tailwindcss, utility-classes
• Language: TypeScript
• Homepage: https://npmjs.com/package/tailwind-merge
• Size: 98.8 MB
• Stars: 3,627
• Watchers: 7
• Forks: 46
• Open Issues: 16
• Metadata Files:
  • Readme: README.md
  • Contributing: .github/CONTRIBUTING.md
  • Funding: .github/funding.yml
  • License: LICENSE.md
  • Code of conduct: .github/CODE_OF_CONDUCT.md

Lists

• awesome-stars - tailwind-merge
• popular-dependents-lists - dcastil/tailwind-merge - 🌟 548 (FpTs / dcastil/tailwind-merge)
• awesome-stars - dcastil/tailwind-merge - Merge Tailwind CSS classes without style conflicts (TypeScript)
• awesome-stars - dcastil/tailwind-merge - Merge Tailwind CSS classes without style conflicts (TypeScript)

README

        




    


    

        

    



# tailwind-merge

Utility function to efficiently merge [Tailwind CSS](https://tailwindcss.com) classes in JS without style conflicts.

```ts

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](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)

## Get started

-   [What is it for](https://github.com/dcastil/tailwind-merge/tree/v2.2.1/docs/what-is-it-for.md)

-   [When and how to use it](https://github.com/dcastil/tailwind-merge/tree/v2.2.1/docs/when-and-how-to-use-it.md)

-   [Features](https://github.com/dcastil/tailwind-merge/tree/v2.2.1/docs/features.md)

-   [Limitations](https://github.com/dcastil/tailwind-merge/tree/v2.2.1/docs/limitations.md)

-   [Configuration](https://github.com/dcastil/tailwind-merge/tree/v2.2.1/docs/configuration.md)

-   [Recipes](https://github.com/dcastil/tailwind-merge/tree/v2.2.1/docs/recipes.md)

-   [API reference](https://github.com/dcastil/tailwind-merge/tree/v2.2.1/docs/api-reference.md)

-   [Writing plugins](https://github.com/dcastil/tailwind-merge/tree/v2.2.1/docs/writing-plugins.md)

-   [Versioning](https://github.com/dcastil/tailwind-merge/tree/v2.2.1/docs/versioning.md)

-   [Contributing](https://github.com/dcastil/tailwind-merge/tree/v2.2.1/docs/contributing.md)

-   [Similar packages](https://github.com/dcastil/tailwind-merge/tree/v2.2.1/docs/similar-packages.md)