Vuetify 样式不适用于 Tailwind答案

【问题标题】：Vuetify styles does not work with TailwindVuetify 样式不适用于 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,

【问题讨论】：

标签： css laravel vue.js vuetify.js tailwind-css

【解决方案1】：

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

【讨论】：