تخصيص السمة الخاصة بك (tailwind.config.js)

تخصيص السمة الخاصة بك (tailwind.config.js)

بينما يوفر Tailwind نظام تصميم افتراضي ممتاز، تتطلب معظم المشاريع مستوى معينًا من التخصيص. ملف tailwind.config.js هو بوابتك لجعل Tailwind خاصًا بك حقًا—تحديد ألوان مخصصة، خطوط، مسافات، نقاط توقف، والكثير غير ذلك.

في هذا الدرس الشامل، سنستكشف بنية ملف الإعدادات، ونفهم الفرق بين توسيع القيم الافتراضية واستبدالها، ونتعلم كيفية تخصيص كل جانب من نظام التصميم الخاص بك.

بنية tailwind.config.js

عندما تقوم بتهيئة Tailwind في مشروعك (npx tailwindcss init)، تحصل على ملف إعدادات أساسي. إليك البنية الأساسية:

// tailwind.config.js
module.exports = {
  content: [
    './src/**/*.{html,js}',
    './public/**/*.html',
  ],
  theme: {
    extend: {
      // تخصيصاتك هنا
    },
  },
  plugins: [],
}

دعنا نحلل كل قسم رئيسي:

• content: يخبر Tailwind أين يبحث عن أسماء الفئات لتضمينها في CSS النهائي
• theme: حيث تقوم بتخصيص رموز التصميم الخاصة بك (الألوان، المسافات، الخطوط، إلخ.)
• plugins: الإضافات الخارجية التي توسع وظائف Tailwind

فهم مسارات المحتوى

مصفوفة content حاسمة لعملية التنقية في Tailwind. تستخدم أنماط glob لفحص ملفاتك واستخراج أسماء الفئات المستخدمة:

module.exports = {
  content: [
    // ملفات HTML في مجلد src والمجلدات الفرعية
    './src/**/*.html',

    // ملفات JavaScript و JSX
    './src/**/*.{js,jsx}',

    // ملفات TypeScript و TSX
    './src/**/*.{ts,tsx}',

    // مكونات Vue أحادية الملف
    './src/**/*.vue',

    // ملفات PHP (لـ Laravel، WordPress، إلخ.)
    './resources/**/*.blade.php',
    './app/**/*.php',

    // مكونات Svelte
    './src/**/*.svelte',
  ],
  // ... بقية الإعدادات
}

كائن Theme: نظام التصميم الخاص بك

كائن theme هو المكان الذي يحدث فيه السحر. يحتوي على جميع رموز التصميم التي يستخدمها Tailwind لإنشاء فئات الأدوات:

module.exports = {
  theme: {
    // نقاط التوقف للشاشات
    screens: {
      sm: '640px',
      md: '768px',
      lg: '1024px',
      xl: '1280px',
      '2xl': '1536px',
    },

    // الألوان
    colors: {
      // تعريفات الألوان
    },

    // مقياس المسافات
    spacing: {
      // قيم المسافات
    },

    // عائلات الخطوط
    fontFamily: {
      // تعريفات الخطوط
    },

    // أحجام الخطوط
    fontSize: {
      // تعريفات الأحجام
    },

    // والعديد غيرها...
  }
}

التوسيع مقابل الاستبدال

هذا أحد أهم المفاهيم عند تخصيص Tailwind. لديك نهجان:

1. الاستبدال (خصائص theme المباشرة)

عندما تحدد خاصية مباشرة في theme، فإنك تستبدل قيم Tailwind الافتراضية بالكامل:

module.exports = {
  theme: {
    // هذا يستبدل جميع الألوان الافتراضية
    colors: {
      primary: '#3b82f6',
      secondary: '#8b5cf6',
      danger: '#ef4444',
    },
    // الآن لديك فقط هذه الألوان الثلاثة!
    // لا مزيد من 'blue-500'، 'gray-300'، إلخ.
  }
}

2. التوسيع (theme.extend)

عندما تستخدم theme.extend، فإنك تضيف إلى إعدادات Tailwind الافتراضية دون فقدانها:

module.exports = {
  theme: {
    extend: {
      // هذا يضيف إلى الألوان الافتراضية
      colors: {
        primary: '#3b82f6',
        secondary: '#8b5cf6',
        danger: '#ef4444',
      },
      // لا تزال لديك جميع الألوان الافتراضية
      // بالإضافة إلى ألوانك المخصصة
    }
  }
}

تخصيص الألوان

الألوان هي على الأرجح الجانب الأكثر تخصيصًا في Tailwind. يمكنك تحديد ألوان العلامة التجارية، وإضافة درجات، أو إنشاء لوحات ألوان كاملة:

