Skip to content

[Feature Request] Improve Compatibility of Utility Classes with UnoCSS/Tailwind #317

Open
@trydofor

Description

@trydofor

Background

Currently, I'm exploring ways to disable the built-in utility classes in favor of using unocss (or TailwindCSS via unocss presets) in my project. I’ve found some related behavior:

Goal

In my project, I aim to:

  • ✅ Use unocss instead of built-in utility classes wherever possible
  • ❌ Disable Vuetify utility classes selectively — only when safe
  • 🧱 For unsafe cases, block them via unocss’s blocklist

Problem

Currently, I’m unclear on the compatibility boundaries between Vuetify utility classes and unocss. Specifically:

  • Which Vuetify utility classes are safe to disable?
  • Which utility classes should be explicitly blocked in unocss to avoid conflicts?

Proposed Idea

Would it be possible to:

  • Provide a Vuetify-compatible UnoCSS preset or config helper
  • Or publish an official list of utility classes that:
    • ✅ Can be safely replaced by unocss
    • 🧱 Should be included in a blocklist

This would greatly help in customizing and reducing conflicts when using unocss in Vuetify-based projects.


Question

Has anyone already explored this direction?
Any recommended strategy or best practice for gradually migrating to unocss with minimal friction?

Thanks in advance!

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions