Нещодавно я працював над перетворенням одного зі своїх побічних проектів з Bootstrap на Tailwind і натрапив на awssat/tailwindo. Цей пакет робить саме це – автоматично перетворює класи компонентів Bootstrap в класи утиліт Tailwind.
Встановлення Tailwindo
Ви можете встановити цей пакет глобально у своїй системі, виконавши таку команду.
composer global require awssat/tailwindoВикористання
Щоб почати перетворювати свої файли на Tailwind, запустіть наступну команду, щоб циклічно переглядати всі ваші файли перегляду леза 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, які я так добре знаю. Я закликаю вас поглянути на документацію пакета та файл конвертера.php який виконує важку роботу. Я вважаю, що це корисне посилання.
