javascript / intermediate
Snippet
Pattern für dynamische Klassen-Utilities
Dieses Utility kombiniert clsx und tailwind-merge, um dynamische Klassen-Strings zu verarbeiten und Tailwind-CSS-Konflikte effizient zu lösen.
snippet.js
1
2
3
4
5
6
import { clsx } from 'clsx';import { twMerge } from 'tailwind-merge';export function cn(...inputs) {return twMerge(clsx(inputs));}
nextjs
Erklärung
1
export function cn(...inputs)
Definiert eine wiederverwendbare Funktion, die eine beliebige Anzahl von Klassennamen-Argumenten akzeptiert.
2
return twMerge(clsx(inputs))
Führt zuerst bedingte Klassen zusammen und löst dann alle Tailwind-CSS-Eigenschaftskonflikte auf.