مولّد ظلال Tailwind
ابنِ ظلًا متعدد الطبقات بصريًا، واحصل على فئة shadow-[...] بقيمة حرة في Tailwind
بالإضافة إلى CSS الخام.
كيف يعمل
يجتمع الإزاحة الأفقية والرأسية والتمويه والانتشار واللون ومفتاح inset لكل طبقة في مقطع
box-shadow واحد، وتُربط الطبقات المتعددة بفواصل، وهي صياغة CSS القياسية
للظلال المتعددة. أما بالنسبة لفئة Tailwind، فتُستبدل مسافات القيمة نفسها بشرطات سفلية
وتبقى الفواصل كما هي (مُحلِّل القيمة الحرة في Tailwind يتوقع نمط
shadow-[0_4px_6px_rgba(0,0,0,0.1)])، ثم تُغلَّف داخل
shadow-[...]. يُضبط نمط box-shadow الفعلي لمربع المعاينة على
نسخة CSS الخام، بحيث يطابق ما تراه كلا المخرجين تمامًا.
يُحسب كل شيء داخل جافاسكريبت هذه الصفحة وفق القيم التي تضبطها. لا شيء يُرفع.
أسئلة شائعة
كيف تعمل فئة ظل بقيمة حرة في Tailwind؟
يتيح لك Tailwind كتابة shadow-[<أي قيمة CSS>] وتُترجم مباشرة إلى box-shadow: <أي قيمة CSS>، دون الحاجة لتعديل ملف الإعداد. يجب أن تتحول المسافات داخل القيمة إلى شرطات سفلية، وهذه الأداة تتولى ذلك تلقائيًا عنك.
هل يمكنني تكديس عدة طبقات ظل؟
نعم، انقر «إضافة طبقة» لإضافة ظل آخر فوقه. يدعم box-shadow الحقيقي طبقات مفصولة بفواصل، وتبني هذه الأداة فئة القيمة الحرة بنفس الطريقة، بربط الطبقات بفواصل.
هل يُرسل هذا إلى أي مكان؟
لا، يُبنى الظل ويُعاين بالكامل داخل محرك CSS في متصفحك. لا شيء يُرفع.