Tailwind لذت استایل نویسی

A utility-first CSS framework for rapidly building custom designs.

این توضیحی است که وب سایت توسعه دهنده‌ی Tailwind درباره‌ش گفته. یک چهارچوب برای هرچه سریع‌تر طراحی کردن وب‌سایت‌ها. در واقع Tailwind یک پیش پردازنده (preprocessor) برای css نویسی نیست. مجموعه‌ای از استایل‌های از قبل نوشته شده که می‌توان باسرعت در فایل HTML از آنها را استفاده کرد، البته نه تا این حد ساده. در واقع این پست برای توضیح دادن و شناسوندن Tailwind نیست و در این پست نحوه‌ی استفاده و کانفیگ کردنش رو آموزش می‌دم. دلیلم هم برای این کار این بود که خودم خیلی سرچ کردم تا تونستم نصبش کنم و فکر کردم یک منبع به زبان فارسی برای متقاضی بعدی ممکنه کار رو راحت تر بکنه. همین. در ادامه نحوه‌ی نصب و کانفیگ کردن Tailwind رو توضیح می‌دم.

پیش‌نیاز این آموزش تسلط و یا حداقل آشنایی با:
html و css و nodejs هستش

قدم اول: نصب

قبل از هر چیز یک پوشه برای پروژه تعریف بکنید با هر اسمی. بعد به ترمینال برید، مسیر پوشه رو انتخاب کنید و این دستور رو اجرا کنید.

npm install tailwindcss postcss-cli autoprefixer

• tailwindcss: که خود فریم‌ورکه
• postcss-cli: در واقع موتور Tailwind هستش و Tailwind به نوعی یک پلاگین محسوب میشه برای postcss که یه پردازنده‌ی css هستش که می‌تونید برای شناخت بیشتر این پست رو بخونید.
• autoprefixer: یک پلاگین دیگه‌اس برای postcss که باعث می‌شه ما خیلی کوتاه تر بنویسیم. البته همه‌ی این اتفاق‌ها در پشت صحنه اتفاق میوفته

بعد از نصب کامل این سه در پروژه یک پوشه‌ی node_modules درست میشه که ما هیچ کاری باهاش نداریم فقط این رو بدونید که ماژول‌های نود‌جی‌اس که نصبشون کردیم میان اینجا.

قدم دوم: کانفیگ‌ها

به ترمینال برید و دستور زیر رو اجرا کنید

npx tailwind init

این دستور فایل کانفیگ Tailwind رو در روت اصلی نصب می‌کنه. این فایل با نام tailwind.config.js ذخیره می‌شه که بصورت پیش فرض خودش اینجوری هستش:

module.exports = {
purge: [ ],
theme: {
extend: { },
},
variants: { },
plugins: [ ],
}

حالا باید فایل کانفیگ postcss رو بسازیم. در کنار فایل کانفیگ Tailwind با اسم postcss.config.js یک فایل ایجاد می‌کنیم و در داخلش می‌نویسیم

module.exports = {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
]
}

قدم سوم: ساخت استایل‌ها

یک فایل با مسیر دلخواه بسازید با پسوند css. یا postcss. هر دو رو امتحان کردم. این فایل میشه فایل ورودی استایل‌های شما. من این کار رو اینجوری انجام دادم:

project/css/tailwind.cssپوشه پروژه

در داخل فایل tailwind.css بنویسید:

@tailwind base;
@tailwind components;
@tailwind utilities;

• tailwind base@ استایل‌های کلی و گلوبال رو شامل میشه، مثل ریست‌های بادی، تیتر‌ها عکس‌ها و ....
• tailwind components@ شمامل استایل‌های میدیا کویری‌های و کانتینر برای قالب بندی کلی پروژه
• tailwind utilities@ در نهایت لیست کامل استایل‌های تغیر رنگ و سایز و پدینگ و مارجین‌ها و ترانزیشن‌ها و ... اینجاست.

حالا باید این سه تا رو که در فایل tailwind.css نوشتیم رو تبدیل کنیم به فایل css ریدابل یا خوانا برای استفاده در پروژه.
برای اکسترکت کردن استایل‌ها به فایل package.json برید که در همون مراحل ابتدایی نود‌جی‌اس اون رو درست کرده و این کد رو بهش اضافه کنید:

"scripts": {
"build": "postcss css/tailwind.css -o public/build/output.css"
},

متوجه شدید که چی شده؟ در واقع ما از postcss می‌خوایم که وقتی ازش خواستیم build کنه بیاد فایل css/tailwind.css که در مرحله‌ی قبل ساختیم رو از مسیر مشخص شده بخونه و در o- یا output به مسیر پابلیک/بویلد/ بره و یه فایل با اسم output.css بسازه و استایل‌ها رو درونش قرار بده. اسم فایل و مسیر رو می‌تونید هر جوری که دوست داشتید بنویسید. در واقع من برای اینکه شما متوجه بشید اسم فایل رو output.css گذاشتم. حالا فقط کافی به ترمینال برید و دستور زیر رو اجرا کنید و بوم بوم استایل‌های شما در پوشه‌ای که تعیین کردیم ساخته می‌شه

npm run build

مرحله‌ی آخر: استایل‌نویسی

یک فایل html بسازید من این کار رو در مسیر root/public ساختم شما هر جور مایلید می‌تونید این کار رو انجام بدید

همون طور که می‌بینید من آدرس فایل css خروجی رو هم به پیج لینک کردم حالا شروع می‌کنیم به طراحی کردن: با یه عنوان تیتر شروع می‌کنم با متن hello world! و به اون یک کلاس می‌دم به شکل زیر:

<h1 class="text-4xl font-bold text-center text-blue-500 mt-12">
Hello World!
</h1>

در واقع با این چهار کلاس که برای تگ h1 تعریف کردیم استایل‌های زیر رو به اون نسبت دادیم

.text-4xl {
font-size: 2.25rem;
}
.font-bold {
font-weight: 700;
}
.text-center {
text-align: center;
}
.text-blue-500 {
--text-opacity: 1;
color: #4299e1;
color: rgba(66, 153, 225, var(--text-opacity));
}
mt-12 {
margin-top: 3rem;
}

خیلی راحت می‌تونیم با تغیر مثلا text-blue-500 به text-green-700 رنگش رو از آبی روشن به سبز کمی تیره‌تر تغییر بدیم و ....

امیدوارم لذت برده باشید. سعی می‌کنم در یه آموزش دیگه کمی از اساتیل‌ها بگم و طراحی رسپانسیو خیلی راحتتر با Tailwind و ... اگه عمری باقی باشه و بازخوردی خوبی ببینم.
موفق باشید

فایل‌های تمرینی رو از گیت‌هاب بگیرید

این پست را در جاهای دیگر بخوانید
وبلاگ خودم
ویرگول
مدیوم