InjectPosition : 'last' not working with vuetify
stephenjason89 opened this issue · comments
Version Information
- @nuxtjs/tailwindcss: Latest Version
- Nuxt: Version 3.8.2
Reproduction Scenario
In my project, Vuetify is incorporated, and I use vite-plugin-vuetify for treeshaking purposes.
I've turned off Vuetify's CSS helpers and implemented Tailwind CSS.
Tailwind CSS functions perfectly except when used within a Vuetify component.
For instance, a Vuetify component like VCard is styled with padding:0,
So when we try to apply a Tailwind class such as p-10 it will fail, as it gets overridden by padding:0.
Given that vite-plugin-vuetify creates separate CSS files for each Vuetify component, like 
,
Specifying 'injectPosition' as 'last' doesn't solve this issue.
Upon inspecting the DOM, I can verify that the Tailwind class is indeed applied but is negated by the existing padding:0.
Manually removing padding:0 enables the Tailwind p-10 class to function as intended.
Any help is deeply appreciated.
Is it possible for you to pass styles: false to the Vite plugin while adding vuetify/styles to nuxt.options.css?
Hello @ineshbose, that wouldn't work. The styles option for the vite plugin was responsible for each component style, while the vuetify/styles was responsible for other things like $utilities, $reset, etc..
We actually need both. However what i end up doing was, use the important option in tailwindcss config.
Thank you so much for looking in to this
Did you find a solution to this @stephenjason89? Might be helpful later for someone else in the same boat!