إتقان Tailwind CSS مع وضع Just-in-Time (JIT)

نشرت: 2022-04-23

تساعدنا أطر عمل المنفعة الأولى في تصميم صفحات الويب الخاصة بنا بشكل أسرع ، وأصبحت Tailwind CSS واحدة من أكثر الصفحات شيوعًا. لكن كونك مشهورًا لا يعني الكمال.

كانت هناك بعض التحديات في استخدام Tailwind CSS ، مثل امتلاك ورقة أنماط ضخمة أثناء التطوير والحاجة إلى تمكين متغيرات إضافية بمفردنا ، من بين أمور أخرى. سيكون حل بعض هذه التحديات هو تركيزنا العام في هذا البرنامج التعليمي.

في هذا البرنامج التعليمي ، سنتحدث عن ميزة مهمة جدًا في إطار عمل Tailwind CSS والمعروفة باسم المترجم في الوقت المناسب ، والتي يشار إليها بشكل أكثر شيوعًا باسم مترجم JIT.

سنسلط الضوء على ميزات وفوائد استخدام مترجم Tailwind CSS JIT ، وكيفية تمكينه ، والاطلاع على بعض الأمثلة العملية.

هيا بنا نبدأ.

ما هو مترجم Tailwind CSS JIT (Just-in-Time)؟

قبل أن نتحدث عن المترجم الفوري ، نحتاج أولاً إلى التحدث عن Tailwind CSS.

Tailwind CSS هو إطار عمل CSS أول من نوعه مع مجموعة من فئات CSS المحددة مسبقًا والتي يمكن تطبيقها مباشرة في ترميزنا لتسريع تصميم صفحات الويب والحفاظ على الاتساق في التصميم باستخدام أنظمة محددة مسبقًا.

قبل إصدار مترجم JIT ، كان حجم ملف Tailwind CSS الذي تم إنشاؤه بعد التثبيت عادةً يصل إلى 3 ميغابايت. بينما تستمر في تكوين وتخصيص Tailwind ، على الرغم من ذلك ، يزداد حجم الملف - في بعض الحالات ، يمكن أن ينتهي بك الأمر بورقة أنماط بحجم 15 ميغابايت.

على الرغم من أنه سيتم التخلص من جميع الأنماط غير المستخدمة أثناء الإنتاج ، إلا أن هذا ليس هو الحال أثناء التطوير. باستخدام ورقة أنماط كبيرة تصل إلى 10 ميجابايت أو حتى 20 ميجابايت ، فإننا ملزمون بمواجهة المشكلات والتسبب في تأخير أدوات التطوير الخاصة بنا.

باستخدام مترجم JIT ، يتم إنشاء الأنماط أثناء قيامنا ببناء مشاريعنا. هذا يعني أنه سيتم تضمين فئات الأدوات التي تستخدمها حاليًا فقط في حجم ورقة الأنماط الخاصة بك ، وليس كل فئات الأدوات التي تأتي مع Tailwind CSS.

مزايا استخدام وضع Tailwind CSS JIT

في هذا القسم ، سنناقش بعض فوائد استخدام مترجم JIT. يشملوا:

ورقة الأنماط الخاصة بك هي نفسها في التطوير والإنتاج.
وقت بناء أسرع.
يتم تمكين جميع المتغيرات بشكل افتراضي.
التجميع أثناء التطوير أسرع بكثير.
يتم إنشاء الأنماط المستخدمة فقط.
يمكن تكديس المتغيرات.
تحسين أداء أدوات التطوير.

عيوب استخدام مترجم Tailwind CSS JIT

القيود المعروفة حاليًا وفقًا لوثائق GitHub لمجمع JIT هي:

خيارات PurgeCSS المتقدمة غير مدعومة.
"يمكنك فقط @apply على الفئات التي تعد جزءًا من النواة ، أو تم إنشاؤها بواسطة المكونات الإضافية ، أو تم تحديدها ضمن قاعدة @layer . لا يمكنك @apply فئات CSS عشوائية لم يتم تحديدها ضمن قاعدة @layer . "
لا يوجد سوى دعم لـ PostCSS 8.

