如何在浏览器中通过JS调用Tailwind CSS生成对应HTML的CSS？

问题描述 #

我开发了一个类似网站构建器的Web应用，支持用户使用Liquid编写自定义HTML模板。现在希望允许用户在模板中使用Tailwind CSS，并根据模板里用到的类生成对应的编译后CSS文件并持久化存储。

我了解可以在服务器上使用Tailwind独立可执行文件实现，但不想管理二进制文件；加上用户很少创建/编辑模板，所以想直接在浏览器中运行生成CSS并保存，另外我的应用本身不常使用Tailwind，仅为用户提供该支持。

想知道是否有最简单的实现方式：通过一个JavaScript函数传入HTML，返回对应的生成CSS，就像Tailwind Play的“Generated CSS”面板功能那样，示例代码如下：

<script src="tailwindcss.js"></script>
<script>
  const inputHtml = '<div class="relative"></div>'; // 示例
  const outputCss = SOMETHING(inputHtml);
  console.log(outputCss) // 这个例子会输出: .relative { position: relative; }
</script>

请问这可行吗？

实现方案 #

当然可行，以下是最直接的实现步骤：

• 引入Tailwind浏览器端脚本
  使用Tailwind官方提供的浏览器端构建脚本，你可以将其部署到自己的静态资源服务器，或者使用公开CDN托管的版本，无需管理任何二进制文件。

• 编写生成CSS的函数
  只需要简单配置Tailwind的扫描内容为用户输入的HTML，再调用内置的生成方法即可，示例代码如下：

// 确保已引入tailwindcss脚本后执行
function generateTailwindCss(inputHtml) {
  // 配置Tailwind，指定要扫描的HTML内容
  tailwind.config = {
    content: [inputHtml],
    // 可根据需求添加自定义主题/插件，不需要则保留默认配置
    theme: {
      extend: {},
    },
  };

  // 生成并返回对应的CSS代码
  return tailwind.css();
}

// 调用示例
const inputHtml = '<div class="relative"></div>';
const outputCss = generateTailwindCss(inputHtml);
console.log(outputCss);

这个函数会根据传入HTML中的Tailwind类，生成对应的压缩CSS代码，效果和Tailwind Play的“Generated CSS”面板完全一致。

• 持久化生成的CSS
  生成CSS后，你可以将其与用户的模板关联存储到后端数据库，或者存在前端localStorage中（适合不需要跨设备同步的场景）。用户下次编辑模板时，重新调用函数生成并更新存储即可。

• 注意事项

  • 浏览器端生成CSS的性能完全够用，因为用户很少编辑模板，不会有频繁调用的问题。
  • 如果用户需要使用自定义Tailwind插件，浏览器版可能不支持，但基础类和简单主题扩展完全兼容。
  • 可以给生成的CSS添加唯一类前缀或命名空间，避免与你自身应用的样式冲突。

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