اخیرا بر روی تبدیل یکی از پروژه های جانبی ام از Bootstrap به Tailwind کار می کردم که به awssat/tailwindo بر خوردم. این پکیج دقیقا همین کار را انجام می دهد. به طور خودکار کلاس های کامپوننت Bootstrap را به کلاس های کاربردی Tailwind تبدیل می کند.
نصب Tailwindo
می توانید با استفاده از این دستور، این پکیج را به طور Global بر روی سیستم خود نصب کنید:
composer global require awssat/tailwindo
استفاده
برای شروع تبدیل فایل های خود به Tailwind این دستور را اجرا کنید، تا تمام فایل های Laravel blade view شما را به صورت حلقه ای طی کند:
cd ~/my-project
tailwindo resources/views --extensions=php --recursive=true --replace=true
Tailwindo همچنین می تواند فایل های Vue.js و HTML را تبدیل کند:
tailwindo resources/assets/js/components --extensions=vue --recursive=true --replace=true
اگر می خواهید در آن واحد تنها یک فایل را تبدیل کنید، می توانید این کد را اجرا کنید:
tailwindo file.blade.php
نتایج
پس از اجرای Tailwindo بر روی تمام فایل های view خود، نتایجی مشابه این موارد خواهید دید:
- <div class="alert alert-info"></div>
+ <div class="relative px-3 py-3 mb-4 border rounded text-teal-darker border-teal-dark bg-teal-lighter"></div>
- <input class="form-control" type="text" />
+ <input class="block appearance-none w-full py-1 px-2 mb-1 text-base leading-normal bg-white text-grey-darker border border-grey rounded" type="text" />
- <a href="#" class="btn btn-primary btn-lg"></a>
+ <a href="#" class="inline-block align-middle text-center select-none border font-normal whitespace-no-wrap py-2 px-4 rounded text-base leading-normal no-underline text-blue-lightest bg-blue hover:bg-blue-light py-3 px-4 text-xl leading-tight"></a>
جمع بندی
من پی بردم که این پکیج نه تنها برای تبدیل خودکار، بلکه برای کمک در یارگیری بهتر کلاس های Tailwind و نحوه ارتباط آنها با کلاس های Bootstrap، پر کاربرد بوده است. پیشنهاد می کنم که نگاهی به سند پکیج و فایل Converer.php که کار های سنگین را انجام می دهد داشته باشید.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید