Class & Style Attributes
Style your pages by applying classes and styles to your `<html>` and `<body>` tags.
When you need to style your page by adding classes or styles to the <html> or <body>, Unhead makes it easy by
providing object and array support for the class and style attributes.
Static Classes & Styles
If your classes or styles aren't going to change, you can provide them as a string.
useHead({
htmlAttrs: {
class: 'my-class my-other-class',
style: 'background-color: red; color: white;'
}
})
useHead({
bodyAttrs: {
class: 'my-class my-other-class',
style: 'background-color: red; color: white;'
}
})
Tip: If you're server-side rendering and applying it to your default layout, you can use useServerHead for a minor performance improvement.
Array Classes & Styles
Using manual separators for classes and styles can be a bit cumbersome, so Unhead allows you to use arrays for both.
useHead({
htmlAttrs: {
class: [
'my-class',
'my-other-class'
],
style: [
'background-color: red',
'color: white'
],
}
})
Dynamic Classes & Styles
For improved reactivity and merging support, you can provide the class as an object or an array.
When providing class as an object, the key should be the class and the value will be whether the class should be added or not.
const darkMode = ref(false)
useHead({
htmlAttrs: {
class: {
// will be rendered
dark: () => darkMode,
// will not be rendered
light: () => !darkMode,
},
style: {
// will not render when darkMode is false
'background-color': () => darkMode ? 'rgba(0, 0, 0, 0.9)' : false,
}
}
})