问题介绍

使用 Tailwindcss 开发项目时，如果项目还使用了其他的 UI组件库，则有可能会出现 class冲突的问题，尤其是一些海外的开源UI组件库，大多会有与 Tailwindcss 语法相同 class 定义，这时如果他们的 class 样式定义不同，则可能会产生冲突问题。

比如老狗最近使用 Tailwindcss + Vuetify 开发项目时，就出现了一些冲突问题。

一个简单的冲突问题举例：

这个冲突简单来讲就是：Vuetify 的样式中存在 !important 导致正常的 Tailwindcss 失效。

详细内容请看下面。

同名 class 如下：

css
/* tailwindcss */
.px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}


/* Vuetify */
.px-4 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

如上代码可以发现，其实这两个框架定义的样式时一样的，唯一的区别是 Vuetify 中使用了 !important，而问题就出在 !important 上。

现在很多web页面都需要考虑响应式布局，使用 tailwindcss 时，一般我们使用标识来定义响应式样式，如md/lg等，比如下面的实例代码。

html
<button class="px-4 md:px-2">立即开始</button>

由于 Vuetify 的 px-4 存在 !important，导致 tailwindcss 的 md:px-2 失去了效果，这就导致页面没有显示出想要的效果。

如何解决？

方式1：客制化Tailwind类名（推荐）

Tailwindcss 提供配置来设置类前缀，如：

ts
/** @type {import('tailwindcss').Config} */
module.exports = {
  prefix: 'tw-',
}

详情可见：tailwindcss_config#prefix

再 Nuxt3中的配置如下：

ts
export default defineNuxtConfig({
  modules: [
    "@nuxtjs/tailwindcss",
  ],
  tailwindcss: {
    config: {
      prefix: "tw-",
    },
  },
}

方式2：自定义css，不使用有冲突的class

顾名思义，这里就不啰嗦了，该方式最重要的工作时找到有冲突的类名，然后替换为自定义的 class/css。

如果你有其他的解决办法，欢迎评论交流！！！