Недавно я работал над преобразованием одного из моих побочных проектов из Bootstrap в Tailwind и наткнулся на awssat / tailwindo. Этот пакет делает именно это – автоматически преобразует классы компонентов Bootstrap в служебные классы Tailwind.
Установка Tailwindo
Этот пакет можно установить глобально в системе, выполнив следующую команду.
composer global require awssat/tailwindoИспользование
Чтобы начать преобразование файлов в Tailwind, выполните следующую команду, чтобы просмотреть все файлы blade-вида Laravel.
cd ~/my-project
tailwindo resources/views --extensions=php --recursive=true --replace=trueTailwindo также может конвертировать файлы 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>Подводя итог,
я обнаружил, что этот пакет полезен не только для автоматического преобразования файлов, но и для того, чтобы лучше помочь мне изучать классы Tailwind и то, как они связаны с классами Bootstrap, которые я так хорошо знаю. Я рекомендую вам взглянуть на документацию по пакету и файл Converter.php который выполняет тяжелую работу. Я нахожу это полезной ссылкой.
