مولّد إعدادات Tailwind

أنشئ ملف tailwind.config.js بألوان علامتك التجارية وخطوطك وتباعداتك المخصصة دون كتابة كائن JavaScript يدويًا. معالجة محلية 100% — لا يُرسل أي شيء إلى خادم.

مثال:

الوضع الداكن

مسارات المحتوى (content)نمط ملف في كل سطر.

الألوان المخصصة

الخطوط المخصصة

التباعدات المخصصة

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  darkMode: 'class',
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx,vue}'],
  theme: {
    extend: {
      colors: {
        brand: '#2563eb',
        accent: '#f59e0b',
      },
      fontFamily: {
        sans: ['Inter', 'ui-sans-serif', 'system-ui', 'sans-serif'],
      },
      spacing: {
        '18': '4.5rem',
      },
    },
  },
  plugins: [],
}

كيف يعمل

بدلاً من كتابة كائن إعداد Tailwind CSS يدويًا، أدخل ألوان علامتك التجارية وعائلات الخطوط والتباعدات الإضافية في النماذج أعلاه: تجمّع الأداة مباشرة ملف tailwind.config.js صالحًا مع قسم theme.extend منظمًا بشكل صحيح، جاهزًا ليحل محل ملفك الحالي.

لماذا استخدام `theme.extend` بدلاً من `theme` مباشرة؟

وضع إضافاتك في theme.extend يسمح بالاحتفاظ بجميع القيم الافتراضية لـ Tailwind (الألوان والأحجام والتباعدات القياسية) مع إضافة قيمك الخاصة؛ إعادة تعريف theme مباشرة ستستبدل القيم الافتراضية بالكامل، وهذا نادرًا ما يكون مرغوبًا.

ماذا يعني اختيار الوضع الداكن "class" أو "media"؟

مع class، يتم تفعيل الوضع الداكن بإضافة كلاس dark إلى عنصر أب (عادةً <html>)، مما يسمح بتبديله يدويًا عبر JavaScript؛ مع media، يتبع Tailwind تلقائيًا تفضيل نظام المستخدم دون تحكم يدوي.

يتم توليد ملف الإعداد مباشرة في متصفحك دون إرسال أي بيانات إلى خادم.

مولّد إعدادات Tailwind

كيف يعمل

لماذا استخدام theme.extend بدلاً من theme مباشرة؟

ماذا يعني اختيار الوضع الداكن "class" أو "media"؟

لماذا استخدام `theme.extend` بدلاً من `theme` مباشرة؟