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 · Accepted Answer · 2021-02-17 20:37:50Z

4

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

answered Feb 17, 2021 at 20:37

Alexander Shestakov

1792 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vuetify styles does not work with Tailwind

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related