--- 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-08-11T00:43:45.674Z" --- Use `htmlAttrs` and `bodyAttrs` to set attributes on `` and ``. Class and style values can be strings, arrays, or objects. The `class` and `style` attributes accept strings, arrays, and objects for static or reactive values. ## 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;' } }) ``` ### Array values Use arrays to supply classes or declarations without joining them into a string: ```ts import { useHead } from '@unhead/dynamic-import' useHead({ htmlAttrs: { class: [ 'my-class', 'my-other-class' ], style: [ 'background-color: red', 'color: white' ], } }) ``` ## Dynamic classes and styles Use an object or array when class values need to update reactively or merge with another entry. ### Conditional classes With the object form, each key is a class name and its value controls whether Unhead includes that class. ```ts import { useHead } from '@unhead/dynamic-import' const colorMode = useColorMode() useHead({ htmlAttrs: { class: { // rendered when colorMode is dark dark: () => colorMode.value === 'dark', // rendered when colorMode is not dark light: () => colorMode.value !== 'dark' } } }) ``` ### Reactive styles Style objects can contain reactive values too: ```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, } } }) ``` ## See Also - [useHead() API](/docs/head/api/composables/use-head): Full API reference - [Build Plugins](/docs/head/guides/build-plugins/overview): Build-time optimizations