Tailwindcss与其他UI框架冲突怎么办？

## 问题介绍

使用 `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` 失去了效果，这就导致页面没有显示出想要的效果。

<!-- more -->

## 如何解决？

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

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

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

详情可见：[tailwindcss_config#prefix](https://tailwindcss.com/docs/configuration#prefix)

再 `Nuxt3`中的配置如下：

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

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

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



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