Question

我最初安装了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,

Answer 1

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

Vuetify样式不适用于Tailwind

1 个答案: