Tailwind CSS

ما هي Tailwind CSS ؟

مكتبة Tailwind CSS هي مكتبة صغيرة، بُنيت على فلسفة utility first↗، وتُستخدم في التصميم والبناء دون الحاجة إلي إستخدام Pure CSS، فهي مكتبة نقية لا تُقدم أي Components مُسبقة التصميم، غير أنها توفر مزايا عديدة بالمقارنة بباقي المكتبات، لمزيد من المعلومات شاهد a very different set of benefits](https://www.youtube.com/watch?v=CQuTF-bkOgc↗) فهي تجعل عملية التصميم سريعة بشكل لا يُصدق.

1. في الماضي كنا نكتب css في ملفات منفصلة

.my-class {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.25rem;
  padding: 1rem;
}

2. ثم نقوم استدعائها في مكان آخر

import "./my-class.css";

3. ثم نُضيف الـ class الي HTML

<div class="my-class">...</div>

المقابل لكل الخطوات السابقة في Tailwind CSS

1. فقط اكتب الـ Class في HTML وانتهى الموضوع

<div
  class="flex flex-col items-center justify-center rounded border border-gray-200 bg-white p-4"
>
  ...
</div>

إستخدام هذة الخصائص جَنبا إلى جَنب مع React Components يُعطيك قُوة هائلة لا مَثيل لها. تأتي Tailwind CSS بنظام مُدمج وجميل مُزود بمجموعة الوان واحجام و styles مُختارة بعناية كالطول والعرض والحواف، كما أيضا تاني مع breakpoints لإنشاء تصميم متوافق.

أعطي mewtru↗ خطابا رائعا عن building a design system using Tailwind CSS↗.

الاستخدام

تأكد من تثبيت إضافة Tailwind CSS لمحرر اكوادك لتُحسن جودة العمل.

الاضافات

• VSCode Extension↗
• JetBrains Integration↗
• Neovim LSP↗

الـ Formatting

الـ Classes في TailwindCSS يمكن أن تصبح فوضوية بسهولة، لذلك الـ Formating هو أمر لابد منه، إضافة Tailwind CSS Prettier Plugin↗ تحمل عنك هَم تنظيمها، لمزيد من المعلومات إقرأ recommended order↗

إضافة الـ classes إختبارياَ

• clsx↗
• classnames↗

مصادر مفيدة