مرتب‌سازی کلاس های tailwind به کمک prettier

کتابخونه tailwind

یکی از پرکاربردترین کتابخونه‌های css و محبوب قطعا tailwindcss هست که به خاطر انعطاف بالا و حجم کمی که برای استایل دهی به پروژه اضافه میکنه به شدت بین توسعه دهنده‌های فرانت اند محبوب شده.

مستندنات این کتابخونه و راهنمای نصب اینجا.

ابزار prettier

ابزاری که می‌تونین کدهاتون رو فرمت کنین و اون فرمت میتونه به مدل دلخواه شما باشه که خیلی از زبان های برنامه نویسی رو ساپورت میکنه و با IDE و تکست ادیتورهای زیادی هم سازگاری داره.

مستندنات این ابزار از اینجا بخونید.

ترتیب نوشتن کلاس ها

وقتی شما بعنوان توسعه دهنده فرانت اند مشغول به استایل دهی المان ها هستین ممکنه از کتابخونه tailwind استفاده کنین و کلاس های متعددی رو برای هر المان استفاده کنین و خب ما روی نوشتن این کلاس ها ترتیب و نظم خاصی رو اصولا در نظر نمی‌گیریم.

اما اگر بخوایم کدنویسی اصولی‌تر و تمیزتری داشته باشیم ممکنه نظم و ترتیب نوشتن کلاس‌ها برامون اهمیت پیدا کنه که خب وقتی من کلاسی به المان می‌دم و بیا به این ترتیب برام کلاس هارو مرتب کن:

اول ریسپانسیو ها، بعد رنگ‌ها، بعد فاصله‌ها و …

خب رعایت این نظم و اصول موقع نوشتن کلاس ها ممکنه وقت خیلی زیادی رو از ما بگیره که ما می‌تونیم با کمک ابزار prettier-plugin-tailwindcss این کار رو خیلی سریعتر پیش ببریم

پلاگین prettier-plugin-tailwindcss

این پلاگین کلاس های tailwind رو برای ما به صورت پیشفرض مرتب می‌کنه تا ساختار کلاس های المان‌هامون کاملا شبیه به هم بشه و هم می‌تونیم اون ساختار چینشی که مدنظرمون هست رو هم بهش بدیم تا براساس اون برامون کدهامون رو مرتب کنه.

برای نصب این پکیج رو پروژه می‌تونید مستندناتش رو از اینجا بخونین.

شروع به کار با پلاگین prettier-plugin-tailwindcss

من برای نصب این پروژه از bun برای نصب و راه اندازی استفاده میکنم که شما می‌تونید از npm, yarn, pnpx یا هرچیز دیگه ای استفاده کنین پس این براتون مهم نباشه. همینطور پروژه مثالی من با React هستش که اونم هیچ اهمیتی نداره چون توی این مورد ما فقط tailwind و کلاس هاش برامون مهمه.

قدم ۱ : نصب پلاگین

کافیه توی مسیر پروژه command زیر رو اجرا کنین تا پلاگین روی پروژه نصب بشه و بعنوان devdependency استفاده کنین

• وقتی devdependency باشه یعنی توی محیط production استفاده نمیشه و باری روی پروژه اضافه نمیکنه.

• من برای نصب از bun استفاده کردم که شما از npm, yarn, pnpm و هرچیز دیگه می‌تونین استفاده کنین

npm install -D prettier prettier-plugin-tailwindcss

اگر نصب موفقیت آمیر باشه هم توی فایل package.json و هم توی ترمینال همچین چیزی رو می‌بینین

قدم دوم : ساخت فایل prettierrc. در مسیر روت پروژه

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

• اون دات قبل اسم فایل فراموش نشه

{
    "plugins": [
        "prettier-plugin-tailwindcss"
    ]
}

قدم سوم : نصب tailwind

خب همونجوری که گفتیم tailwind رو با توجه به اینکه پروژه تون از چه ساختار و فریم ورکی استفاده می‌کنه می‌تونین از طریق مستندتاش نصب کنین

راهنمای نصب بر اساس پروژه شما از اینجا.

قدم چهارم : استفاده کنین

حالا پلاگین prettier-plugin-tailwindcss و کتابخونه tailwindcss به خوبی نصب شدن

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

حالا کدی که توی IDE یا text editor پلاگین رو اجرا کنین یا اینکه از شورتکد استفاده کنین که توی vscode معمولا این کار با alt+shift+f انجام میشه و نتیجه این مرتب سازی که پیشفرض این پلاگین هست میشه عکس زیر:

که این ترتیب رو می‌تونین کاملا شخصی سازی کنین که کافیه مستندات این کتابخونه رو بخونین.