Vuetify styles does not work with Tailwind

Question

I initially installed Tailwind CSS then in the middle of my project I decided to try Vuetify. After installing it with vuetify-loader vuetify works fine but the style is NOT working. For example, animation of the button when I click is working but the button color instead of blue it becomes gray.

But when I wrpe vue component with

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

Any idea of how I can separate them?

Some information :

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

Vuetify styles work but no Tailwind styles

webpack.mix file

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,

Alexander Shestakov Alexander Shestakov · Accepted Answer · 2021-02-17T20:37:50

To avoid possible conflicts, we can use the prefix https://tailwindcss.com/docs/configuration#prefix

Vuetify styles does not work with Tailwind

1 Answers