فریم ورک Tailwindcss جایگزین Bootstrap

معرفی و نحوه استفاده از فریم ورک Tailwindcss

مقدمه:

بعد از آمدن bootstrap 4 و عدم پشتیبانی از مرورگر های قدیمی به فکر جایگزینی یک فریم ورک خوب بجای bootstrap شدم. شاید برای کشورهای پیشرفته مهم نباشد که وب سایت از مرورگرهای قدیمی پشتیبانی نکند (چون همه یا 95% مردمانشان بروز هستند) ولی از آنجایی که ما در ایران زندگی می کنیم باید از فریم ورکی متناسب با شرایط خودمان استفاده کنیم. من فریمورک های مختلفی را امتحان کردم هر کدام خوبی ها و بدی های خودشان را داشت امکانات بالا => عدم پشتیبانی از مرورگر های قدیمی (حداقل ie 9) یا امکانات پایین => پشتیبانی از مرورگر های قدیمی.

دیروز بطور اتفاقی به فریم ورک جالبی برخوردم پشتیبانی نسبتا خوبی از مرورگر های قدیمی دارد و اون چیزی نیست جز tailwindcss فریم ورک. بر خلاف bootstrap که css های پیش آماده شده برای ساخت المان های مختلف دارد، tailwindcss شامل کلاس های آماده می باشد که با ترکیب آنها با هم می توانید المان سفارشی تولید کنید.

تنظیم و پیکربندی

برای استفاده از این فریم ورک ما از vs code و نصب افزونه Tailwind CSS Intellisense استفاده خواهیم کرد.

برای ایجاد فایل package.json دستور زیر را در Terminal مینویسم و Enter را فشار میدهیم:

npm init -y

برای نصب خود tailwindcss کد زیر را در ترمینال مینویسیم:

npm install tailwindcss postcss-cli autoprefixer

کد بالا علاوبر نصب tailwindcss ، پلاگین های postcss-cli و autoprefixer را هم نصب میکند.

حالا فایل tailwind.config.js را با دستور زیر می سازیم:

npx tailwind init

بعد نصب موارد بالا باید postcss را تنظیم کنیم برای این کار بطور دستی یک فایل با نام postcss.config.js در root پروژه می سازیم، و کد های تصویر زیر را درون آن مینویسیم:

در root پروژه یک فولدر با نام css (یا هر نام دیگری) و درون ان یک فایل با نام tailwind.css (یا هر نام دیگری) می سازیم. در این فایل directive های زیر را برای ساخت کد های css (کلاس های tailwind) قرار میدهیم:

حال به فایل package.json برمیگردیم و کد درون آن را:

به صورت زیر تغییر میدهیم:

ما test را به build تغییر داده و تنظیمات را به این صورت قرار دادیم که:postcss در پوشه css فایل tailwind.css را ، به فایل css با نام tailwind.css در پوشه public و زیر پوشه build تبدیل کند/(فایل و پوشه ها پس از build کردن به طور خودکار ساخته می شوند)

برای build کردن کفیست در ترمینال دستور زیر را بنویسیم:

npm run build

پس از اجرای دستور بالا خواهید دید که پوشه و زیر پوشه public و build به همراه فایل tailwind.css که حاوی css های عادی (کلاس های tailwind) ساخه شده است.

حالا می توانیم از کلاس های آماده برای ساخت المان های سفارشیمان استفاده کنیم !

برای مشاهده صفحه index.html و راحتی کار ما باید پلاگین live-server را از طریق npm نصب کنیم. برای اینکار در ترمینال مینویسیم:

npm install -g live-server

بعد از نصب با اجرای دستور زیر میتوانیم صفحه index.html را اجرا و مشاهده کنیم:

live-server public

ساخت کلاس سفارشی

فرض کنید می خواهیم یک button را به شکل دلخواه دربیاریم برای این کار باید تعداد زیادی کلاس استفاده کنیم و حالا فرض کنید تعداد زیاد button داشته باشیم اگر بخواهیم به هر button ، کلاسهای مان (منظور کلاس های tailwind هست) را به class="" اضافه کنیم این کار تکراری و وقت گیری خواهد بود. برای جلوگیری از کار تکراری بهتر است یک کلاس سفارشی ایجاد کنیم برای اینکار کافیست در فایل tailwind.css که در پوشه css و در root قرار دارد بین بخش های

@tailwind components;

و

@tailwind utilities;

کلاس خودمان را مانند یک کلاس css معمولی تعریف کنیم با این تفاوت که:

• با دستور @apply شروع شده
• مانند attribute class ، کلاس های Tailwind را اضافه کرده و در پایان ";" قرار میدهیم

نکته: (سعی کنید) کلاس هایی که جنبه عمومی ندارند را این نوع کلاس ها قرار ندهید مانند کلاس shadow چون ممکن هست یک button به کلاس shadow نیاز داشته باشید ولی دیگری نه. همچنین از کلاس هایprefix مانند sm md lg و.. همچنین active ، focus و hover در این نوع کلاس ها خودداری کنید (به دلایل که پیش تر گفته شد).