module.exports = {
  theme: {
    extend: {
      colors: {
        // ألوان بسيطة مسماة
        'brand-blue': '#1e40af',
        'brand-gold': '#fbbf24',

        // ألوان مع درجات (مثل لوحة Tailwind الافتراضية)
        primary: {
          50: '#eff6ff',
          100: '#dbeafe',
          200: '#bfdbfe',
          300: '#93c5fd',
          400: '#60a5fa',
          500: '#3b82f6',  // الدرجة الأساسية
          600: '#2563eb',
          700: '#1d4ed8',
          800: '#1e40af',
          900: '#1e3a8a',
          950: '#172554',
        },

        // استخدام متغيرات CSS (رائع للوضع الداكن!)
        background: 'var(--color-background)',
        foreground: 'var(--color-foreground)',

        // ألوان دلالية
        success: '#10b981',
        warning: '#f59e0b',
        error: '#ef4444',
        info: '#3b82f6',
      }
    }
  }
}

الآن يمكنك استخدام هذه الألوان مع أي أداة لون:

<div class="bg-primary-500 text-white">خلفية أساسية</div>
<div class="text-brand-gold border-brand-blue">ألوان العلامة التجارية</div>
<button class="bg-success hover:bg-success/90">نجاح</button>

تخصيص الخطوط

الطباعة حاسمة لهوية العلامة التجارية. يجعل Tailwind من السهل تحديد عائلات خطوط مخصصة:

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        // إضافة خطوط مخصصة
        sans: ['Inter var', 'system-ui', 'sans-serif'],
        serif: ['Merriweather', 'Georgia', 'serif'],
        mono: ['Fira Code', 'Courier New', 'monospace'],

        // خطوط خاصة بالعلامة التجارية
        heading: ['Poppins', 'sans-serif'],
        body: ['Open Sans', 'sans-serif'],
        display: ['Playfair Display', 'serif'],
      },

      // أحجام خطوط مخصصة
      fontSize: {
        'xxs': '0.625rem',     // 10px
        '3xl': '2rem',          // 32px
        '4xl': '2.5rem',        // 40px
        '5xl': '3.5rem',        // 56px
        'display': '4.5rem',    // 72px
      },

      // أوزان الخطوط
      fontWeight: {
        hairline: 100,
        extralight: 200,
        // ... الأوزان القياسية
        extrabold: 800,
        black: 900,
      }
    }
  }
}

تخصيص المسافات

المسافات تتحكم في padding، margin، width، height، والمزيد. مقياس المسافات الافتراضي في Tailwind ممتاز، لكن قد تحتاج إلى قيم إضافية:

module.exports = {
  theme: {
    extend: {
      spacing: {
        // إضافة قيم بيكسل محددة
        '128': '32rem',      // 512px
        '144': '36rem',      // 576px

        // إضافة قيم كسرية
        '1/10': '10%',
        '2/10': '20%',
        '9/10': '90%',

        // مسافات مسماة للاتساق
        'header': '4rem',
        'sidebar': '16rem',
        'footer': '8rem',

        // مسافات متجاوبة (تستخدم مع min/max)
        'container-sm': '640px',
        'container-md': '768px',
        'container-lg': '1024px',
      }
    }
  }
}

قيم المسافات المخصصة هذه تعمل مع جميع أدوات المسافات:

<div class="p-128 m-header">حشوة كبيرة</div>
<div class="w-sidebar h-144">أبعاد ثابتة</div>
<div class="gap-1/10">فجوة الشبكة</div>

تخصيص نقاط التوقف

بينما تعمل نقاط التوقف الافتراضية في Tailwind لمعظم المشاريع، قد تحتاج إلى أحجام شاشة مخصصة:

module.exports = {
  theme: {
    screens: {
      // نهج Mobile-first (افتراضي)
      'xs': '475px',
      'sm': '640px',
      'md': '768px',
      'lg': '1024px',
      'xl': '1280px',
      '2xl': '1536px',
      '3xl': '1920px',

      // نقاط توقف مسماة للوضوح
      'tablet': '640px',
      'laptop': '1024px',
      'desktop': '1280px',

      // نقاط توقف Max-width (desktop-first)
      'max-lg': {'max': '1023px'},
      'max-md': {'max': '767px'},

      // نقاط توقف بنطاق
      'tablet-only': {'min': '640px', 'max': '1023px'},

      // استعلامات وسائط مخصصة
      'portrait': {'raw': '(orientation: portrait)'},
      'landscape': {'raw': '(orientation: landscape)'},
      'print': {'raw': 'print'},
    }
  }
}

