• Czas czytania ~ :czas min
  • 07.06.2022

Ostatnio pracowałem nad konwersją jednego z moich projektów pobocznych z Bootstrap na Tailwind i natknąłem się na awssat/tailwindo. Ten pakiet dokładnie to robi - automatycznie konwertuje klasy komponentów Bootstrap na klasy narzędzi Tailwind.

Instalacja Tailwindo

Możesz zainstalować ten pakiet globalnie w swoim systemie, uruchamiając następujące polecenie.

composer global require awssat/tailwindo

Zastosowanie

: Aby rozpocząć konwersję plików do Tailwind, uruchom następujące polecenie, aby zapętlić wszystkie pliki widoku ostrza Laravel.

cd ~/my-project
tailwindo resources/views --extensions=php --recursive=true --replace=true

Tailwindo jest również w stanie konwertować pliki Vue.js i HTML.

tailwindo resources/assets/js/components --extensions=vue --recursive=true --replace=true

Jeśli chcesz przekonwertować jeden plik naraz, możesz również uruchomić.

tailwindo file.blade.php

Wyniki

Po uruchomieniu Tailwindo na plikach widoków otrzymasz wyniki podobne do następujących.

- <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>

Podsumowanie

Odkryłem, że ten pakiet jest pomocny nie tylko w automatycznej konwersji plików, ale także w lepszej pomocy w nauce klas Tailwind i ich związku z klasami Bootstrapa, które znam tak dobrze. Zachęcam do zapoznania się z dokumentacją pakietu i plikiem Converter.php , który wykonuje ciężkie podnoszenie. Uważam, że jest to pomocne odniesienie.

Comments

No comments yet
Yurij Finiv

Yurij Finiv

Full stack

O

Professional Fullstack Developer with extensive experience in website and desktop application development. Proficient in a wide range of tools and technologies, including Bootstrap, Tailwind, HTML5, CSS3, PUG, JavaScript, Alpine.js, jQuery, PHP, MODX, and Node.js. Skilled in website development using Symfony, MODX, and Laravel. Experience: Contributed to the development and translation of MODX3 i...

O autorze CrazyBoy49z
WORK EXPERIENCE
Kontakt
Ukraine, Lutsk
+380979856297