فریمورک Tailwindcss به همراه Pinegrow و دیگر هیچ !

خوب دوستان من قبلا در مورد ،Tailwindcss توضیح دادم :

https://virgool.io/@espiar/%D9%81%D8%B1%DB%8C%D9%85-%D9%88%D8%B1%DA%A9-tailwindcss-%D8%AC%D8%A7%DB%8C%DA%AF%D8%B2%DB%8C%D9%86-bootstrap-lvvopsgbwuv6

https://virgool.io/@espiar/%D9%86%DA%A9%D8%A7%D8%AA-%D8%B1%DB%8C%D8%B2-%D9%88-%D9%85%D8%B9%D8%B1%D9%81%DB%8C-%D8%A7%D8%A8%D8%B2%D8%A7%D8%B1-%D9%87%D8%A7%DB%8C-tailwindcss-hjkwmmkywuzj

https://virgool.io/@espiar/%D8%A7%D8%B6%D8%A7%D9%81%D9%87-%DA%A9%D8%B1%D8%AF%D9%86-%D9%81%D9%88%D9%86%D8%AA-%D8%AF%D9%84%D8%AE%D9%88%D8%A7%D9%87-%D8%AF%D8%B1-tailwindcss-vmeyrntmtmiv

https://virgool.io/@espiar/%DA%A9%D9%85-%DA%A9%D8%B1%D8%AF%D9%86-%D8%AD%D8%AC%D9%85-%D9%81%D8%A7%DB%8C%D9%84-%D9%86%D9%87%D8%A7%DB%8C%DB%8C-tailwindcss-%D8%A8%D9%87-%D8%B1%D9%88%D8%B4-%D8%AD%D8%B0%D9%81-%DA%A9%D9%84%D8%A7%D8%B3-%D9%87%D8%A7%DB%8C-%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87-%D9%86%D8%B4%D8%AF%D9%87-s914aw20a15t

اما pinegrow چیست؟

این pinegrow نرم افزاری جهت طراحی آسان سایت به صورت ریسپانسیو برای Bootstrap, Foundation, AngularJS و WordPress است. با این برنامه به راحتی میتونید با درگ/دراپ کردن عناصر مورد نظر به صورت زنده یا Live سایت خودتون رو طراحی و مشاهده کنید. pinegrow تمام تلاشش رو کرده تا شما دست به کد نزنید ولی خب هر جایی نیاز باشه میتونید از طریق کد نویسی هم تغییرات مورد نظرتون رو اعمال کنید. در نهایت میتونید قالبتون رو به وردپرس نیز تبدیل کنید. اما به خاطر داشته باشید که این برنامه و سایر برنامه های مشابه تنها برای افراد مبتدی و نیازهای اولیه طراحی سایت طراحی شدن، این طور نیست که شما بتونید توسط این برنامه ها یک سایت کاملا حرفه ای و بهینه طراحی کنید و تمامی نیازهای شما رو پوشش بده. بهترین کاربرد این نرم افزارها یادگیری Html/CSS است یعنی به راحتی با تغییرات گرافیکی مختلف میتونید نتیجه اش رو در کد مشاهده کنید و به عملکردها تگها، صفات و ویژگی های مختلف پی ببرید.
منبع و لینک دانلود.

حتما با خواندن توضیح بالا متوجه شدید خبری از Tailwindcss نیست. بله درسته خبری نیست و از آن هم پشتیبانی نمیکند ! خوب شاید با دیدن تیتر این مطلب تعجب کنید "فریمورک Tailwindcss به همراه Pingegrow و دیگر هیچ !" ولی تعجب نکنید.

برای کار کردن با tailwindcss در نرم افزار pinegrow کافیست ابتدا tailwindcss را در محل پروژه نصب کنید (لینک اول: فریم ورک Tailwindcss جایگزین Bootstrap) خوب ما در نصب با vs code کار کردیم و با این ادیتو همچنان کار خواهیم کرد! در ادامه ما باید افزونه pinegrow را برای کار با vs code استفاده کنیم که نام آن Pinegrow Live Sync است. همانطور که از اسمش پیداست کار این پلاگین برقراری ارتباط زنده و مستقیم بین vs code و pinegrow است.

نکات کلیدی تا اینجا گفتیم نصب tailwindcss در محل پروژه و نصب پلاگین pinegrow برای vscode.

حالا مانده تنظیمات پلاگین و خود نرم افزار pinegrow. این نکته را درنظر بگیرید که اگر تغییر در نرم افزار pinegrow ندهید نیازی به تغییر تنظیمات پلاگین نیست!.

تنظیمات نرم افزار pinegrow

برای رفتن به تنظیمات باید مانند تصویر زیر عمل کنید:

تنظیمات پیشفرض host روی لوکال هاست هست و پورت 40000. اگر به هر دلیلی این تنظیمات را تغییر داد باید حتما مراحل بعدی را طی کنید.

مرحله بعدی باید آدرس هاست و پورت این نرم افزار رو پیدا کنیم برای این کار به آدرس زیر میرویم:

با رفتن به آدرس بالا پنجره زیر باز میشود که در آن آدرس نوشته شده است:

اگر هاست و پورت را تغییر داده باشید آدرس بالا تغییر میکند.

آدرس بالا را کپی کنید (در تصویر آدرس http://localhost:40000 می بینید)

در اینجا کار ما با تنظیمات نرم افزار تمام شد! حالا به تنظیمات افزونه vscode میرویم.

تنظیمات vs code

به آدرس زیر می رویم:

در سرچ بار پنجره تنظیمات pinegrow تایپ کرده و آدرس که قبلا کپی کردیم را در آن قرار می دهیم:

و تمام !

حال vs code و pinegrow را باز کرده خواهید دید به هم دیگر ارتباط زنده دو طرفه برقرار میکنند. هر تغییری در کد ها در نرم افزار pinegrow و هر تغییری در نرم افزار pinegrow در vs code هم رخ میدهد! زیبا نیست ؟ حالا ما میتوانیم از قدرت هر دو استفاده کنیم.

نحوه استفاده:

نکته بسیار مهمی که وجود دارد این است که باید قابلیت Auto Save در vs code خاموش باشد!

ابتدا هر دو نرم افزار را اجرا کرده تا با یکدیگر وصل شوند سپس صفحه html مورد نظر را در vs code (میسازیم و) باز می کنیم و بعد روی آن راست کلیک کرده و گزینه pinegrow: Open file انتخاب کنید.

حالا صفحه شما در نرم افزار pinegrow نیز نمایان میشود!

دو گزینه دیگر هم وجود دارد که عبارتند از:

رفرش کردن صفحه در نرم افزار pinegrow: Refresh page

و انتخاب المنت در نرم افزار pinegrow: select element

همچنین اگر در نرم افزار المنتی را انتخاب و یا تغییر دهید به صورت زنده در vs code این تغییر(ها) اتفاق می افتد!

و به عنوان کلام آخر مزیت اصلی و مهمی که ابتدا من رو به این نرم افزار هدایت کرد این بود که می توان بطور همزمان صفحه را در سایزهای مختلف به تماشا کرد. این قابلیت بخصوص اگر چند مانیتور داشته باشید (و یا یک مانیتور ultra wide) خودش را بیشتر نشان می دهد و طراحی همزمان برای چند دستگاه براحتی میتوان انجام داد.

این هم یک لینک یوتیوب برای تنظیم vs code و نرم افزار pinegrow