如何将Bootstrap/Tailwind CSS类名转换为随机非框架类名？

当然可以实现这个需求，Tailwind CSS本身就支持在生产构建时自动压缩类名为短的随机字符串，同时针对Bootstrap的类名也有对应的处理方案：

Tailwind类名压缩实现步骤 #

• 确保你的Tailwind配置启用了JIT模式（Tailwind v3+默认已启用），可在tailwind.config.js中明确配置：

  module.exports = {
    content: ["./src/**/*.{html,js,jsx,vue}"], // 匹配你的项目文件路径
    mode: 'jit',
    theme: {
      extend: {},
    },
    plugins: [],
  }
  

• 执行生产环境构建命令（比如npm run build），此时Tailwind会自动将所有用到的类名压缩成无意义的短字符串，比如bg-blue-500会变成类似_a3f这样的随机类名，开发者工具里只能看到这些短类名，无法直接识别出Tailwind的语义化类。

Bootstrap类名的处理方案 #

如果连Bootstrap的类名也想隐藏，操作起来要更谨慎：

• 可以使用PostCSS插件（比如postcss-class-renamer），在构建阶段批量替换HTML和CSS中的Bootstrap类名，比如把btn换成随机字符串x9z。
• 注意：Bootstrap的很多交互组件（比如模态框、下拉菜单）依赖原生类名触发JS逻辑，替换类名时需要同步修改Bootstrap JS中的类名引用，否则会导致组件功能失效，这一步需要仔细测试。

注意事项 #

• 类名压缩仅建议在生产环境启用，开发阶段保持语义化类名更便于调试。
• 如果项目中使用了@apply或者自定义工具类，Tailwind的JIT编译器会自动识别并同步压缩这些类名，无需额外配置。

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