پیاده سازی کلاس btn مانند bootstrap:

و با توجه به نکته ای که گفته شد بهتر است کلاس @screen sm و shadow-lg حذف شوند:

بعد از نوشتن کلاس سفارشی باید build را اجرا کنید:

npm run build

برای جلوگیری از انجام تکراری دستور بالا به فایل package.json رفته و کد درون آنر را به صورت زیر در می آوریم:

کد فعلی را به کد زیر جایگزین میکنیم

و حتی اگر بخواهیم از نوشتن کلاس های تکراری خودداری کنیم ( مثلا button های با رنگ های مختلف) می توانیم یک کلاس پایه و اصولی تر کلاس بنویسیم برای btn ایجاد کنیم و کلاس های مشتر را در آن تعریف کنیم:

@tailwind base;
@tailwind components;

.btn {
  @apply inline-block px-5 py-3 rounded-lg text-sm uppercase tracking-wider font-semibold;
}
.btn:focus {
  @apply outline-none shadow-outline;
}

.btn-indigo {
  @apply bg-indigo-500 text-white;
}
.btn-indigo:hover {
  @apply bg-indigo-400;
}
.btn-indigo:active {
  @apply bg-indigo-600;
}

.btn-gray {
  @apply bg-gray-400 text-gray-800;
}
.btn-gray:hover {
  @apply bg-gray-300;
}
.btn-gray:active {
  @apply bg-gray-500;
}

@tailwind utilities;

و بعد از این کار در ترمینال مینویسیم:

npm run watch

از این به بعد هر تغییری که در فایل css/tailwind بدهیم بطور خودکار buid میشود.

کلاس سفارشی ما ساخته و به فایل public/build/tailwind.css اضافه گردید.

کلاس ایجاد شده btn سفارشی ما :

و در نهایت استفاده در html :

<a href=&quot#&quot class=&quotbtn btn-indigo shadow-lg sm:text-base&quot>Book your escape</a>

سفارشی سازی کلاس های از پیش موجود

دربخش قبل ما کلاس .btn را ساختیم که از کلاس های از پیش آماده شده tailwind استفاده کردیم. در این بخش می خواهیم کلاس های از پیش تعریف شده tailwind را تغییر یا گسترش (extend) دهیم.

در ترمینال دستور زیر می نویسیم:

npx tailwind init tailwind-full.config.js --full

پس از اجرای دستور بالا خواهید دید فایلی با نام tailwind-full.config.js ایجاد شده که شامل همه کلاس های پیش ساخته شده tailwind (به صورت Key/value pair) می باشد.

روش دیگر برای تغییر یا گسترش کلاس های از پیش ساخته شده استفاده از فایل tailwind.config.js می باشد.

درواقع ما در فایل tailwind.config.js با استفاده از نام و مقدار key value هایی که در tailwind-full.config.js وجود دارند، مقدار جدیدمان به فایل tailwind-full.config.js پاس میدهیم.

و استفاده در html :

درواقع key هایی که ما در بخش extend مینویسیم همان key هاییست که در فایل tailwind-full.config.js وجود دارند. برای روشن شدن بیشتر به تصاویر زیر نگاه کنید:

همانطور که می بینید key در هردو یکی است. به عبارت دیگر ما کلید 72 با مقدار 18rem را به spacing در فایل tailwind-full.config.js اضافه کردیم.

نکته: حتی backgroundColor در بخش variants نیز در tailwind-full.config.js فایل موجود است.

حذف کلاس های استفاده نشده در پروژه و کم کردن حجم فایل css

بعد از اتمام پروژه جهت حذف کلاس های بی استفاده.

همانطور که در عکس بالا می بینید حجم فایل 400 kb و در حالت فشرده 66 kb می باشد.

برای اینکار باید ابزار purgecss را نصب کنیم. این ابزار یک پلاگین برای postcss دارد.

در ترمینال می نویسیم:

npm install @fullhuman/postcss-purgecss

بعد از نصب به فایل تنظیمات postcss.config.js می رویم و پلاگین نصب شده را به آن اضافه می کنیم:

محتوا content : خط اول فایل های vue است.(اگر در پروژه داشتید بنویسید). و در خط بعدی نیز صفحه html دادیم.

استخراج کننده پیشفرض defaultExtractor : در اصل defaultExtractorKey ما می باشید . از انجایی که کلید ها را در صفحه Index.html و در attribute class استفاده کردیم به صورت regex آنها را استخراج میکنیم:

سپس در terminal:

npm run build

و زمانی که فایل جدید css را چک میکنیم می بینیم که :

و در آخر برای ایجاد محصول نهایی :

تمام !

کلام آخر

این فریم ورک مستندات واقعا کاملی دارد مستندات متنی کامل و مستندات ویدیویی در حال کامل شدن !

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

برای یادگیری بیشتر حتما مستندات را کامل مطالعه کنید.

توجه داشته باشید برای مشاهده ویدیو ها باید قندشکن داشته باشید !

منبع