[Feature Request] Enhance compatibility with other CSS utility frameworks such as Tailwind

[frandiox]

Problem to solve

Currently, CSS utility classes such as "d-flex", "pa-5", etc. are always included in Vuetify (as far as I know). This creates conflicts when combining with other utility frameworks such as Tailwind.
I believe the only way to support it right now is to prefix every Tailwind's classes so it doesn't overlap with Vuetify.

Proposed solution

For the new Vuetify 3 it would be nice if one of these things can be done:

• Ideally, only include utility classes optionally (utility: false or anything like that). If Vuetify itself uses these classes internally then this wouldn't be possible.
• Add a way to prefix Vuetify's utility classes optionally (prefix: 'v-' => v-d-flex). Combined with PurgeCSS this might lead to good-enough results (as long as not every class is used internally).

[KaelWD]

There are some other issues about this already: #7039, #8530

Individual utilities can be disabled by setting their value in the $utilities sass variable to false; this file disables all of them: https://github.com/vuetifyjs/vuetify-loader/blob/master/dev/src/_variables.scss

Vuetify itself uses these classes

I think only the grid classes are generated from here, we try to avoid using the rest of them. It would be possible to add a variable to disable everything except the grid.

[johnleider]

Marking this as a duplicate of #7039 and #8530

If you have any additional questions, please reach out to us in our Discord community.

[eolamisan]

For vuetify 3.5.10

It's not perfect but may be useful for certain scenarios where there is a conflict.
You may import utilities prefixed like this:

 //src\styles\main.scss
.your-namespace {
  @import './utilities.scss';
}

Here I'm adding the 'v-' prefix but it could be something else.
This is based on 'vuetify/lib/styles/utilities/_index.sass':

 //\src\styles\_utilities.scss
 @use 'sass:string';
 @use 'sass:map';
 @use 'sass:meta';
 @use 'vuetify/settings';
 @use 'vuetify/tools';
 @use 'vuetify/lib/styles/utilities/display';
 @use 'vuetify/lib/styles/utilities/elevation';
 @use 'vuetify/lib/styles/utilities/screenreaders';
 
 // Utilities
 @each $breakpoint in map.keys(settings.$grid-breakpoints) {

// Generate media query if needed
@include tools.media-breakpoint-up($breakpoint) {
    $infix: tools.breakpoint-infix($breakpoint, settings.$grid-breakpoints);

    // Loop over each utility property
    @each $key, $utility in settings.$utilities {
        // Use custom class if present
        $property-class: map.get($utility, class);
        $utility-copy: $utility;

        @if ($property-class) {
            // **append prefix to utility classes**
            $utility-copy: map.merge($utility, ('class': 'v-' + $property-class));
        }

        @else {
            // do nothing
        }

        // The utility can be disabled with `false`, thus check if the utility is a map first
        // Only proceed if responsive media queries are enabled or if it's the base media query
        @if string.slice($key, -4)==':ltr' {
            @if meta.type-of($utility-copy)=="map" and (map.get($utility-copy, responsive) or $infix =="") {
                @include tools.generate-utility($utility-copy, $infix, 'ltr');
            }
        }

        @else if string.slice($key, -4)==':rtl' {
            @if meta.type-of($utility-copy)=="map" and (map.get($utility-copy, responsive) or $infix =="") {
                @include tools.generate-utility($utility-copy, $infix, 'rtl');
            }
        }

        @else {
            @if meta.type-of($utility-copy)=="map" and (map.get($utility-copy, responsive) or $infix =="") {
                @include tools.generate-utility($utility-copy, $infix, 'bidi');
            }
        }
    }
}

}