Bootstrap CSS خود را با استفاده از Tailwindo به Tailwind تبدیل کنید

ترجمه و تالیف : عرفان کاکایی
تاریخ انتشار : 13 خرداد 98
خواندن در 35 ثانیه
دسته بندی ها : طراحی وب

اخیرا بر روی تبدیل یکی از پروژه های جانبی ام از 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 که کار های سنگین را انجام می دهد داشته باشید.

منبع

دیدگاه‌ها و پرسش‌ها

برای ارسال نظر لازم است ابتدا وارد سایت شوید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید