Vuetify 样式不适用于 Tailwind

Posted 2023-03-06

【中文标题】Vuetify 样式不适用于 Tailwind

【英文标题】：Vuetify styles does not work with Tailwind

【发布时间】：2020-09-13 07:30:28

【问题描述】：

我最初安装了 Tailwind CSS，然后在我的项目中间我决定尝试 Vuetify。使用vuetify-loader 安装后，vuetify 工作正常，但样式不起作用。例如，当我单击时按钮的动画正在工作，但按钮颜色而不是蓝色变为灰色。

但是当我用

编写 vue 组件时

<template>
<v-app>
...
</v-app>
</template>

知道如何将它们分开吗？

一些信息：

        "tailwindcss": "^1.4.5",
        "vuetify": "^2.2.29",
        "vuetify-loader": "^1.4.3",

Vuetify 样式有效，但没有 Tailwind 样式

webpack.mix 文件

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js');
mix.postCss('resources/css/main.css', 'public/css', [
    require('tailwindcss'),
])

const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')

var webpackConfig = 
    plugins: [
        new VuetifyLoaderPlugin()
    ]

mix.webpackConfig(webpackConfig)

src/plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

const opts = 

export default new Vuetify(opts)

app.js

import vuetify from './vuetify'
const app = new Vue(
el: '#app',
store,
vuetify,

【参考方案1】：

为了避免可能的冲突，我们可以使用前缀https://tailwindcss.com/docs/configuration#prefix