如何从服务端生成的含TailwindCSS类的HTML字符串生成TailwindCSS

1. 提取HTML中的所有Tailwind类 #

首先要把HTML里的Tailwind类名全部提取出来并去重。比如针对这段示例HTML：

<div class="flex justify-center items-center p-4 bg-blue-500 text-white">
  <p class="font-bold text-lg">Hello World</p>
</div>

提取后得到唯一类列表：flex, justify-center, items-center, p-4, bg-blue-500, text-white, font-bold, text-lg

可以用简单脚本实现提取，比如JavaScript代码：

const html = '<div class="flex justify-center items-center p-4 bg-blue-500 text-white"><p class="font-bold text-lg">Hello World</p></div>';
const classRegex = /class="([^"]+)"/g;
const allClasses = new Set();
let match;
while ((match = classRegex.exec(html)) !== null) {
  match[1].split(' ').forEach(cls => allClasses.add(cls));
}
const uniqueClasses = Array.from(allClasses);
console.log(uniqueClasses);

2. 生成可复用的TailwindCSS代码 #

根据需求选择两种封装方式：

方式一：用@apply指令生成自定义类 #

在项目的Tailwind入口CSS文件中，使用@apply把提取的类组合成自定义CSS类：

/* 封装容器样式 */
.custom-center-container {
  @apply flex justify-center items-center p-4 bg-blue-500 text-white;
}

/* 封装文本样式 */
.custom-bold-text {
  @apply font-bold text-lg;
}

之后即可在HTML中简化使用：<div class="custom-center-container"><p class="custom-bold-text">Hello World</p></div>

方式二：通过Tailwind配置插件生成工具类 #

如果需要将样式整合到Tailwind的工具类体系中，可以在tailwind.config.js里添加自定义插件：

/** @type {import('tailwindcss').Config} */
module.exports = {
  plugins: [
    function({ addUtilities }) {
      addUtilities({
        '.custom-center-container': {
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          padding: '1rem',
          backgroundColor: '#3b82f6',
          color: '#ffffff',
        },
        '.custom-bold-text': {
          fontWeight: '700',
          fontSize: '1.125rem',
        }
      })
    }
  ],
}

3. 验证样式一致性 #

将生成的代码引入项目后，对比原HTML和使用自定义类的HTML的渲染效果，确保样式完全一致，没有遗漏类名或配置错误。

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