تخصيصات شائعة أخرى

إليك المزيد من الخصائص التي قد ترغب في تخصيصها:

module.exports = {
  theme: {
    extend: {
      // نصف قطر الحدود
      borderRadius: {
        '4xl': '2rem',
        '5xl': '3rem',
      },

      // ظلال الصناديق
      boxShadow: {
        'inner-lg': 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.1)',
        'glow': '0 0 20px rgba(59, 130, 246, 0.5)',
      },

      // مقياس Z-index
      zIndex: {
        '60': '60',
        '70': '70',
        '80': '80',
        '90': '90',
        '100': '100',
      },

      // مدد الرسوم المتحركة
      transitionDuration: {
        '2000': '2000ms',
        '3000': '3000ms',
      },

      // رسوم متحركة Keyframe
      keyframes: {
        wiggle: {
          '0%, 100%': { transform: 'rotate(-3deg)' },
          '50%': { transform: 'rotate(3deg)' },
        },
        slideIn: {
          '0%': { transform: 'translateX(-100%)' },
          '100%': { transform: 'translateX(0)' },
        }
      },

      // أدوات الرسوم المتحركة
      animation: {
        wiggle: 'wiggle 1s ease-in-out infinite',
        'slide-in': 'slideIn 0.5s ease-out',
      },

      // إعدادات الحاوية
      container: {
        center: true,
        padding: {
          DEFAULT: '1rem',
          sm: '2rem',
          lg: '4rem',
          xl: '5rem',
          '2xl': '6rem',
        },
      },
    }
  }
}

مثال كامل من العالم الحقيقي

إليك ملف إعدادات شامل لتطبيق ويب حديث:

// tailwind.config.js
module.exports = {
  content: [
    './src/**/*.{html,js,jsx,ts,tsx}',
    './public/**/*.html',
  ],

  theme: {
    extend: {
      // ألوان العلامة التجارية
      colors: {
        primary: {
          50: '#eff6ff',
          100: '#dbeafe',
          200: '#bfdbfe',
          300: '#93c5fd',
          400: '#60a5fa',
          500: '#3b82f6',
          600: '#2563eb',
          700: '#1d4ed8',
          800: '#1e40af',
          900: '#1e3a8a',
        },
        accent: {
          light: '#fbbf24',
          DEFAULT: '#f59e0b',
          dark: '#d97706',
        },
      },

      // الطباعة
      fontFamily: {
        sans: ['Inter var', 'system-ui', 'sans-serif'],
        heading: ['Poppins', 'sans-serif'],
        mono: ['Fira Code', 'monospace'],
      },

      fontSize: {
        'display-lg': ['4.5rem', { lineHeight: '1', letterSpacing: '-0.02em' }],
        'display-md': ['3.5rem', { lineHeight: '1.1', letterSpacing: '-0.02em' }],
        'display-sm': ['2.5rem', { lineHeight: '1.2', letterSpacing: '-0.01em' }],
      },

      // المسافات
      spacing: {
        '128': '32rem',
        '144': '36rem',
        'header': '4rem',
        'sidebar': '20rem',
      },

      // نقاط التوقف
      screens: {
        'xs': '475px',
        '3xl': '1920px',
      },

      // التأثيرات
      boxShadow: {
        'glow-sm': '0 0 10px rgba(59, 130, 246, 0.3)',
        'glow-md': '0 0 20px rgba(59, 130, 246, 0.4)',
        'glow-lg': '0 0 30px rgba(59, 130, 246, 0.5)',
      },

      // الرسوم المتحركة
      keyframes: {
        fadeIn: {
          '0%': { opacity: '0', transform: 'translateY(10px)' },
          '100%': { opacity: '1', transform: 'translateY(0)' },
        },
      },
      animation: {
        'fade-in': 'fadeIn 0.5s ease-out',
      },
    }
  },

  plugins: [],
}

الملخص

في هذا الدرس، تعلمت:

• بنية tailwind.config.js وأقسامه الرئيسية
• كيفية تكوين مسارات المحتوى لتوليد CSS صحيح
• الفرق الحاسم بين توسيع واستبدال قيم theme
• كيفية تخصيص الألوان، الخطوط، المسافات، ونقاط التوقف
• تخصيصات متقدمة للظلال، الرسوم المتحركة، و z-index
• أفضل الممارسات للحفاظ على ملف إعدادات قابل للتوسع

ملف الإعدادات هو المكان الذي يتحول فيه Tailwind من إطار أدوات إلى نظام التصميم الخاص بك. في الدرس التالي، سنغوص بشكل أعمق في توسيع السمة بقيم مخصصة وخصائص اعتباطية.