Tailwindcss与其他UI框架冲突怎么办?
## 问题介绍 使用 `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`。
## 如果你有其他的解决办法,欢迎评论交流!!!END
评论
登录后查看和发表评论
前往登录