يتم استخدام التوجيه @apply لتطبيق فئات الأدوات المساعدة في CSS المخصص لدينا. يكون هذا مفيدًا عندما نحدد أنماط CSS مخصصة ولكننا نفضل استخدام بعض فئات الأدوات المساعدة المحددة بالفعل ، فيما يلي مثال على كيفية عمل التوجيه @apply :

 .my-custom-css { @apply text-green-500; }

في الكود أعلاه ، أضفنا لونًا أخضر إلى فئة CSS مخصصة. تم تطبيق اللون الأخضر باستخدام فئة الأداة Tailwind.

تعرف على ميزة مهمة جدًا في إطار عمل Tailwind CSS ، والمعروفة باسم المترجم في الوقت المناسب ، في هذا الدليل المفيد. انقر للتغريد

كيفية تمكين وضع Tailwind CSS JIT

لاحظ أنه حتى وقت كتابة هذا التقرير ، تم إطلاق الإصدار 3 من Tailwind CSS بالفعل وتم تمكينه افتراضيًا عند تثبيت Tailwind CSS. التفسيرات أدناه لتمكين مترجم JIT لا تنطبق على الإصدار 3 وما فوق. يتوافق كل مثال آخر تم تناوله في هذا البرنامج التعليمي مع الإصدار 3.

من السهل جدًا تمكين مترجم JIT. كل ما عليك فعله هو تحديث ملف tailwind.config.js الخاص بك عن طريق إضافة خاصية الوضع التي يجب أن يكون لها قيمة "jit".

