فریمورک Tailwind CSS و هرچیزی که باید درموردش بدونیم! + مزایا و معایب تیلویند !
این مقاله شامل چه چیزایی میشه ؟
همین ابتدا صادقانه بگم : اگه از فریمورک Tailwind CSS استفاده کنید، دیگه نمیتونید کنار بزاریدش 🙂 تیلویند انقدر فوق العادس که اگه باهاش آشنا بشید، دنیای بدون Tailwind css رو نمیتونید تصور کنید !! با فِرانت اِندی همراه باشید تا فریمورک Tailwind CSS رو جامع و تخصصی بررسی کنیم و ببینیم Tailwind CSS چیست … 🙂
فریمورک Tailwind CSS چیست ؟
تیلویند سی اس اس ( Tailwind CSS ) یک فریمورک طراحی CSS هست که ابزار ها و کلاس های آماده CSS در اختیار ما میزاره.
دیگه نیازی نیست مثل قدیم یک فایل CSS بسازیم و استایل های CSS بنویسیم! فقط کافیه از اسم کلاس های آماده ای استفاده کنیم که خود Tailwind CSS در اختیار ما میزاره!
بر خلاف اکثر فریمورک های CSS که کامپوننت های آماده و از پیش ساخته شده در اختیار ما میزاشتن، Tailwind هیچ کامپوننت آماده ای به ما نمیده!
صرفا یکسری کلاس ( class ) در اختیار ما میزاره تا ما با استفاده از این کلاس ها بتونیم به صفحات خودمون استایل بدیم.
با این روش دیگه نیازی به ایجاد فایل های css هم نداریم!
تو تیکه کد های زیر، ما به دکمه ی خودمون به 2 روش استایل CSS دادیم :
استایل با فریمورک Tailwind CSS
( به کمک تیلویند )
<button class="bg-blue-400 p-4 text-white">
من یه دکمه ی الکی ام
</button>
استایل با CSS خام
( بدون تیلویند )
.btn {
background-color: blue;
color: white;
padding: 1rem;
}
اگه به تیکه کد سمت راست نگاه کنیم، میبینیم که دیگه از استایل های خام CSS برای استایل دادن به button خودمون استفاده نکردیم! صرفا از یکسری class های آماده استفاده کردیم. اما خروجی هر 2 تیکه کد یکسانه !!!
این کلاس ها ( class ) دقیقا همون کلاس های Tailwind css هستن که میتونیم ازشون برای استایل دهی صفحات خودمون استفاده کنیم.
اما اگه بخوایم دقیقا استایل های تیکه کد های بالارو در حالت CSS خام و Tailwind CSS مقایسه کنیم، میتونیم به زیر نگاهی کنیم:
Tailwind CSS
bg-blue-400
CSS
background-color: blue;
Tailwind CSS
p-4
CSS
padding : 1rem;
Tailwind CSS
text-white
CSS
color: white ;
بخش های قرمز رنگ CSS خام هستن و بخش های سبز رنگ Tailwind CSS هستن. تا اینجای کار فقط یه اشاره کلی به تیلویند سی اس اس کردیم، بریم یکم جزئی تر Tailwind CSS رو بررسی کنیم 🙂
همچنین میتونید از آموزش Tailwind CSS رایگان استفاده کنید :
فریمورک Tailwind CSS رایگانه ؟!
بله 🙂 Tailwind CSS کاملا رایگان و Open Source هست !
حتی ما میتونیم با مراجعه به Tailwind CSS Github تو توسعه این کتابخونه مشارکت داشته باشیم! ( در حال حاضر 273 نفر در توسعه این فریمورک مشارکت داشتن )
طراحی آسون تر با Tailwind CSS در فرانت اند !
اگه از فریمورک Tailwind CSS استفاده کنیم، مزایای زیر رو برامون داره :
- استایل های پروژه خودمون رو بر اساس یک استاندارد و چارچوب مشخص جلو میبریم ( تو پروژه های تیمی خیلی سرعت توسعه رو بالا میبره )
- دسترسی به بیش از 4394 رنگ، margin , padding , z-index و ..
- عدم استفاده از استایل های بلا استفاده ( بر خلاف سایر فریمورک های CSS که اهمیتی نمیدن که به یک استایل مشخص نیازی دارید یا خیر، درهرصورت اون استایل رو به پروژتون اضافه میکنن تا اگه نیاز داشتید ازش استفاده کنید )
- افزایش چشمگیر سرعت توسعه پروژه ( سرعت استایل دهی )
- کاهش حجم استایل های پروژه ( کاهش حجم فایل های css. پروژه )
حالا که بحث مقایسه Tailwind CSS و سایر فریمورک های CSS پیش اومد، بیاید فریمورک تیلویند رو با یکی از محبوب ترین CSS Freamwork ها مقایسه کنیم ..
مقایسه Tailwind CSS و Bootstrap ( کدوم بهتره ؟ )
میتونیم مقایسه رو اینطور شروع کنیم که فریمورک Tailwind CSS یک utility-first CSS Freamwork هست اما بوت استرپ ( Bootstrap ) از کامپوننت های آماده که در توسعه فِرانت اِند به ما کمک میکنن، تشکیل شده.
بزارید واضح تر بگیم :
مقایسه Tailwind CSS و Bootstrap مثل مقایسه خیار و پراید هست! ( چون اصلا کاربری یکسانی ندارن )
درواقع بوت استرپ از ده ها کامپوننت آماده تشکیل شده که این کامپوننت ها به کمک CSS و JS آماده شدن اما Tailwind CSS هیچ کامپوننت آماده ای نداره و صرفا یکسری کلاس ( class ) در اختیار ما میزاره تا سرعت توسعه و استایل دهی ما بیشتر بشه.
درواقع اگه از Tailwind CSS استفاده کنیم، حجم CSS تولید شده نهایی خیلی کمه اما اگه از فریمورک Bootstrap استفاده کنیم، حجم نهایی CSS و JS تولید شده به دلیل آماده بودن کامپوننت ها خیلی زیاد میشه.
در واقع بوت استرپ کاری نداره که از کدوم Component این فریمورک میخواید استفاده کنید، همون اول کار همه کامپوننت هارو به پروژه شما اضافه میکنه.
اما در مقایسه تیلویند و بوت استرپ میشه گفت که هر دو قابل شخصی سازی ( Customize ) هستن.
درنهایت همیشه سعی کنید انتخاب اولتون Tailwind CSS باشه و سراغ فریمورک هایی که کامپوننت آماده در اختیارتون میزارن، نرید.
اما در جریان باشید که میشه تیلویند رو در کنار سایر Css Freamwork ها مثل کتابخانه Material UI استفاده کرد!
چه شرکت ها و کمپانی هایی از فریمورک Tailwind CSS استفاده میکنن ؟!
از اونجاییکه فریمورک تیلویند سی اس اس بشدت محبوب و فوق العادس، شرکت های خیلی بزرگ و مشهوری رفتن سراغش!
برخی از شرکت ها و کمپانی هایی که از فریمورک Tailwind CSS استفاده میکنن، عبارتند از :
گوگل ( Google )
اسپاتیفای ( Spotify )
نتفلیکس ( Netflix )
ناسا ( Nasa )
مایکروسافت ( Microsoft )
لاراول ( Laravel )
گیت هاب ( Github )
و …
ابزار Tailwind Play !
تیم Tailwind CSS یه ابزار خیلی خفن و باحال در اختیار ما گذاشتن به اسم Tailwind Play !
ابزار Tailwind Play یک ادیتور آنلاین هست که روی مرورگر ما اجرا میشه و به ما اجازه میده که استایل های Tailwind CSS رو بصورت زنده تست کنیم و حتی خروجیش رو بصورت زنده ببینیم 🙂
این ابزار دقیقا مثل CodePen هست با این تفاوت که بصورت اختصاصی برای فریمورک Tailwind CSS نوشته شده.
با مراجعه به لینک پاراگراف بالا ( سایت تیلویند ) میتونیم از این ابزار استفاده کنیم. ویژگی های این ابزار عبارتند از :
یک HTML Editor قدرتمند که autocompletion ( تکمیل کننده خوکار کد ) داره!
یک CSS Editor قدرتمند!
تنظیمات جهت کانفیگ کردن Editor این ابزار!
فرمت کردن کد با یک کلیک ( Code Formatter )
یک Version Switcher ( جهت تعویض نسخه Tailwind CSS به نسخه های قدیمی تر یا جدیدتر )
یک Layout Switcher !
قابلیت Dark Mode / Light Mode در ویرایشگر !
چطور از فریمورک Tailwind CSS تو پروژمون استفاده کنیم ؟
فریمورک Tailwind CSS شامل مجموعه ای از استایل ها هست که بصورت کلاس های مخفف شده در اختیار ما قرار میگیرن. ما از فریمورک تیلویند سی اس اس تو هر پروژه ای میتونیم استفاده کنیم ( هر فریمورک یا کتابخانه ای )
نصب Tailwind CSS !
ما به دو روش میتونیم نصب Tailwind CSS رو انجام بدیم :
نصب Tailwind به روش CLI
روش CLI ساده ترین و سریع ترین روش نصب فریمورک تیلویند هست.
مرحله اول :
باید کتابخانه tailwindcss رو به کمک npm نصب کنیم:
npm install -D tailwindcss
npx tailwindcss init
تو خط اول کتابخانه tailwindcss رو نصب کردیم و تو خط 2 فایل کانفیگ TailwindCss رو ایجاد کردیم. حالا باید داخل این فایل کد کانفیگ/تنظیمات زیر رو قرار بدیم :
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
تو خط 3 تیکه کد بالا، گفتیم که Tailwind CSS باید تمام فایل هایی که فرمت html یا js دارن رو بررسی کنه تا Class های Tailwind رو تبدیل به CSS خام کنه. ابتدای خط 3 آدرس پوشه src رو دادیم، یعنی صرفا فایل های داخل همین پوشه رو آنالیز کن.
میشه به جای آدرس پوشه src ، آدرس هر پوشه ی دیگه ای رو قرار داد، همچنین ما میتونیم فرمت فایلهای دیگه مثل jsx رو هم در کنار html و js قرار بدیم تا آنالیز بشن.
مرحله دوم :
فریمورک TailwindCSS تو سه لایه مختلف اجرا میشه، این لایه ها base , components و utilities هستن. برای اینکه این لایه هارو مشخص کنیم، باید یک فایل در مسیر src/input.css بسازیم و لایه هارو بصورت زیر داخل این فایل مشخص کنیم :
@tailwind base;
@tailwind components;
@tailwind utilities;
مرحله چهارم :
حالا باید از Tailwind CSS بخوایم فایل های مارو اسکن کنه و تمام Class هایی که مشخص کردیم رو به CSS خام تبدیل کنه. این خواسته با وارد کردن دستور زیر تو ترمینال محقق میشه :
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
اجازه بدید تا دستور بالارو ریز به ریز بررسی کنیم …
تو بخش اول این دستور آدرس src/input.css رو دادیم ( این آدرس همون فایلی هست که تو مرحله سوم ساختیم ).
تو بخش دوم دستور بالا، آدرس فایل output.css رو دادیم.
این فایل شامل تمامی CSS های خام میشه که خود Tailwind میسازتشون ( کلاس های Tailwind رو که داخل فایل های خودمون پیدا میکنه، به CSS خام تبدیل میکنه و داخل این فایل قرار میده )
مرحله پنجم :
تو مرحله آخر باید از فایل output.css که خروجی Tailwind هست استفاده کنیم.
برای اینکار باید فایل index.html خودمون رو باز کنیم و آدرس فایل output.css رو داخلش قرار بدیم :
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/dist/output.css" rel="stylesheet">
</head>
<body>
<h1 class="text-3xl font-bold underline">
خدا برسه به دادت
</h1>
</body>
</html>
و تمام:)
به روش CLI تونستیم از فریمورک TailwindCSS استفاده کنیم. حالا بریم روش دوم نصب Tailwind رو بررسی کنیم ( البته اگه از روش اول استفاده کردید، دیگه نیازی به استفاده از روش دوم نیست )
نصب Tailwind CSS به روش PostCSS !
ما میتونیم TailwindCSS رو به عنوان یک افزونه/پلاگین PostCSS نصب کنیم. این ساده ترین روش برای ادغام TailwindCSS با ابزار های Build مثل webpack و vite هست.
مرحله اول :
تو مرحله اول باید tailwindcss رو به کمک npm نصب کنیم و فایل کانفیگ تیلویند رو ایجاد کنیم :
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
تو خط اول ما پکیج tailwindcss رو نصب کردیم و تو خط دوم فایل کانفیگ این فریمورک رو ایجاد کردیم!
مرحله دوم :
حالا باید tailwind رو به تنظیمات PostCSS خودمون اضافه کنیم.
برای انجام اینکار وارد فایل postcss.config.js میشیم و tailwindcss و autoprefixer رو به این فایل کانفیگ اضافه میکنیم :
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
}
مرحله سوم :
حالا باید مشخص کنیم که Tailwind باید چه فایل هایی رو اسکن کنه. برای انجام اینکار فایل tailwind.config.css رو در روت پروژه باز میکنیم ( اگه وجود نداشت، بسازید ) و کد زیر رو بهش اضافه کنید :
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
تو خط 3 تیکه کد بالا به Tailwind گفتیم که وارد پوشه src بشو و هرچی فایل با فرمت html و js دیدی اسکن کن. اسکن یعنی داخل این فایلها هرچی کلاس Tailwind پیدا کردی، به CSS خام تبدیل کن!
یعنی اگه Tailwind کلاس d-flex رو پیدا کنه، در نهایت به display : flex تبدیلش میکنه!
مرحله چهارم :
تو این مرحله باید لایه های TailwindCSS رو داخل فایل main.css قرار بدیم. کافیه فایل main.css رو بسازیم و لایه های زیر رو داخلش قرار بدیم :
@tailwind base;
@tailwind components;
@tailwind utilities;
مرحله پنجم :
حالا برای اینکه Tailwind شروع به کار کنه، باید دستور زیر رو تو ترمینال وارد کنیم ( اگه دستور دیگه ای برای اجرا شدن پروژتون تنظیم کردید، از داخل فایل package.json و بخش scripts میتونید پیداش کنید ) :
npm run dev
مرحله ششم :
عالیه! حالا میتونیم از کلاس های TailwindCSS توی فایل های خودمون استفاده کنیم. تو تیکه کد زیر از برخی کلاس های تیلویند سی اس اس استفاده کردیم :
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/dist/main.css" rel="stylesheet">
</head>
<body>
<h1 class="text-3xl font-bold underline">
خدا برسه به دادت
</h1>
</body>
</html>
خب تا به اینجای کار تونستیم Tailwind CSS رو به کمک دو روش مختلف نصب کنیم ( CLI و PostCSS )
حالا میتونیم از Tailwind CSS استفاده کنیم. فقط کافیه به سایت TailwindCSS بریم و با کلاس های Tailwind آشنا بشیم و بدونیم معادل هر استایل CSS در Tailwind چیه ؟
بطور مثال ما تو CSS خام از position : fixed استفاده میکردیم اما تو Tailwind باید از کلاس fixed استفاده کنیم :
<div class="fixed"> // این اِلِمان پوزیشن فیکس داره
</div>
TailwindCSS جامعه آماری خوبی داره ؟!
قطعا بله !
درحال حاضر پکیج TailwindCSS در npm بیش از 6.5 میلیون دانلود هفتگی داره! و این نشون میده این فریمورک چقدر بین Front-End Developer ها از محبوبیت بالایی برخورداره 🙂
جمع بندی
فریمورک TailwindCSS فوق العادس و با تمامی فریمورک های CSS متفاوته! تو این فریمورک هیچ خبری از کامپوننت های آماده و از پیش ساخته شده نیست! البته این جز معایب TailwindCSS نیست!
اتفاقا این یکی از مزایای Tailwind CSS به حساب میاد، چراکه باعث شده تیلویند سی اس اس خیلی خیلی سبک و جمع و جور باشه!
اگه فِرانت اِند دولوپر هستید و هنوز سراغ TailwindCSS نرفتید، صادقانه پیشنهاد میکنم هرچه زودتر باهاش آشنا بشید 🙂
تو این مقاله سعی کردیم به این سوال پاسخ بدیم که Tailwind CSS چیست .. امیدوارم که این مقاله براتون مفید واقع شده باشه 🙂
در پاسخ به این سوال که Tailwind CSS چیست ، میتونتیم بگیم که یک فریمورک Css هست که نسبت به سایر فریمورک های CSS از برتری بالایی برخورداره و طرفدار ها و جامعه آماری خیلی خوبی داره.
قطعا تیلویند !
دیدگاهتان را بنویسید