Vuetify - how to disable Display Helpers in a custom build?

Question

Some of Vuetify's display helpers (https://vuetifyjs.com/en/styles/display/#display) collide with Tailwind classes.
In Bootstrap, fore example, there's a way to disable (=not include) utility classes in a custom build.
Searched in the docs and in vuetify-loader's docs for a way to do it, couldn't find one - is it possible?

Answer 1

I found this article that helped me remove some of the Display helpers (utility classes) from Vuetify. Over here you can see all the available utilities you can disable.

Answer 2

While I'm not aware of any way to disable Vuetify's Display Helpers, it is possible to prevent collision by prefixing Tailwind's classes. You can read about it in this thread on Tailwind's GitHub.

Answer 3

In Vuetify 3, remove this line, which is proably somewhere near your createVuetify():

import "vuetify/styles";

add these in a .scss file: (they're needed so Vuetify's components render properly)

@use "vuetify/lib/styles/generic";
@use "vuetify/lib/styles/elements";

and remember to import that scss file in main.js

import "main.scss";

---

explanation

if you read vuetify/styles/main.scss, currently, you'll see this:

@forward './settings'
@use './generic'
@use './elements'
@use './utilities'

I just guessed that if I omitted utilities that, well, the utilities would be omitted.