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

javascript

import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';
 
export function cn(...inputs) {
  return twMerge(clsx(inputs));
}

nextjs

Erklärung

export function cn(...inputs)

Definiert eine wiederverwendbare Funktion, die eine beliebige Anzahl von Klassennamen-Argumenten akzeptiert.

return twMerge(clsx(inputs))

Führt zuerst bedingte Klassen zusammen und löst dann alle Tailwind-CSS-Eigenschaftskonflikte auf.