Using Vuetify with UnoCSS + wind4 preset #22830
-
|
The goal is to use Tailwind CSS in an existing Vuetify 4 project with many components, without rewriting everything. I followed the official documentation, which recommends disabling Tailwind’s reset: presetWind4({
preflights: {
reset: false,
},
dark: {
dark: ".v-theme--dark",
light: ".v-theme--light",
},
}),However, Tailwind styles don’t render correctly without its reset. For example, basic elements look noticeably off when the reset is disabled. 
Here is how it looks with reset: 
On the other hand, enabling Tailwind’s reset fixes Tailwind styling, but breaks Vuetify components. For instance, 
So this leaves me with two undesirable options:
What is the recommended approach for combining Tailwind (or UnoCSS with the Tailwind preset) and Vuetify in a real-world project like this? For reference, here’s a minimal reproducible example: |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 2 replies
-
|
The layers order is messed up because of a typical problem - If you'd generate new project using latest Assuming you really need SSR, the only know workaround for now is to link // roughly like this
app: {
head: {
// typical stuff, title, meta, etc...
link: [{ rel: 'stylesheet', href: '/layers.css' }] // and move the `layers.css` file to `public` folder
},
}, |
Beta Was this translation helpful? Give feedback.
-
|
@J-Sek could you provide a working example? I don't need SSR and even Nuxt is optional. I've tried to setup a new default project using latest
I've tried to disable SSR, but it made no difference. |
Beta Was this translation helpful? Give feedback.
-
|
Option 1:
Option 2:
|
Beta Was this translation helpful? Give feedback.
-
|
Thanks, downgrading to Nuxt 4.4.2 turned out to be the missing piece. |
Beta Was this translation helpful? Give feedback.
Option 1:
ssr: falsein nuxt.config.tsOption 2:
layers.cssfile topublicfolderapp: { head: { link: [{ rel: 'stylesheet', href: '/layers.css' }] } },in nuxt.config.tsassets/styles/layers.cssentry fromcss: [...]