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

گردآوری و تالیف : عرفان کاکایی
تاریخ انتشار : 16 خرداد 1397
دسته بندی ها : طراحی وب

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

منبع

برچسب :
این مطلب را با دیگران به اشتراک بگذارید :

مقالات پیشنهادی

نکات ضروری تبدیل طرح دسکتاپ یک سایت، به طرح موبایل آن

از آنجایی که دستگاه های موبایل در محبوبیت در حال پیشی گرفتن از دسکتاپ هستند ، ضروری است طراحان، طراحی برای موبایل را هم در ذهن داشته باشند. Mobile-fir...

تبدیل صدا به متن با جاوا اسکریپت

در این آموزش میخواهیم کار با Web Speech API رو تجربه کنیم. این یکی از قدرتمندترین رابط های مرورگریست که به شما اجازه میده صدای انسان رو ضبط کرده و به...

افکت دادن به تصاویر با CSSCO

CSSCO یک ابزار برای فیلترکردن تصاویر (افکت دادن ) با استفاده از css است . که به راحتی با اضافه کردن چند کلاس میتوانید به تصاویر خود با استفاده از این...

۱۰ تا از بهترین انیمیشن های متنی که می توانید با استفاده از CSS و JavaScript بسازید

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