能否让cdn.tailwindcss.com实时重新编译内联样式？

可以强制浏览器端的Tailwind JIT重新编译动态添加的类，具体操作如下：

关键逻辑 #

Tailwind的CDN版本（JIT模式）暴露了可调用的API，通过触发配置更新或手动调用编译方法，就能让它重新扫描页面DOM、编译新的类样式。

步骤1：确保启用JIT模式 #

确认引入的Tailwind CDN脚本包含JIT参数，比如：

<script src="https://cdn.tailwindcss.com?jit"></script>

步骤2：修改事件监听器触发重新编译 #

更新你的JS代码，在修改DOM类名后，添加触发重新编译的逻辑：

let panel = document.createElement('div');
panel.innerHTML = '<input type="number" step="1" value="24">';
panel.setAttribute('style', 'position:fixed;top:0;right:0;');
document.body.appendChild(panel);

document.querySelector('input').addEventListener('input', (e) => {
    let newMb = e.currentTarget.value;
    const h1 = document.querySelector('h1');
    h1.classList.replace('mb-24', `mb-${newMb}`);
    
    // 方式1：通过重置配置触发重新扫描编译
    tailwind.config = tailwind.config;
    
    // 方式2：手动编译并替换样式（更直接）
    // const styleEl = document.querySelector('style[data-tailwind]');
    // styleEl.textContent = tailwind.compile(tailwind.config);
});

补充方案 #

如果上述方式不生效，可手动传入页面HTML内容调用编译：

const compiledCSS = tailwind.process(document.documentElement.outerHTML, tailwind.config).css;
document.querySelector('style[data-tailwind]').textContent = compiledCSS;

注意事项 #

• 这种实时编译仅适合开发场景，生产环境建议提前编译Tailwind样式，避免浏览器端编译带来的性能损耗。
• 输入的数值即使是Tailwind默认间距体系外的自定义值，JIT模式也会自动生成对应的样式（比如mb-23会生成margin-bottom: 5.75rem）。

内容的提问来源于stack exchange，提问作者stkuser