سلام. امیدوارم حالتون عالی باشه. من سهیل جعفری هستم، برنامه نویس next js و node js. توی این مقاله، میخوایم در مورد این صحبت کنیم که 1. تفاوت تیلویند سی اس اس با بقیه چیه و چرا باید بیایم سراغ تیلویند. 2. چرا توی نکست جی اس، تیلویند بسیار مهمه. 3. آموزش tailwind css
کلا اگه بخوایم css بزنیم، معمولا از یکی از این روش ها استفاده میکنیم.
1. زدن CSS خام.
خوبیش چیه؟ خیلی دستتون بازه و هر کاری عشقتون بکشه میتونید انجام بدید. حجم فایل های cssتون هم معمولا به حداقل میرسه.
بدیش چیه؟ خلاصه مفید بگم. برای زدن یه وب سایت کامل، اطراف یه قرن باید زمان بزارید. ?
2. راه دوم استفاده از Scss هست.
خوبیش چیه؟ حجم فایل هاتون کم هست. دستتون بازه و هر استایلی بخواید میتونید به وب سایت بدید. اگه بخوایم با خود سی اس اس خام مقایسهش کنیم، برای زدن دو سه صفحه، نرید سراغ scss. یه مقدار گیج کننده میشه ولی اگه پروژهتون بزرگ هست، برید. نسبت سی اس اس خام، کد کمتری میزنید.
بدیش چیه؟ زمانی که نیازه صرف کنید 1 قرن نیست. نیم قرن هست، چون کلی کد باید بزنید براش. علاوه بر این موضوع، توی یه پروژه واقعی، همیشه تمرکز روی جاوااسکریپت هست و سی اس اس، یه کاری جانبی بی اهمیت حساب میشه اما اگه از scss استفاده کنید، باید یه حجمی از توجه رو هم بزارید روی استایل دهی. چون در واقع دارید سی اس اس عادی نمی نویسید بلکه سی اس اس برنامه نویسی میکنید. اینا متفاوتن. توضیحش هم در این مقال نمیگنجد...?
بگذریم...
3. راه سوم استفاده از بوت استرپ هست.
بوت استرپ استفاده نکنید.
خوبیش چیه؟ نسبت به سی اس اس، کار رو ساده تر میکنه.
بدی هاش:
الف) حجمش فوق العاده بالاست. یعنی قشنگ 2 ثانیه زمان لود صفحه هاتون رو میبره بالا. یعنی به صورت عمومی اینجوریه. کلا ساختارش اینجوریه. علاوه بر این یه سری کامپوننت در اختیار شما میزاره. باید از همونا استفاده کنید. اگر بخواید از این کامپوننت ها استفاده کنید و استایل دلخواهتون رو بهشون بدید، استایل قبلیا حذف نمیشن. بلکه این استایل جدیدا، اضافه میشن به استایل قبلی ها. یعنی همین موضوع هم حجم کدتون رو بالاتر میبره. ?
ب) خیلی از وب سایت هایی که با بوت استرپ زده شدن، شبیه هم هستن. چرا؟ چون عموما از همین کامپوننت ها استفاده میکنن.
4. راه چهارم نوشتن CSS، استفاده از Tailwind.css هست.
پیشنهاد من استفاده از راه چهارم هست.
بدی؟ من ندیدم.
خوبی؟
الف) حجم فوق العاده کم. یعنی توی حالت DEV، حجمش کم هست. وقتی میبریمش روی حالت نهایی یا پروداکشن، باز حجمش کمتر میشه. چیزی کمتر از 20 کیلوبایت معمولا. این موضوع باعث میشه که اون 2 ثانیه افزایش زمان لود بوت استرپی رو نداشته باشین.
ب) استفاده ازش بسیار ساده هست.
پ) کامپوننت از پیش طراحی شده ندارید، بلکه خودتون باید کامپوننت بسازید و این موضوع باعث میشه که همون آزادی عمل css خام رو، اینجا هم دارید.
ت) برای یه سری چیزها، پلاگین جدا داره. که اگه نیاز داشتید اضافهشون کنید، اگه نه، حجم css الکی زیاد نیشه. البته خیلی به ندرت پیش میاد که از این پلاگین ها استفاده کنیم.
ث) بسیار سریع میتونید باهاش کد بزنید و اصلا نیازی به تمرکز روی بخش سی اس اس مثل scss رو نداره. خیلی ساده و روون.
ج) یکی از نکات بسیار مهم در مورد سی اس اس نویسی، اینه که اگه شما حجم cssتون کم باشه، سایت بسیار سریع خواهد بود و در نتیجه رتبه سئوی بسیار بهتری خواهید داشت. یعنی اگه دو تا سایت شبیه هم باشن ولی یکی با بوت استرپ باشه و اون یکی تیلویندی، سایت تیلویند هم سرعت بالاتری داره و هم سئوی بهتر...
توی next js، ما میتونیم از همه این روش ها استفاده کنیم، اما همونطور که بالاتر توضیح داده شد، به دلیل برتری Tailwind نسبت به باقی روش ها، همیشه از تیلویند استفاده میکنیم. مثلا اگه به مرن فا، اولین مرجع تخصصی نکست جی اس ایران مراجعه کنید، همه پروژه هایی که میزنیم، با نکست جی اس و تیلویند هستن.
خوب اگه بخوایم الان تیلویند رو یاد بگیریم چی کار کنیم؟
تیلویند، مستندات( doc) بسیار کاملی داره. من خودم هم خیلی اوقات مراجعه میکنم به اونجا و اگه مشکلی داشتم رو بررسی میکنم. از این لینک میتونید برید به داکیومنت تیلویند سی اس اس
من توی این مقاله واقعا سخته که بخوام تک تک بخشای تیلویند رو بنویسم و توضیح بدم. توی مرن فا، ما یه دوره رایگان نکست جی اس و تیلویند داریم.
میتونید برید اونجا و آموزش Next js و Tailwind css رو در کنار هم کاملا رایگان ببینید.
علاوه بر اون، یه مقاله آموزش تیلویند هم دارم.
فقط به این موضوع لطفا دقت داشته باشید که یاد گرفتن تیلویند، واقعا نیاز به زدن پروژه داره و توی دل کدنویسی هست که شما خیلی چیزا رو یاد میگیرید.
خسته نباشید. امیدوارم این مقاله براتون مفید بوده باشه.
