A utility - first CSS framework for rapidly building custom designs . این توضیحی است که درباره‌ش گفته. یک چهارچوب برای هرچه سریع‌تر طراحی کردن وب‌سایت‌ها. در واقع Tailwind یک پیش پردازنده ( preprocessor ) برای css نویسی نیست. مجموعه‌ای از استایل‌های از قبل نوشته شده که می‌توان باسرعت در فایل HTML از آنها را استفاده کرد، البته نه تا این حد ساده. در واقع این پست برای توضیح دادن و شناسوندن Tailwind نیست و در این پست نحوه‌ی استفاده و کانفیگ کردنش رو آموزش می‌دم. دلیلم هم برای این کار این بود که خودم خیلی سرچ کردم تا تونستم نصبش کنم و فکر کردم یک منبع به زبان فارسی برای متقاضی بعدی ممکنه کار رو راحت تر بکنه. همین. در ادامه نحوه‌ی نصب و کانفیگ کردن Tailwind رو توضیح می‌دم. قدم اول: نصب قبل از هر چیز یک پوشه برای پروژه تعریف بکنید با هر اسمی. بعد به ترمینال برید، مسیر پوشه رو انتخاب کنید و این دستور رو اجرا کنید. tailwindcss : که خود فریم‌ورکه: در واقع موتور Tailwind هستش و Tailwind به نوعی یک پلاگین محسوب میشه برای postcss که یه پردازنده‌ی css هستش که. autoprefixer : یک پلاگین دیگه‌اس برای postcss که باعث می‌شه ما خیلی کوتاه تر بنویسیم. البته همه‌ی این اتفاق‌ها در پشت صحنه اتفاق میوفته بعد از نصب کامل این سه در پروژه یک پوشه‌ی node _ modules درست میشه که ما هیچ کاری باهاش نداریم فقط این رو بدونید که ماژول‌های نود‌جی‌اس که نصبشون کردیم میان اینجا. قدم دوم: کانفیگ‌ها به ترمینال برید و دستور زیر رو اجرا کنید این دستور فایل کانفیگ Tailwind رو در روت اصلی نصب می‌کنه. این فایل با نام tailwind . config . js ذخیره می‌شه که بصورت پیش فرض خودش اینجوری هستش: حالا باید فایل کانفیگ postcss رو بسازیم. در کنار فایل کانفیگ Tailwind با اسم postcss . config . js یک فایل ایجاد می‌کنیم و در داخلش می‌نویسیم قدم سوم: ساخت استایل‌ها یک فایل با مسیر دلخواه بسازید با پسوند css . یا postcss . هر دو رو امتحان کردم. این فایل میشه فایل ورودی استایل‌های شما. من این کار رو اینجوری انجام دادم: در داخل فایل tailwind . css بنویسید: tailwind استایل‌های کلی و گلوبال رو شامل میشه، مثل ریست‌های بادی، تیتر‌ها عکس‌ها و. tailwind شمامل استایل‌های میدیا کویری‌های و کانتینر برای قالب بندی کلی پروژه tailwind در نهایت لیست کامل استایل‌های تغیر رنگ و سایز و پدینگ و مارجین‌ها و ترانزیشن‌ها و. اینجاست. حالا باید این سه تا رو که در فایل tailwind . css نوشتیم رو تبدیل کنیم به فایل css ریدابل یا خوانا برای استفاده در پروژه. برای اکسترکت کردن استایل‌ها به فایل package . json برید که در همون مراحل ابتدایی نود‌جی‌اس اون رو درست کرده و این کد رو بهش اضافه کنید: متوجه شدید که چی شده؟ در واقع ما از postcss می‌خوایم که وقتی ازش خواستیم build کنه بیاد فایل css / tailwind . css که در مرحله‌ی قبل ساختیم رو از مسیر مشخص شده بخونه و در o - یا output به مسیر پابلیک/بویلد/بره و یه فایل با اسم output . css بسازه و استایل‌ها رو درونش قرار بده. اسم فایل و مسیر رو می‌تونید هر جوری که دوست داشتید بنویسید. در واقع من برای اینکه شما متوجه بشید اسم فایل رو output . css گذاشتم. حالا فقط کافی به ترمینال برید و دستور زیر رو اجرا کنید و بوم بوم استایل‌های شما در پوشه‌ای که تعیین کردیم ساخته می‌شه مرحله‌ی آخر: استایل‌نویسی یک فایل html بسازید من این کار رو در مسیر root / public ساختم شما هر جور مایلید می‌تونید این کار رو انجام بدید همون طور که می‌بینید من آدرس فایل css خروجی رو هم به پیج لینک کردم حالا شروع می‌کنیم به طراحی کردن: با یه عنوان تیتر شروع می‌کنم با متن hello world ! و به اون یک کلاس می‌دم به شکل زیر: در واقع با این چهار کلاس که برای تگ h تعریف کردیم استایل‌های زیر رو به اون نسبت دادیم خیلی راحت می‌تونیم با تغیر مثلا text - blue - به text - green - رنگش رو از آبی روشن به سبز کمی تیره‌تر تغییر بدیم و. امیدوارم لذت برده باشید. سعی می‌کنم در یه آموزش دیگه کمی از اساتیل‌ها بگم و طراحی رسپانسیو خیلی راحتتر با Tailwind و. اگه عمری باقی باشه و بازخوردی خوبی ببینم. موفق باشید این پست را در جاهای دیگر بخوانید