How to dedupe tailwind classes in bodyAttrs? #431
Replies: 2 comments 1 reply
|
Hi, thanks for the question. The simplest way to solve this would be to conditionally add the class in your app.vue. const route = useRoute()
useHead({
bodyAttrs: {
class: {
"bg-red-500": () => route.path !== '/'
}
},
})There is a more complicated way to solve this in where we can use the Unhead hooks to modify the resolved tags using tw-merge, this is a rough untested code sample of how you might do that const head = injectHead()
head.hooks.hook('tags:afterResolve', (ctx) => {
// collect all body classes
const bodyClasses = ctx.tags.filter((tag) => tag.tag === 'bodyAttrs').flatMap((tag) => tag.props.class)
// apply tw-merge
const twClasses = twMerge(bodyClasses)
// filter out non-merged classes
for (const tag of ctx.tags) {
if (tag.tag === 'bodyAttrs') {
tag.props.class = twClasses
}
}
}) |
|
Hi, @harlan-zw, thanks for the quick reply (and HNY!) The second snippet works great, thank you. One follow-up question: where would be the place to put it outside of export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.hooks.hook("app:created", (app) => {
// same as before
const head = injectHead()
head.hooks.hook("tags:resolve", (ctx) => {
// collect all body classes
const bodyClasses = ctx.tags.filter((tag) => tag.tag === "bodyAttrs").flatMap((tag) => tag.props.class)
// apply tw-merge
const twClasses = cn(bodyClasses)
// filter out non-merged classes
for (const tag of ctx.tags) {
if (tag.tag === "bodyAttrs") {
tag.props.class = twClasses
}
}
})
})
})But that doesn’t work properly – it runs, but not at the right time (supposedly) so the tags are not deduped, only concatenated. I am not that fluent with Nuxt docs lists Any pointers appreciated! TL;DR where to put the second snippet outside of |
|
Hi @harlan-zw, sorry to necro this issue – the newly released unhead v2 as part of nuxt 3.16.2 breaks the Could you please provide any guidance how to make this behaviour work in the new version? Thanks 🙏 |
Uh oh!
There was an error while loading. Please reload this page.
Hi,
I am using
unheadas part ofnuxt@3. Is there any way to dedupe tailwind classes whenuseHead()is used in bothapp.vueand inpages/?Example:
Ideally I would dedupe them with something like tw-merge to get
class="bg-green-500"only in the final output.Basically any approach for specifying default
<body>classes and overrides for pages would be great.Thanks 🙏
All reactions