---
title: "Class & Style Attributes"
description: "Add classes and styles to html and body tags with htmlAttrs and bodyAttrs. Support for strings, arrays, objects, and reactive values."
canonical_url: "https://unhead.unjs.io/docs/head/guides/core-concepts/class-attr"
last_updated: "2026-06-30T06:57:03.870Z"
---
**Quick Answer:** Use `htmlAttrs` and `bodyAttrs` to set attributes on `` and ``. Classes can be strings, arrays, or objects. Example: `htmlAttrs: { class: 'dark-mode', lang: 'en' }`
When you need to style your page by adding classes or styles to the `` or `` tags, Unhead makes it easy by
providing object and array support for the `class` and `style` attributes. This allows for both static and reactive styling.
## How Do I Add Static Classes and Styles?
If your classes or styles aren't going to change, you can provide them as a string.
```ts [HTML Attrs]
import { useHead } from '@unhead/dynamic-import'
// useHead: /docs/head/api/composables/use-head
useHead({
htmlAttrs: {
class: 'my-class my-other-class',
style: 'background-color: red; color: white;'
}
})
```
```ts [Body Attrs]
import { useHead } from '@unhead/dynamic-import'
useHead({
bodyAttrs: {
class: 'my-class my-other-class',
style: 'background-color: red; color: white;'
}
})
```
If you're server-side rendering static tags, you can use `import.meta.server` to conditionally add them only during SSR.
### Can I Use Arrays for Classes and Styles?
Using manual separators for classes and styles can be a bit cumbersome, so Unhead allows you to use arrays for both.
```ts
import { useHead } from '@unhead/dynamic-import'
useHead({
htmlAttrs: {
class: [
'my-class',
'my-other-class'
],
style: [
'background-color: red',
'color: white'
],
}
})
```
## How Do I Add Dynamic Classes and Styles?
For improved reactivity and merging support, you can provide the class as an object or an array.
### How Do I Toggle Classes Conditionally?
When providing class as an object, the key should be the class name and the value determines whether the class should be added or not.
```ts
import { useHead } from '@unhead/dynamic-import'
const colorMode = useColorMode()
useHead({
htmlAttrs: {
class: {
// will be rendered when darkMode is true
dark: () => colorMode.value === 'dark',
// will be rendered when darkMode is false
light: () => !colorMode.value === 'dark'
}
}
})
```
### How Do I Apply Reactive Styles?
Similarly, styles can be defined reactively using an object:
```ts
import { useHead } from '@unhead/dynamic-import'
const colorMode = useColorMode()
useHead({
bodyAttrs: {
style: {
// conditional style that only applies when darkMode is true
'background-color': () => colorMode.value === 'dark' ? 'rgba(0, 0, 0, 0.9)' : false,
// reactive style that always applies with current value
'font-size': () => fontSize.value,
}
}
})
```
## Key Takeaways
- Use `htmlAttrs` and `bodyAttrs` to set attributes on `` and ``
- Classes can be strings, arrays, or objects (like Vue's class binding)
- Styles can be strings or objects for type-safe CSS properties
- Use data attributes for JavaScript hooks and CSS selectors
## See Also
- [useHead() API](/docs/head/api/composables/use-head) - Full API reference
- [Build Plugins](/docs/head/guides/build-plugins/overview) - Build-time optimizations