Tailwind connection to vuetify

Question

I have a vue application that uses vuetify.

I also used tailwind classes.

// package.json
"dependencies": {
    "vue": "^3.3.4",
    "vue-router": "^4.2.3",
    "vuetify": "^3.3.11",
    ...
  },
  "devDependencies": {
    "@tailwindcss/aspect-ratio": "^0.4.2",
    "@vitejs/plugin-vue": "^4.2.3",
    "autoprefixer": "^10.4.15",
    "postcss": "^8.4.28",
    "tailwindcss": "^3.3.3",
    "vite": "^4.3.9",
    "vite-plugin-vuetify": "^1.0.2",
    ...
  }

And when I don't set the component in createVuetify to make the components that are only used in vuetify dynamic.

import {createVuetify} from 'vuetify';

// import * as components from 'vuetify/components';
// import * as labsComponents from 'vuetify/labs/components';
// import * as directives from 'vuetify/directives';

export default createVuetify({
    // components: {
    //     ...components,
    //     ...labsComponents,
    // },
    // directives,
})

It gives priority to vuetify classes and my tailwind classes don't work.

can you guide me ?

Answer 1

module.exports = {
  // plugins: {
  //   tailwindcss: {},
  //   autoprefixer: {},
  // },
  plugins: [
    'vuetify',
    'tailwindcss',
    'autoprefixer'
  ],
}

{
  "name": "...",
  "version": "1.0.3",
  "private": true,
  "scripts": {...},
  "dependencies": {
    "@vueuse/core": "^10.3.0",
    "axios": "^1.4.0",
    "lodash": "^4.17.21",
    "pinia": "^2.1.4",
    "pinia-plugin-persistedstate": "^3.1.0",
    "roboto-fontface": "*",
    "vue": "^3.3.4",
    "vue-router": "^4.2.3",
    "webfontloader": "^1.0.0",
    ...
  },
  "devDependencies": {
    "@tailwindcss/aspect-ratio": "^0.4.2",
    "@vitejs/plugin-vue": "^4.2.3",
    "autoprefixer": "^10.4.15",
    "postcss": "^8.4.28",
    "sass": "^1.63.6",
    "sass-loader": "^13.3.2",
    "tailwindcss": "^3.3.3",
    "vite": "^4.3.9",
    "vite-plugin-vuetify": "^1.0.2",
    "vuetify": "^3.3.23",
    ...
  }
}