آشنایی با فریم‌ورک tailwindcss

سلام، توی این پست قصد دارم اشاره ای به فریم‌ورک tailwindcss که نسبتا تازه‌س ولی حسابی معروف شده داشته باشم. در این پست یک سری ستاپ اولیه و بویلر‌پلیت هاش رو میگم تا باهاش راحت‌تر کار کنیم.

برای اینکه با شیوه کدنویسی در این فریم‌ورک آشنا بشیم، بریم برای مثال دکمه های Log in و Sign up (مشابه توییتر) رو باهاش بسازیم:

کد دکمه های بالا به این صورت هست:

خب! همونطور که میبینید در اصل tailwindcss به ادعای خودش utility-first هست، در واقع اگر داخل class رو نگاه کنیم، کلی اجزا میبینیم (مثلا py-1 در جهت محور y ها به اندازه 0.25rem به ما padding میده) که با گذاشتنشون کنار هم تونستیم این button هارو بسازیم. (اگر متوجه بقیه class ها نمیشید اصلا نگران نباشید، چون واقعا ساده‌س! یه سر به اینجا بزنید و جواب سوالاتتون رو بگیرید)

* اگر از vscode استفاده می‌کنید اکستنشن tailwindcss رو حتما نصب کنید.

این فریم‌ورک شاید سریع‌ترین نباشه اما با توجه به میزان شخصی‌سازی که می‌تونید انجام بدید قطعا از نوشتن css از صفر بسیار سریع‌تر هست.

یکی از مزیت های این فریم‌ورک این هستش که چون فقط شامل css هست میشه، می‌تونید در پروژه های React یا Vue ازش استفاده کنید.

حتما این سوال براتون پیش میاد که فرق این با inline-css که قبلا می‌نوشتیم چیه؟ اگر بخوایم یه button رو چندجا استفاده کنیم، باید کل کلاس هارو دوباره تکرار کنیم؟

جواب سوال نه هستش!

با استفاده از @apply میتونیم کامپوننت خودمون رو اکسپورت کنیم، به این صورت:

برای اطلاعات بیشتر به داکیومنتیشن خیلی خوبش مراجعه کنید.

برای ستاپ کردن این فریم‌ورک دوست داشتی چند قدم کوتاه هست که باید انجام بدیم.

اول از همه tailwindcss چون یک پکیج npm هست، بعد از ساختن فولدر جدید باید به ترمینال بریم و کد زیر رو توی همون فولدر اجرا کنیم:

npm init

حالا باید tailwindcss رو اینستال کنیم، اما قبلش باید بگم که برای اینکه tailwind کامل کار کنه، دوتا پکیج دیگه هم لازم داریم! یکی postcss-cli و دیگری autoprefixer هست. پس به این صورت عمل می‌کنیم:

npm i tailwindcss postcss-cli autoprefixer

حالا باید فایل کانفیگ tailwindcss رو بیاریم داخل پروژه:

npx tailwind init

حالا باید فایل کانفیگ postcss بسازیم، پس توی همون root فولدر یه فایل به صورت زیر بسازید:

postcss.config.js

module.exports = {
plugins: [ require(&quottailwindcss&quot), require(&quotautoprefixer&quot) ]
}

از اونجایی که این فریم‌ورک از چند بخش تشکیل شده، برای اینکه انتخاب کنیم از کدوم اجزای اون میخوایم استفاده کنیم فایل زیر رو هرکجا که دوست دارید بسازید. (اینجا فایل رو در root می‌سازیم و همه اجزا رو استفاده می‌کنیم)

tailwindcssBase.scss

@tailwind base;
@tailwind components;
// Add your extraction (@apply) components here 
@tailwind utilities; 

برای اینکه postcss رو با تموم تنظیماتی که الان براش انجام دادیم ران کنیم، برمیگردیم به فایل package.json در قسمت "scripts" که زیرش به‌طور پیش‌فرض یک اسکریپت "test" نوشته شده. ما کاری با test نداریم پس پاکش کنید و بجاش اسکریپت زیر رو بنویسید:

&quotbuild&quot: &quotpostcss tailwindBase.scss -o dist/css/tailwind.css&quot

باید به کد بالا دقت کنیم، فایل tailwindBase.css رو به عنوان ورودی میدیم و tailwind.css رو به عنوان خروجی به ما میده که فایل نهایی هست و ما باهاش کار داریم! حالا دستور build رو اجرا کنید:

npm run build

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

index.html

<link href=&quot./dist/css/tailwind.css&quot  rel=&quotstylesheet&quot />

در واقع الان شاید یکم مسیر طولانی‌تری رو طی کردیم اما دستمون توی شخصی‌سازی کاملا باز بوده و مسیر پیشنهادی هم همین هست.

اما اگر بخوایم سریع از tailwindcss استفاده کنیم، خوشبختانه همیشه cdn ها هستن. میتونیم از cdn زیر استفاده کنیم:

<link href=&quothttps://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css&quot rel=&quotstylesheet&quot />

برای اطلاعات بیشتر به سایت tailwindcss سر بزنید، یک‌سری آموزش های ویدیویی داره که پیشنهاد میکنیم حتما ببینیدشون.

ممنونم از اینکه وقت گذاشتید و مطالعه کردید، لطفا نظرتون درباره این فریم‌ورک رو با من به اشتراک بذارید.