Tailwind Merge (tw-merge)

Tailwind CSS 🟡 Mid

Définition

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

Analogie

Un arbitre qui tranche quand deux règles se contredisent : la dernière 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

← → au clavier pour passer d'une fiche à l'autre