Skip to main content
FreeToolkit .ai

مُولِد تَشْكِيلات Tailwind أَنشئ ملفات تَشْكِيل Tailwind CSS مَع ألوان مخصصة وخطوط وأحجام شاشة.

مُولِد تَشْكِيلات Tailwind illustration
🎨

مُولِد تَشْكِيلات Tailwind

أَنشئ ملفات تَشْكِيل Tailwind CSS مَع ألوان مخصصة وخطوط وأحجام شاشة.

1

تعيين ألوان العلامة التجارية

اختر الألوان الأساسية والثانوية لتوسيع لوحة ألوان Tailwind.

2

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

حدد عائلات الخطوط، نصف قطر الحدود، استراتيجية الوضع الداكن، ونقاط التوقف على الشاشة.

3

نسخ التكوين

انسخ تكوين tailwind.config.js الكامل جاهز للاستخدام في مشروعك.

Loading tool...

What Is مُولِد تَشْكِيلات Tailwind?

مُنشئ تكوين Tailwind يُنشئ ملفات مخصصة من tailwind.config.js لمشاريع Tailwind CSS. يتحكم تكوين Tailwind في كيفية توليد الإطار لفصول المنفعة - من الألوان والخطوط إلى نقاط التوقف وتصرف الوضع الداكن. يسمح لك هذا الأداة بتعيين ألوان العلامة التجارية الأساسية والثانوية، وتحديد عائلات الخطوط للصندوق الخالي من النقط وخط الصدفة والخط الأحادي، واختيار نصف قطر الحدود الافتراضي، وتكوين استراتيجية الوضع الداكن (الطبقة أو وسائل الإعلام)، وإعداد مسارات المحتوى لمسح الفصول الدراسية، وتخصيص نقاط التوقف الاستجابة. يستخدم ملف التكوين الناتج تنسيق تكوين Tailwind الرسمي مع بناء الجملة module.exports الصحيح، جاهز لاستبدال أو 擴展 ملف tailwind.config.js الحالي.

Why Use مُولِد تَشْكِيلات Tailwind?

  • مختارات ألوان بصرية لاختيار الألوان التجارية
  • سلاسل خطوط قابلة للتكوين، ونقاط توقف، ووضع داكن
  • تنسيق تكوين Tailwind القياسي مع بناء الجملة الصحيح
  • جاهز للنسخ والاستخدام في أي مشروع Tailwind CSS

Common Use Cases

إعداد المشروع الجديد

توليد تكوين البداية عند إعداد مشاريع Tailwind الجديدة.

تخصيص العلامة التجارية

إنشاء تكوينات Tailwind مخصصة بالعلامة التجارية مع ألوان وخطوط مخصصة.

أساس نظام التصميم

بناء أساس التكوين لنظام تصميم مبني على Tailwind.

توحيد الفريق

توليد تكوينات متسقة لمشاركتها عبر مشاريع الفريق.

Technical Guide

يتحكم ملف tailwind.config.js في توليد فصول CSS من Tailwind. يحدد مصفوفة المحتوى الملفات التي سيتم مسحها لأسماء الفصول (المستخدمة لحذف CSS غير المستخدم). يمكن أن تكون خيار darkMode هو class (التبديل مع فئة) أو media (متابعة تفضيل نظام التشغيل). يضيف كائن theme.extend قيم مخصصة دون إلغاء الإعدادات الافتراضية. الألوان المحددة في extend متوفرة على أنها bg-primary و text-secondary وغيرها. تصبح عائلات الخطوط font-sans و font-serif و font-mono. تحدد نقاط التوقف الشاشة المخصصة نقاط التوقف الاستجابة الافتراضية. يحدد مفتاح BorderRadius الافتراضي قيمة الفصل المنحني الافتراضي. يحل Tailwind تكوين بالترتيب: الإعدادات الافتراضية، ثم قيم الموضوع، ثم قيم theme.extend. يمكن إضافة المكونات الإضافية إلى مصفوفة البرامج المساعدة من أجل أدوات إضافية. لمشاريع TypeScript، استخدم تعليق @type لدعم IDE.

Tips & Best Practices

  • 1
    استخدم theme.extend لإضافة قيم بدون فقدان إعدادات Tailwind الافتراضية
  • 2
    حدد مسارات المحتوى لتشمل جميع الملفات التي تستخدم فئات Tailwind
  • 3
    استخدم استراتيجية الوضع الداكن للفئة للحصول على التحكم الصريح في الوضع الداكن
  • 4
    طابق نقاط التوقف مع مواصفات شبكة نظام التصميم

Related Tools

مكان تجريبي ل Tailwind CSS - free online tool

مكان تجريبي ل Tailwind CSS

تطبيق فئات'utilty' من Tailwind CSS على العناصر مع معاينة مباشرة وإخراج HTML.

🎨 CSS & Design
مُولِد مقياس الطباعة - free online tool

مُولِد مقياس الطباعة

إنشاء مقياس طباعي متجدد مع حجم أساسي قابل للتعديل ونسبة ووحدات.

🎨 CSS & Design
مُولِد نظام المسافات - free online tool

مُولِد نظام المسافات

انشئ نظامًا متسقًا للمسافات مع وحدة أساسية قابلة للتخصيص ومضاعفات.

🎨 CSS & Design
مُولِّد متغيرات CSS - free online tool

مُولِّد متغيرات CSS

إنشاء خصائص مخصصة لCSS (متغيرات) للألوان والتباعد والتخطيط.

🎨 CSS & Design

Frequently Asked Questions

Q هل سوف يؤدي هذا إلى تجاوز تكويني الحالي لبرنامج Tailwind؟
استبدل ملف tailwind.config.js الحالي بالملف المولد، أو اندمج أقسام معينة.
Q ما هو الفرق بين وضع الفئة ووضع الوسائط الداكنة؟
يحتاج وضع الفئة إلى إضافة فئة داكنة يدويا. يتبع وضع الوسائط تفضيل الوضع الداكن للنظام الأساسي تلقائيا.
Q هل أحتاج إلى جميع خيارات التكوين؟
لا، Tailwind لديه إعدادات افتراضية معقولة. قم بتكوين ما تحتاجه فقط لتحديثه.
Q يمكنني إضافة المزيد من الألوان المخصصة؟
نعم، أضف مدخلات ألوان إضافية إلى كائن الألوان في theme.extend.
Q ما هي مسارات المحتوى التي يجب أن أستخدمها؟
شمل المسارات لجميع الملفات التي تحتوي على فئات Tailwind-عادة ./src/**/*.{js,ts,jsx,tsx,html}.

About This Tool

مُولِد تَشْكِيلات Tailwind is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.