如何为已有 tailwind 项目增加前缀?

Grow in 掘金插件曾经遇到一个问题:意外干扰沸点选择圈子菜单的展示。排查发现是根节点下的 Modal 组件将样式带出,由于 class 重名导致全局样式污染。

如何为已有 tailwind 项目增加前缀?

根本的解决方法是将 Modal 组件封进 Web Component,但 HeadlessUI 目前并没有一个好的解决方案。为了快速修复问题,决定暂时从「避免全局样式污染」的方向解决。

tailwindcss 可能引发污染的有两部分:

  1. base layer 中的 Preflight,用 modern-normalize 来消除跨浏览器的不一致性
  2. 不带前缀的 utility class

对于第一部分,关闭 Preflight 避免生成 normalize 相关的 CSS

// tailwind.config.js
module.exports = {
  corePlugins: {
    preflight: false,
  }
}

对于第二部分,要为 tailwind classes 加上前缀。tailwind 配置中可以设置 prefix。但在已有大量代码的项目中,还要批量替换掉模板中已有的 classes 代码。

如何为已有 tailwind 项目增加前缀?

tailwind 对模板内容做正则匹配(prefix也是匹配的一部分),提取出所有可能是类名的字符串,最终生成只包含这些原子 class 的样式表。整个流程 tailwind 处理的对象始终是 css,无权对 css 之外的代码做修改。

tailwind 的工作机制决定了替换模板无法在编译打包中完成,那只能写个脚本一次性替换了。脚本的工作无非是匹配模版中的所有 class,再替换为 ${prefix}${class},这不正好和 tailwind 干的活类似么,如果能直接调用 tailwind 的提取器问题便能迎刃而解。

原文链接:https://juejin.cn/post/7240428977063673893 作者:Curly_Brackets

(1)
上一篇 2023年6月4日 上午10:05
下一篇 2023年6月4日 上午10:15

相关推荐

发表评论

登录后才能评论