تحديثات مثيرة في Tailwind v �
تم النشر بتاريخ 2024-12-22
تصفح:656
منذ عدة أشهر (في وقت كتابة هذا التقرير)، قامت Tailwind CSS بجعل عملها مفتوح المصدر على Tailwind CSS v4.0. (يمكنك العثور عليه على جيثب هنا).
أعلنت Tailwind مؤخرًا عن إصدار تجريبي عام لـ Tailwind CSS 4، وفي هذه المقالة سأغطي أبرز ميزات الإصدار الجديد. لذلك دعونا نبدأ!
تغييرات الهيكل العامخضعت Tailwind لعملية إعادة صياغة لمحركها مما أدى إلى تحسين الأداء بشكل كبير. الإصدارات الكاملة أسرع بما يصل إلى
5x، والإصدارات التزايدية تصل إلى 100x (لقد قرأت ذلك بشكل صحيح) بشكل أسرع.
يحتوي Tailwind v4 أيضًا على سلسلة أدوات موحدة. هل تتذكر ضرورة تثبيت البادئة التلقائية وpostcss في جميع مشاريع Tailwind الخاصة بك؟ لن تضطر إلى ذلك بعد الآن!باتباع أسلوب مثير للاهتمام في التكوين، تنتقل Tailwind من ملفات تكوين JS إلى تكوين CSS. وهذا يعني أنك ستقوم بتكوين المكونات الإضافية والموضوعات والسلوكيات الأخرى مباشرة في CSS الخاص بك.
تحصل Tailwind أيضًا على دعم لأحدث الميزات في CSS.
يحتوي CSS على شعار جديد (وميزات جديدة)! ?
أفضل الرموز ・ 23 نوفمبر
#css #webdev #برمجة #يناقش
ميزات جديدة؟
إذا كنت تريد تجربة الإصدار 4 من Tailwind، فاطلع على مستندات البدء للإصدار 4 (الإصدار التجريبي).الألوانإذا كنت تريد ترقية مشروعك بسهولة، فما عليك سوى تشغيل npx @tailwindcss/upgrade@next وسيقوم Tailwind بذلك نيابةً عنك.
كن حذرًا! قد تكون هناك تغييرات عاجلة.
تعتمد لوحة ألوان Tailwind v4 على oklch بدلاً من rgb. يعد نظام ألوان RGB مقيدًا بعض الشيء من حيث الاتساق عبر الشاشات والحيوية. نظرًا لأن نظام الألوان oklch أصبح الآن مدعومًا على نطاق واسع، فسوف يستفيد منه Tailwind v4!
يدعم Tailwind v4 الآن استعلامات الحاوية بشكل افتراضي. إذا كنت لا تعرف ما هي استعلامات الحاوية، فاسمح لي أن أشرح ذلك.
هل تعرف أشياء في Tailwind مثل md: وsm: وما إلى ذلك والتي تسمح لك بتخصيص CSS الذي يتم تطبيقه على أحجام مختلفة للشاشة؟
في تلك الحالات، تشير الفئات إلى حجم النافذة. باستخدام استعلامات الحاوية، يمكنهم الإشارة إلى حجم الحاوية بدلاً من ذلك.
في المثال أعلاه، ستحتوي الشبكة على 3 أعمدة - ليس عندما تصلwindow إلى الحجم الصغير، ولكن عندما يصل الحاوية إلى الحجم الصغير. وكما يمكنك أن تتخيل، يعد هذا مفيدًا للغاية في التخطيطات سريعة الاستجابة.
تحجيم الحقللا يعد تغيير حجم الحقل إحدى ميزات CSS المدعومة عالميًا حتى الآن، ولكنه سيكون رائعًا عندما يكون كذلك! بدلاً من الحاجة إلى JS لإنشاء مناطق نصية يتم تغيير حجمها تلقائيًا، يمكنك استخدام CSS فقط.
ويدعمه Tailwind v4!
جرّب العرض التوضيحي على موقع Tailwind الإلكتروني.
يمكنك الآن ببساطة إضافة فئة محتوى حجم الحقل إلى منطقة النص الخاصة بك لاستخدامها.
تحديثات السلالة
يحتوي
Tailwind Stable (قد لا تعرف ذلك) على متغير * يسمح لك باستهدافالأطفال المباشرين لعنصر مع فئة. على سبيل المثال:
سيستهدف الإصدار ** الجديد في Tailwind v4جميع السلالات:
الظلال الداخلية (والحلقات)سيكون من السهل الآن أيضًا إنشاء ظلال وحلقات داخلية على العناصر باستخدام فئتي inset-shadow وinset-ring.
هناك المزيد!إذا كنت تريد رؤية جميع الإضافات الجديدة، فانتقل إلى https://tailwindcss.com/docs/v4-beta وتحقق منها!
هذه المشاركة عبارة عن مشاركة #مناقشة! لهذا السبب أبقيتها قصيرة. أريد أن أعرف رأيك!
أعلم أن الكثير من كارهي Tailwind سيكون لديهم على الأرجح بعض التعليقات لي؟
الملخص: اترك تعليقًا!
هناك بالتأكيد بعض الميزات الجديدة المثيرة للجدل وأريد الحصول على بعض الآراء؟
شكرًا على القراءة!أفضل الرموز
بيان الافراج
تم نشر هذه المقالة على: https://dev.to/best_codes/exciting-updates-in-tailwind-version-4-40i0?1 إذا كان هناك أي انتهاك، يرجى الاتصال بـ [email protected] لحذفه
أحدث البرنامج التعليمي
أكثر>
-
استخدام WebSockets في Go للاتصال في الوقت الفعلييتطلب إنشاء التطبيقات التي تتطلب تحديثات في الوقت الفعلي - مثل تطبيقات الدردشة أو الإشعارات المباشرة أو الأدوات التعاونية - طريقة اتصال أسرع وأكثر...برمجة تم النشر بتاريخ 2024-12-23 -
لماذا لا يلتقط طلب POST الإدخال في PHP على الرغم من وجود رمز صالح؟معالجة خلل طلب POST في PHP في مقتطف الكود المقدم: action=''action=""action="<?php echo $_SERVER['PHP_SELF'];?>" فحص م...برمجة تم النشر بتاريخ 2024-12-23
-
هل يمكن لـ CSS أصلاً إدراج فاصل أسطر ضمن عناصر الكتلة المضمنة؟إدراج فواصل الأسطر في عناصر الكتلة المضمنة في CSS: استكشاف نظري في المشهد المتطور باستمرار لتطوير الويب، القدرة يظل التلاعب بتدفق المحتوى أمرً...برمجة تم النشر بتاريخ 2024-12-23
-
كيفية تحويل الوقت والتاريخ بسهولة بين المناطق الزمنية في PHP؟تحويل الوقت والتاريخ بين المناطق الزمنية في PHP باستخدام PHP، يمكنك بسهولة تحويل الوقت والتواريخ بين مناطق زمنية مختلفة. هذه الإمكانية مفيدة ب...برمجة تم النشر بتاريخ 2024-12-23
-
كيفية تثبيت واستخدام Pip لإدارة حزم Python على نظام التشغيل Windows؟النقطة: طريقة خالية من المتاعب لتثبيت حزم بايثون على نظام ويندوز قد يكون تثبيت حزم بايثون على نظام ويندوز مهمة شاقة، خاصة إذا كنت تواجه صعوبات...برمجة تم النشر بتاريخ 2024-12-23
-
كيفية الاختيار بين `type()` و`isinstance()` في بايثون للتحقق من نوع الكائن؟كيفية تحديد نوع الكائن يعد تحديد نوع الكائن أمرًا بالغ الأهمية لضمان اتساق البيانات وتنفيذ العمليات وفقًا لذلك. توفر بايثون وظيفتين مدمجتين له...برمجة تم النشر بتاريخ 2024-12-23
-
هل توجد طريقة Wildcard لمطابقة اسم العنصر في \"querySelector()\" و\"querySelectorAll()\" في JavaScript؟مطابقة اسم عنصر البدل مع "querySelector ()" و"querySelectorAll ()" في JavaScript المشكلة: يمكن أن يكون الاستعلام عن مستن...برمجة تم النشر بتاريخ 2024-12-23
-
لماذا يحصل تطبيق My Go على "فشل Recv: إعادة تعيين الاتصال بواسطة النظير" عند التشغيل في حاوية Docker؟مشكلة التعرض لمنفذ Docker: حل "فشل Recv: إعادة تعيين الاتصال بواسطة النظير" عند محاولة تشغيل تطبيق Go ثنائي داخل Docker الحاوية، قد ...برمجة تم النشر بتاريخ 2024-12-23
-
كيف يمكنني عرض كود C/C++ المعالج مسبقًا باستخدام Visual Studio؟عرض ملفات مصدر C/C المعالجة مسبقًا في Visual Studio عند العمل مع ملفات مصدر C/C التي تحتوي على العديد من توجيهات المعالج المسبق، يصبح الأمر من...برمجة تم النشر بتاريخ 2024-12-23
-
كيف يمكنني العثور على المستخدمين الذين لديهم أعياد ميلاد اليوم باستخدام MySQL؟كيفية التعرف على المستخدمين الذين لديهم أعياد ميلاد اليوم باستخدام MySQL تحديد ما إذا كان اليوم هو عيد ميلاد المستخدم باستخدام MySQL يتضمن الب...برمجة تم النشر بتاريخ 2024-12-23
-
كيف أقوم بإعادة تعيين فهرس Pandas DataFrame بعد إزالة الصفوف؟طريقة إعادة تعيين الفهرس في إطار بيانات Pandas يمكن أن تكون إعادة تعيين فهرس إطار البيانات ضرورية عندما تقوم بإزالة الصفوف وتريد الاحتفاظ بـ م...برمجة تم النشر بتاريخ 2024-12-23
-
كيفية إنشاء قوائم منسدلة يتم تفعيلها بالمرور وإزالة أيقونات الأسهم في Bootstrap؟القوائم المنسدلة التي يتم تنشيطها بالتمرير في Twitter Bootstrap يفضل العديد من المستخدمين أن تكون قوائم Bootstrap الخاصة بهم منسدلة عند التمري...برمجة تم النشر بتاريخ 2024-12-23
-
كيفية استبدال الخطوط المائلة العكسية المفردة بشكل صحيح بخطوط مائلة عكسية مزدوجة في سلاسل Java؟استبدال الخطوط المائلة العكسية المفردة بخطوط مائلة عكسية مزدوجة في السلاسل عند محاولة استخدام استبدال الكل لتحويل سلسلة مثل "\something\&qu...برمجة تم النشر بتاريخ 2024-12-22
-
لماذا يفشل التحقق من صحة البريد الإلكتروني الخاص بـ Java Regex على الرغم من العمل في البحث والاستبدال في Eclipse؟مشكلة في التحقق من صحة البريد الإلكتروني Regex في Java في محاولة التحقق من صحة عناوين البريد الإلكتروني باستخدام تعبير عادي، واجه مستخدم Java ...برمجة تم النشر بتاريخ 2024-12-22
دراسة اللغة الصينية
- 1 كيف تقول "المشي" باللغة الصينية؟ 走路 نطق الصينية، 走路 تعلم اللغة الصينية
- 2 كيف تقول "استقل طائرة" بالصينية؟ 坐飞机 نطق الصينية، 坐飞机 تعلم اللغة الصينية
- 3 كيف تقول "استقل القطار" بالصينية؟ 坐火车 نطق الصينية، 坐火车 تعلم اللغة الصينية
- 4 كيف تقول "استقل الحافلة" باللغة الصينية؟ 坐车 نطق الصينية، 坐车 تعلم اللغة الصينية
- 5 كيف أقول القيادة باللغة الصينية؟ 开车 نطق الصينية، 开车 تعلم اللغة الصينية
- 6 كيف تقول السباحة باللغة الصينية؟ 游泳 نطق الصينية، 游泳 تعلم اللغة الصينية
- 7 كيف يمكنك أن تقول ركوب الدراجة باللغة الصينية؟ 骑自行车 نطق الصينية، 骑自行车 تعلم اللغة الصينية
- 8 كيف تقول مرحبا باللغة الصينية؟ # نطق اللغة الصينية، # تعلّم اللغة الصينية
- 9 كيف تقول شكرا باللغة الصينية؟ # نطق اللغة الصينية، # تعلّم اللغة الصينية
- 10 How to say goodbye in Chinese? 再见Chinese pronunciation, 再见Chinese learning
