可以使用Tailwind CSS提供的JIT(即时编译)选项来实现在cdn.tailwindcss.com上实时重新编译内联样式。以下是示例代码:
<!-- 导入 Tailwind CSS 的 JIT 版本 -->
<link rel="stylesheet" href="https://cdn.tailwindcss.com/jit/tailwind.min.css">
<!-- 在 HTML 标签中使用内联样式 -->
<div style="background-color: bg-blue-500; p-4">
<h1 class="text-white">Hello, Tailwind CSS JIT!</h1>
</div>
<!-- 使用类名生成动态样式 -->
<div class="bg-blue-500 p-4" style="color: {{colors.orange[500]}}">
<h1 class="text-white">Hello, Tailwind CSS JIT!</h1>
</div>
通过设置内联样式属性,并在其中使用类名生成动态样式,就可以实现在cdn.tailwindcss.com上实时重新编译内联样式。