Tailwind CSSچیست؟

همانطور که میدانید برای ایجاد صفحات وب از html که ساختار اولیه و به عبارتی حالت خام وب سایت های ما می باشند استفاده می شود و پس از آن برای ایجاد ظاهری بهتر از css استفاده می کنیم از فریم ورک های مطرح css می توان به bootstrap و فریم ورک تازه منتشر شده Tailwind نام برد در این مقاله به بررسی این فریم ورک محبوب در دنیای وب می پردازیم.

Tailwind CSSچیست؟

Tailwind یکی از فریم ورک های CSS است که در سال 2019 منتشر شد و با توجه به جدید بودن این فریم ورک استقبال بسیار خوبی از آن شده و همه روزه به تعداد افرادی که ازاین فریم ورک استفاده می کننند بیشتر می شود.

تفاوت Tailwind CSS با bootstrap

فریم ورک های مانند بوت استرپ از کامپوننت ها استفاده می کنند که همین کامپوننت ها به دلیل داشتن ساختاری آماده اغلب شبیه به هم هستند ولی در فریم ورک Tailwind کامپوننت وجود ندارد و از کلاس ها برای ایجاد صفحات وب استفاده می شود.

اگر به دنبال فریم ورکی هستید که با استفاده از آن بتوانید وب سایت های متفاوت ایجاد کنید بهترین گزینه Tailwind است.

مزایای وریم ورک Tailwind CSS چیست؟

هدف از ایجاد این فریم ، ایجاد کد های css به صورت سفارشی است شما در این فریم ورک بر خلاف فریم ورک های دیگری مانند بوت استرپ کنترل کامل بر روی استایل دهی دارید.

Tailwind با توجه به استایل های آماده ی که دارد سرعت استایل دهی به تگ های html را با سرعت بسیار بالای انجام می دهد.

Tailwind خاصیت رسپانسیو دارد.

امنیت بالاتری نسبت به سایر رقبا دارد.

نقاط ضعف وریم ورک Tailwind CSS چیست؟

با توجه به جدا سازی استایل دهی و html در این فریم ورک سند html پیچیده تری داریم.

نسبت به فریم ورک های دیگر زمان بیشتری برای یادگیری نیاز است.

در فریم ورکی مانند بوت استرپ کامپننت های وجود دارد که کار را برای ما ساده می کنند ولی در Tailwind از این کامپوننت استفاده نمی شود.

نبود مستندات کافی

نصب Tailwind CSS با NPM

شما با استفاده از دستور زیر می توانید Tailwind را نصب کنید:

# Using npm
npm install tailwindcss

# Using Yarn
yarn add tailwindcss

نحوه اضافه کردن Tailwind به پروژه

شما با استفاده از دستورات زیر می توانید Tailwind به css خود اضافه کنید:

@tailwind base;

@tailwind components;

@tailwind utilities;

اگر از کتابخانه react استفاده می کنید می توانید از دستورات زیر استفاده کنید:

@import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";

در این مقاله می توانید با سایر فریم ورک های css آشنا شوید.

امیدوارم این مقاله برای شما مفید بوده باشد.

موفق و سلامت باشید.