ساحة تجربة Tailwind

كيفية استخدام ساحة تجربة Tailwind

تشغّل هذه الساحة مترجم Tailwind CSS v4 الرسمي للمتصفح بالكامل على جهازك. تكتب HTML عاديًا بأدوات التجميل على اليسار، وينتج المترجم الـCSS الموافق داخل إطار معاينة معزول، ويعرض لوحة أسفلها ورقة الأنماط الدقيقة المُنتجة. لا يُرفع شيء: المترجم وعلاماتك ومسوداتك تبقى كلها في المتصفح.

1. اختر نقطة بداية من محدد «القالب»: Hero، أو شبكة بطاقات، أو جدول أسعار، أو فارغ؛ كما يُستعاد نصك تلقائيًا بين الزيارات.
2. حرّر HTML في المحرّر على اليسار. يُدرج الضغط على Tab مسافتين، وتُعاد ترجمة المعاينة بعد نحو 500 مللي ثانية من توقفك عن الكتابة.
3. بدّل «التفاف ناعم» للتحكم في كسر الأسطر، ومحدد «حجم الخط» لضبط حجم نص المحرّر.
4. شغّل «معاينة داكنة» لإضافة الفئة "dark" إلى وثيقة المعاينة؛ تستجيب أدوات مثل dark:bg-slate-900 فورًا.
5. اقرأ القواعد المولدة في لوحة «الـCSS المترجم» وانسخها بـ«نسخ CSS» عند الحاجة.
6. استخدم «نسخ HTML» للعلامات الخام، أو «تنزيل HTML» للحصول على ملف مستقل مضمن فيه الـCSS المترجم، جاهزًا للفتح دون اتصال.

لا يحمل التنزيل أنماطًا حقيقية إلا بعد ترجمة واحدة على الأقل، فدع المعاينة تُعرض مرة قبل التصدير. لتقليل الـCSS المولد احذف العناصر غير المستخدمة من القالب — تعكس اللوحة دائمًا بالضبط ما تحتاجه علاماتك الحالية.