مشكلات @apply والبدائل

/* ANTI-PATTERN: Recreating traditional CSS with @apply */
.page-header { @apply bg-white border-b px-6 py-4; }
.page-title  { @apply text-2xl font-bold text-gray-900; }
.page-meta   { @apply text-sm text-gray-500 mt-1; }
.page-action { @apply ml-auto; }

/* BETTER: Just write the utilities directly in HTML -->
<header class="bg-white border-b px-6 py-4">
  <h1 class="text-2xl font-bold text-gray-900">Title</h1>
  <p class="text-sm text-gray-500 mt-1">Meta</p>
</header>

/* CSS: @apply hides what the component looks like */
.hero-button {
  @apply px-8 py-3 bg-indigo-600 text-white rounded-full font-semibold
         hover:bg-indigo-500 shadow-lg hover:shadow-indigo-500/50
         transition-all duration-200;
}

<!-- HTML: developer sees only the class name, not the styles -->
<button class="hero-button">Get Started</button>

<!-- Better: developer sees everything at a glance -->
<button class="px-8 py-3 bg-indigo-600 text-white rounded-full font-semibold hover:bg-indigo-500 shadow-lg transition-all duration-200">
  Get Started
</button>

/* BAD: No @layer wrapper — could override utilities unexpectedly */
.btn-primary {
  @apply bg-blue-600 text-white;
}

/* Later in the same file: */
/* p-4 might not override .btn-primary if placed before it */

/* GOOD: Use @layer components */
@layer components {
  .btn-primary {
    @apply bg-blue-600 text-white;
  }
  /* Now utilities always override correctly */
}

/* ERROR: Arbitrary values in @apply don't work */
.hero {
  @apply w-[347px] bg-[#1a2b3c];  /* Will not compile! */
}

/* CORRECT: Use plain CSS for arbitrary values */
.hero {
  @apply rounded-xl shadow-lg;  /* Regular utilities work fine */
  width: 347px;               /* Plain CSS for the arbitrary value */
  background-color: #1a2b3c;  /* Plain CSS for custom color */
}

// React component replaces @apply .btn-primary
const variantStyles = {
  primary: 'bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500',
  outline: 'border border-gray-300 text-gray-700 hover:bg-gray-50',
  ghost:   'text-gray-600 hover:bg-gray-100 hover:text-gray-900',
};

export function Button({ variant = 'primary', children, ...props }) {
  return (
    <button
      className={'inline-flex items-center px-4 py-2 rounded-lg text-sm font-medium transition-colors ' + variantStyles[variant]}
      {...props}
    >
      {children}
    </button>
  );
}

import clsx from 'clsx';

function Button({ variant, size, fullWidth, children }) {
  return (
    <button className={clsx(
      'inline-flex items-center justify-center rounded-lg font-medium transition-colors',
      {
        'px-4 py-2 text-sm': size === 'md' || !size,
        'px-3 py-1.5 text-xs': size === 'sm',
        'px-6 py-3 text-base': size === 'lg',
      },
      {
        'bg-blue-600 text-white hover:bg-blue-700': variant === 'primary',
        'border border-gray-300 text-gray-700 hover:bg-gray-50': variant === 'outline',
      },
      fullWidth && 'w-full',
    )}>
      {children}
    </button>
  );
}

<!-- Jinja2 / Django example -->
<!-- templates/components/button.html -->
<button class="inline-flex items-center px-4 py-2 rounded-lg font-medium text-sm bg-blue-600 text-white hover:bg-blue-700 transition-colors" type="{{ type|default:'button' }}">
  {{ label }}
</button>

<!-- Used via include -->
{% include 'components/button.html' with label='Save' type='submit' %}

@layer components {
  /* Styling markdown content rendered by a CMS */
  .prose-content h1 { @apply text-4xl font-bold text-gray-900 mb-6 mt-8; }
  .prose-content h2 { @apply text-3xl font-semibold text-gray-800 mb-4 mt-6; }
  .prose-content p  { @apply text-gray-600 leading-relaxed mb-4; }
  .prose-content a  { @apply text-blue-600 underline underline-offset-2 hover:text-blue-800; }
  .prose-content ul { @apply list-disc list-inside space-y-1 mb-4 text-gray-600; }
}

/* BEFORE: @apply in CSS */
@layer components {
  .btn-primary { @apply bg-blue-600 text-white px-4 py-2 rounded-lg font-medium; }
}

<!-- BEFORE: HTML -->
<button class="btn-primary">Save</button>

/* AFTER: Component abstraction */
// Button.jsx
export function Button({ children }) {
  return <button className="bg-blue-600 text-white px-4 py-2 rounded-lg font-medium">{children}</button>;
}

// usage
<Button>Save</Button>