通过 Tailwindo 将 Bootstrap CSS 转换为 Tailwind

使用 awssat/tailwindo 包可以精确地将 Bootstrap 类自动转换成 Tailwind 类。

安装 Tailwindo

运行如下代码，可以在系统上全局安装该包。

composer global require awssat/tailwindo

用途

使用如下命令将遍历 Laravel Blade 视图文件，将其中文件转换成 Tailwind。

cd ~/my-projecttailwindo 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>

小结

这个包不仅可以自动转换文件，而且可以更好地帮助我学习 Tailwind 类以及它们与 Bootstrap 类的关系。建议查看包文档和 Converter.php 文件，它完成了繁重的工作。这是一个有用的参考。