Tipikus hibák

<!-- ❌ Ellenőrizhetetlen class káosz -->
<div class="flex flex-col md:flex-row items-start md:items-center justify-between w-full max-w-4xl mx-auto px-4 md:px-8 lg:px-12 py-6 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-xl md:rounded-2xl shadow-sm hover:shadow-md transition-shadow duration-200 gap-4 md:gap-6 lg:gap-8 cursor-pointer group">

// ❌ Ez NEM működik! A Tailwind statikusan elemzi a kódot.
// A 'bg-' + color string-ből a build nem generálja a CSS-t.
const color = 'blue';
<div className={`bg-${color}-500`}>...</div>

// ✅ Teljes class neveket kell megadni
const colorMap = {
  blue: 'bg-blue-500',
  red: 'bg-red-500',
  green: 'bg-green-500',
};
<div className={colorMap[color]}>...</div>

<!-- ❌ Desktop-first gondolkodás, ami Tailwind-ben nem működik jól -->
<div class="lg:w-1/3">
  <!-- Mi legyen mobilon? Elfelejtettük. -->
</div>

<!-- ✅ Mobile-first: alap az összes képernyőre, prefix bővít -->
<div class="w-full lg:w-1/3">
  <!-- Mobilon: teljes széles | Desktopon: harmad széles -->
</div>

/* ❌ Kerülendő React projektben */
.card { @apply bg-white rounded-xl shadow-md p-6; }
.card-title { @apply text-xl font-bold text-gray-900; }
.card-body { @apply text-gray-600 mt-2; }

// ✅ Helyette: JSX komponens
function Card({ title, children }) {
  return (
    <div className="bg-white rounded-xl shadow-md p-6">
      <h2 className="text-xl font-bold text-gray-900">{title}</h2>
      <div className="text-gray-600 mt-2">{children}</div>
    </div>
  );
}

// ❌ Nehezen olvasható, változó és class lista összekeveredik
<button
  className={`bg-${isLoading ? 'gray' : 'blue'}-500 ${isDisabled ? 'opacity-50 cursor-not-allowed' : 'hover:bg-blue-600'} text-white px-4 py-2 rounded-lg`}
>

// ✅ Szétválasztás cn()-nel
const buttonClass = cn(
  'text-white px-4 py-2 rounded-lg transition-colors',
  isLoading ? 'bg-gray-500 cursor-wait' : 'bg-blue-500 hover:bg-blue-600',
  isDisabled && 'opacity-50 cursor-not-allowed pointer-events-none',
);

<button className={buttonClass}>...</button>