Tailwind Merge (tw-merge)

Tailwind CSS 🟡 Mid

Definition

Librairie qui fusionne intelligemment les classes Tailwind en resolvant les conflits. p-4 + p-2 donne p-2 au lieu de garder les deux.

Analogie

Un arbitre qui tranche quand deux regles se contredisent : la derniere gagne proprement.

Exemple de code

import { twMerge } from 'tailwind-merge'

twMerge('px-4 py-2 bg-blue-500', 'px-6 bg-red-500')
// => 'py-2 px-6 bg-red-500'

Cas d'usage

Permettre l'override propre de styles dans des composants qui acceptent className en prop.

#styling#interview#tailwind