css - Vuetify 样式不适用于 Tailwind

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)

应用程序.js

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

Answer 1

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