How to dedupe tailwind classes in bodyAttrs? #431
Replies: 1 comment 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
}
}
}) |
Beta Was this translation helpful? Give feedback.
-
|
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 |
Beta Was this translation helpful? Give feedback.
-
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 🙏
Beta Was this translation helpful? Give feedback.
All reactions