التخصيص وإضافة الكلاسات الخاصة (Customization & @apply)

/* globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  /* الأزرار الأساسية */
  .btn-primary {
    @apply bg-purple-600 hover:bg-purple-700 text-white font-bold
           px-6 py-3 rounded-none transition-all
           active:scale-95;
  }

  .btn-danger {
    @apply bg-rose-600 hover:bg-rose-700 text-white font-bold
           px-6 py-3 rounded-none transition-all
           active:scale-95;
  }

  /* البطاقات */
  .card {
    @apply bg-slate-800 border border-slate-700 rounded-none
           p-6 hover:border-purple-500/40 transition-all;
  }

  /* المدخلات */
  .input-field {
    @apply w-full bg-slate-800 border border-slate-700
           focus:border-purple-500 focus:ring-2 focus:ring-purple-500/20
           text-white px-4 py-3 rounded-none transition-all outline-none;
  }
}

/* الآن في أي مكون */
// <button class="btn-primary">حفظ</button>
// <button class="btn-danger">حذف</button>

// tailwind.config.js
module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {
      // ألوان مخصصة للعلامة التجارية
      colors: {
        brand: {
          50:  '#f5f3ff',
          500: '#8b5cf6',
          900: '#4c1d95',
        },
      },
      // خطوط مخصصة
      fontFamily: {
        display: ['Playfair Display', 'serif'],
      },
      // مسافات إضافية
      spacing: {
        '128': '32rem',
      },
      // حركات مخصصة
      animation: {
        'bounce-slow': 'bounce 3s infinite',
      },
    },
  },
  plugins: [],
};