पुनः उपयोग योग्य घटक वर्ग बनाना

@layer components {
  .btn {
    @apply inline-flex items-center justify-center gap-2
           px-4 py-2 rounded-lg text-sm font-semibold
           transition-all duration-150
           focus:outline-none focus:ring-2 focus:ring-offset-2
           disabled:opacity-50 disabled:cursor-not-allowed;
  }

  .btn-primary {
    @apply btn bg-blue-600 text-white
           hover:bg-blue-700 active:bg-blue-800
           focus:ring-blue-500;
  }

  .btn-outline {
    @apply btn border border-gray-300 text-gray-700 bg-white
           hover:bg-gray-50 active:bg-gray-100
           focus:ring-gray-400;
  }
}

<!-- Clean, readable HTML using component classes -->
<button class="btn btn-primary">Save Changes</button>
<button class="btn btn-outline">Cancel</button>

<!-- Utility override still works -->
<button class="btn btn-primary w-full">Full Width Button</button>

<!-- Disabled state from btn class -->
<button class="btn btn-primary" disabled>Loading...</button>

@layer components {
  .card {
    @apply bg-white rounded-xl shadow-sm border border-gray-200
           overflow-hidden;
  }

  .card-body {
    @apply p-6;
  }

  .card-header {
    @apply px-6 py-4 border-b border-gray-100 font-semibold text-gray-900;
  }

  .card-footer {
    @apply px-6 py-4 border-t border-gray-100 bg-gray-50 flex justify-end gap-3;
  }

  /* Dark mode variant */
  .dark .card {
    @apply bg-gray-800 border-gray-700;
  }
}

@layer components {
  .badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full
           text-xs font-medium;
  }

  .badge-blue   { @apply badge bg-blue-100 text-blue-700; }
  .badge-green  { @apply badge bg-green-100 text-green-700; }
  .badge-yellow { @apply badge bg-yellow-100 text-yellow-700; }
  .badge-red    { @apply badge bg-red-100 text-red-700; }
  .badge-gray   { @apply badge bg-gray-100 text-gray-600; }
}

<!-- Usage -->
<span class="badge-green">Active</span>
<span class="badge-red">Overdue</span>

@layer components {
  .form-field {
    @apply w-full rounded-lg border border-gray-300 bg-white
           px-4 py-2.5 text-sm text-gray-900
           placeholder:text-gray-400
           focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
           dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100
           dark:placeholder:text-gray-500;
  }

  .form-field-error {
    @apply form-field border-red-500 focus:ring-red-500;
  }

  .form-label {
    @apply block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1;
  }
}

@layer components {
  .alert {
    @apply flex items-start gap-3 p-4 rounded-lg text-sm;
  }

  .alert-info    { @apply alert bg-blue-50 text-blue-800 border border-blue-200; }
  .alert-success { @apply alert bg-green-50 text-green-800 border border-green-200; }
  .alert-warning { @apply alert bg-yellow-50 text-yellow-800 border border-yellow-200; }
  .alert-error   { @apply alert bg-red-50 text-red-800 border border-red-200; }
}

<!-- Usage -->
<div class="alert-success">
  <span>Your profile was saved successfully.</span>
</div>

@layer components {
  .nav-link {
    @apply flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium
           text-gray-600 hover:bg-gray-100 hover:text-gray-900
           transition-colors duration-150;
  }

  .nav-link-active {
    @apply nav-link bg-blue-50 text-blue-700 hover:bg-blue-100;
  }
}

<nav>
  <a href="/" class="nav-link-active">Dashboard</a>
  <a href="/settings" class="nav-link">Settings</a>
</nav>

/* src/styles/main.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Component class files */
@import './components/buttons.css';
@import './components/cards.css';
@import './components/badges.css';
@import './components/forms.css';
@import './components/navigation.css';

/* Custom utilities */
@import './utilities/text-balance.css';

@layer components {
  /* Base button */
  .btn { @apply inline-flex items-center px-4 py-2 rounded-lg text-sm font-medium; }

  /* Size modifiers */
  .btn-xs  { @apply px-2.5 py-1.5 text-xs rounded; }
  .btn-sm  { @apply px-3 py-1.5 text-sm rounded-md; }
  .btn-lg  { @apply px-5 py-2.5 text-base rounded-lg; }
  .btn-xl  { @apply px-6 py-3 text-lg rounded-xl; }
}

<!-- Usage -->
<button class="btn btn-primary btn-sm">Small Primary</button>
<button class="btn btn-primary">Default Primary</button>
<button class="btn btn-primary btn-lg">Large Primary</button>

<!-- Component test page snippet -->
<div class="p-8 space-y-8">
  <div>
    <h3 class="text-xs font-mono text-gray-400 mb-3">Buttons</h3>
    <div class="flex flex-wrap gap-3">
      <button class="btn btn-primary">Primary</button>
      <button class="btn btn-outline">Outline</button>
      <button class="btn btn-primary" disabled>Disabled</button>
    </div>
  </div>
  <div>
    <h3 class="text-xs font-mono text-gray-400 mb-3">Badges</h3>
    <div class="flex flex-wrap gap-2">
      <span class="badge-blue">Blue</span>
      <span class="badge-green">Green</span>
      <span class="badge-red">Red</span>
    </div>
  </div>
</div>