CODEWITHSUNDEEP
vuetify.jsnuxt.jstailwind-css
Kevin Rutledge
Kevin Rutledge

Reputation: 293

How do I get Tailwind and Vuetify to work together without causing style artifacts?

I worked all day yesterday to finish a google cloud function to power an appointment maker vue component. The last step is actually UI using the returned object. I was planning on using the vuetify date/time pickers with allowed dates and times.

After spending much of today trying to add vuetify to an existing project to only use those to components, it is causing style errors with some classes(margin, etc) that are coming from main.sass.

I thought of adding a prefix to tailwind, but I don't have the time or inclination to go back to all of my components and files to add the prefix to all of my tailwind classes.

Is there something I can do to scope the vuetify classes/css so as not to cause problems outside of the two components I am trying to use?

Can I add the vuetify css after my tailwind is compiled and assembled so the tailwind classes win take precedent?

I don't have code to show as it is fairly straight forward. I thought the google calendar API would be the hardest part of this component, but it is proving to be the easier.

Upvotes: 20

Views: 22820

Answers (4)

Farshad Hasanpour
Farshad Hasanpour

Reputation: 221

Using SASS and Vuetify 3, you can disable global utility and color classes.

Here is the documentation: https://vuetifyjs.com/en/features/sass-variables/#disabling-utility-classes

Upvotes: 0

Rafael Menezes
Rafael Menezes

Reputation: 11

According to the Vuetify docs: "Install webpack-plugin-vuetify or vite-plugin-vuetify then enable it in your bundler configuration. Make sure the vuetify plugin comes after the vue plugin or it won’t work correctly."

Upvotes: 1

Ameer Mousavi
Ameer Mousavi

Reputation: 1363

I know this is too late to answer but I'm writing this for other people like me who came up with this problem.

In order to add Vuetify to an existing project which is using Tailwind CSS without CSS class conflicting, You just need to activate treeShake in Vuetify options.

For example in a Nuxt project, add the below snippet in nuxt.config.js:

export default {

// Other Configs

vuetify: {
    treeShake: true
  },
}

Upvotes: 5

nicodev
nicodev

Reputation: 349

Tailwind allows you to prefix the generated classes in the configuration file. See https://tailwindcss.com/docs/configuration

Upvotes: 18

Related Questions