VueJS 2.0 SPA应用中含数字的CSS类名出现重复及额外样式问题排查

嘿，这个情况我碰过！核心原因是你定义的.text-2xl正好是Tailwind CSS的默认工具类，项目里大概率是隐式引入了Tailwind，才导致了样式冲突和重复的问题。

具体拆解下为什么会这样： #

1. Tailwind的内置类特性：text-2xl是Tailwind自带的字体大小类，它的默认样式就是：

   .text-2xl {
     font-size: 1.5rem;
     line-height: 2rem;
   }
   

   这完全对应你看到的额外line-height: 2rem，以及类重复的现象——你的自定义类和Tailwind自动生成的类被打包工具合并到一起了。

2. 为什么会隐式引入Tailwind？

   • 可能是你项目里某个依赖包（比如第三方UI组件库）内置了Tailwind；
   • 或者之前有人尝试配置过Tailwind，残留的postcss.config.js或tailwind.config.js让构建工具自动注入了Tailwind的样式；
   • 甚至Vue CLI的某些预设/插件默认集成了Tailwind的处理逻辑，你没注意到而已。

3. 重命名后正常的原因：
   改成text-xxl后，这个名称不属于Tailwind的内置类命名规则，Tailwind不会自动生成对应的样式，自然就不会和你的自定义类冲突了。

验证和解决办法： #

• 先确认是否真的有Tailwind：去项目根目录搜tailwind关键词，看看package.json依赖里有没有tailwindcss，或者有没有tailwind.config.js、postcss.config.js里包含Tailwind的配置；
• 如果不需要Tailwind：直接删掉相关依赖和配置文件，清理构建流程中注入Tailwind的逻辑就行；
• 如果需要保留Tailwind：可以给Tailwind的所有类加个前缀，避免撞名。比如在tailwind.config.js里加：

  module.exports = {
    prefix: 'tw-',
    // 其他配置项...
  }
  

  这样Tailwind的字体类就变成tw-text-2xl，和你的自定义类彻底分开，再也不会冲突了。

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