让 jquery 使用 tailwind css 的缩写语法。

[tool2d]

jquery 有一个 html()函数，是设置 innerHTML 的，重载一下，搜索 HTML 文本字符串，把内部所有<div style=""></div>的 style 文本提取出来。

按照分号或空格切分原则，分成多个字符串集合，再查找 bg-none 之类没有冒号的内联样式，写代码转换成 background:none

于是乎

$("#app").html("<div style='px-6 py-2 border-none bg-none text-green-600 font-bold nowrap'></div>");

就自动转换成了

$("#app").html("<div style='padding-left: 24px;padding-right: 24px;padding-top: 8px;padding-bottom: 8px;border:none;background:none;color:#16a34a;font-weight: 700;white-space:nowrap;'></div>");

用缩写也算是增加了代码的可读性。