إليك الشكل الذي يجب أن يبدو عليه ملف Tailwind.config.js:

 module.exports = { mode: 'jit', purge: ['./public/*.html'], darkMode: false, // or 'media' or 'class' theme: { extend: {}, }, variants: { extend: {}, }, plugins: [], }

السطر الذي يجب التركيز عليه هو الجزء الذي أضفنا إليه:

 الوضع: 'jit'

هذا يمكننا من استخدام ميزات مترجم JIT.

بعد الانتهاء من ذلك ، يمكنك تشغيل أمر الإنشاء ورؤية حجم ملفك يتضاءل. الأنماط الوحيدة التي ستراها هي الأنماط التي تستخدمها.

مع حجم الملف المنخفض ، ستكون ورقة الأنماط الخاصة بك أثناء التطوير والإنتاج هي نفسها. سيتم أيضًا تقليل احتمالية تأخر أدوات المطور إلى الحد الأدنى وسيتم تجميع التعليمات البرمجية بشكل أسرع أثناء إنشاء مشاريعك.

بعد ذلك ، سنرى بعض التطبيقات العملية لمترجم JIT.

هذا يمكننا من استخدام ميزات مترجم JIT.

بعد ذلك ، سنرى بعض التطبيقات العملية لمترجم JIT.

كيفية استخدام مترجم Tailwind CSS JIT

سنرى بعض الأمثلة العملية لمترجم JIT في هذا القسم. سنبدأ بقيم عشوائية تساعدنا في توسيع نظام تصميم Tailwind.

القيم التعسفية

قد تظهر حالات حيث نفضل استخدام قيم خارج نظام التصميم الذي تم إنشاؤه بالفعل. قد تكون هذه القيم للألوان ، والحشو ، والهامش ، والعرض ، وما إلى ذلك.

يتيح لنا مترجم JIT تحقيق ذلك باستخدام القيم التعسفية. تسمح لنا هذه القيم العشوائية بالخروج من نظام التصميم وتحديد قيمنا المخصصة. سترى هذه القيم في بناء الجملة هذا: [300 بكسل] ، [# FA8072].

للقيام بذلك ، يجب علينا تضمين القيمة بين قوسين معقوفين حتى تعرف Tailwind أننا نحدد قيمًا جديدة في نظام التصميم الخاص بنا. فيما يلي مثال أدناه:

 <div class="mt-[300px] w-[500px]"> </div>

في المثال أعلاه ، استخدمنا قيمتين جديدتين - 300 بكسل و 500 بكسل - لم تكن موجودة في نظام التصميم في البداية. قبل استخدام برنامج التحويل البرمجي JIT ، ربما يتعين عليك أولاً تحديد هذه القيم في ملف config.js لتحقيق نفس التأثير.

يوضح المثال التالي كيف يمكنك تحديد قيم الألوان الجديدة على النحو التالي:

 <p class="bg-[#FA8072] ">This paragraph has a salmon background </p>

هنا ، قمنا بإنشاء فقرة بلون خلفية سمك السلمون. لن ترى فئة أداة Tailwind تشير إلى bg-salmon ، لكننا قادرون على تحديد ذلك باستخدام قيمة عشوائية.

هل تعاني من مشاكل التوقف و WordPress؟ Kinsta هو حل الاستضافة المصمم لتوفير الوقت! تحقق من ميزاتنا

المتغيرات القابلة للتكديس

باستخدام مترجم JIT ، يتم تمكين جميع المتغيرات افتراضيًا بحيث يمكنك نسيان استخدام ملف config.js لتمكين أي منها. بالإضافة إلى ذلك ، يمكن تكديس المتغيرات لتحقيق نتائج رائعة.

يتم فصل كل متغير بنقطتين.

هنا مثال:

 <button class="sm:dark:disabled:focus:hover:bg-blue-300">

يُنشئ الرمز أعلاه زرًا مع إلغاء توازن خاصية التركيز ويتحول إلى اللون الأزرق عند التمرير فوقه.

العناصر الزائفة

يسمح لنا مترجم JIT بتصميم عنصر زائف. تُستخدم العناصر الزائفة لتصميم أجزاء معينة من عنصر مثل تصميم الحرف الأول من عنصر أو إدراج محتوى قبل / بعد عنصر.

وفيما يلي بعض الأمثلة على ذلك:

 <p class="first-letter:bg-green-600"> First letter will have a green color </p>

في المثال أعلاه ، سيكون للحرف الأول "M" لون أخضر.

 <p class="selection:bg-green-600"> Highlight this text to see a green color. </p>

عندما تقوم بتمييز النص من الكود أعلاه ، سيكون له لون خلفية أخضر.

ألوان الحدود لكل جانب

نظرًا لاعتبارات حجم الملف ، تم استبعاد هذه الميزة في البداية ، ولكن تغير ذلك مع إصدار مترجم JIT. يمكننا إعطاء كل حد لونًا مختلفًا.

دعونا نرى مثالاً على هذا:

 <div class="border-2 border-t-red-400 border-r-blue-400 border-b-yellow-400 border-l-green-400"> </div>

لقد قدمنا ألوانًا متعددة لحدود div - الحد العلوي باللون الأحمر والحد الأيمن باللون الأزرق والحد السفلي باللون الأصفر والحد الأيسر باللون الأخضر.

وضع JIT في Tailwind CSS الإصدار 3

من Tailwind CSS الإصدار 3 وما بعده ، يتم تمكين مترجم JIT افتراضيًا عندما نقوم بتثبيت Tailwind CSS لذلك لا داعي للقلق بشأن تغيير أي شيء في ملف tailwind.config.js . يتيح لنا ذلك الوصول إلى جميع ميزات مترجم JIT أثناء التنقل. كل ما يتعين علينا القيام به هو اتباع تعليمات التثبيت للإصدار الحالي ، ونحن متوقفون عن العمل.

ما هو مترجم JIT ... وكيف يمكنه تحسين موقعك؟ يحتوي هذا الدليل على الإجابة انقر للتغريد

ملخص

أخذ مترجم JIT إطار عمل Tailwind CSS إلى مستوى جديد تمامًا. جاء إصداره مع ميزات مفيدة جديدة لتحسين استخدامنا لإطار العمل. لم يعد علينا القلق بشأن حجم ملفنا الثقيل لدرجة تجعل أدوات التطوير لدينا تتأخر ، نظرًا لأنه يتم إنشاء الأنماط التي نستخدمها بالفعل فقط ، وكل ذلك أثناء التنقل.

لقد رأينا بعض الأمثلة على الميزات الجديدة مثل تكديس المتغيرات وعناصر التصميم باستخدام العناصر الزائفة واستخدام القيم العشوائية لتوسيع نظام التصميم الخاص بنا والميزة المطلوبة بشدة - القدرة على تصميم كل جانب من حدود العنصر بشكل فردي. لقد وصلنا بعيدًا عن حدود إمكانات Tailwind's JIT هنا ، لذا ستكون خطواتك التالية هي الاختبار بنفسك واستكشاف أفضل طريقة لتسخير ميزات JIT لعملك الخاص.

ما الأشياء الرائعة التي قمت بإنشائها باستخدام مترجم JIT؟ شارك بأفكارك في التعليقات أدناه.