تحويل صفحات Bootstrap إلى Tailwind مع حزمة Tailwindo

تحويل صفحات Bootstrap إلى Tailwind مع حزمة Tailwindo

تمككنا هذه الحزمة على بتحويل كلاسات Bootstrap إلى كلاسات Tailwind بشكل تلقائي.

تثبيت Tailwindo

يمكنك تثبيت هذه الحزمة بشكل مطلق على النظام الخاص بك عن طريق تشغيل الأمر التالي.

composer global require awssat/tailwindo

طريقة الاستخدام

لبدء تحويل ملفاتك إلى Tailwind ، قم بتشغيل الأمر التالي لتكرار جميع ملفات Blade الخاصة بمشروعك في Laravel.

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 على ملفات مشروعك ، ستحصل على نتائج مشابهة لما يلي.

- <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>
فريق التحرير

فريق التحرير هو المكلف بتدوين مقالات علمية بالعربية لتمكين المبرمجين العرب من الحصول على اخر الاخبار و التقنيات الجديدة بسرعة وفي مكان واحد.

إقرأ أيضً