--- 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-31T04:41:22.578Z" --- 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, } } }) ``` ## Merging classes across entries When several entries set classes on the same element, Unhead merges them into a single tag and combines all class names. Conflicting utility classes, such as two Tailwind background colors from `app.vue` and a page, are kept side by side because Unhead does not know they conflict. ```ts // app.vue useHead({ bodyAttrs: { class: 'bg-red-500' } }) // pages/index.vue useHead({ bodyAttrs: { class: 'bg-green-500' } }) // ``` Use the `tags:afterResolve` hook with a class merge tool such as [tailwind-merge](https://github.com/dcastil/tailwind-merge) to resolve conflicts yourself. ```ts import { twMerge } from 'tailwind-merge' import { injectHead } from 'unhead/vue' const head = injectHead() head.hooks.hook('tags:afterResolve', ({ tags }) => { for (const tag of tags) { if (tag.tag !== 'bodyAttrs' || !tag.props.class) continue // resolved classes are an iterable of class names const merged = twMerge([...tag.props.class].join(' ')).trim() tag.props.class = merged ? merged.split(/\s+/) : [] } }) // ``` ## See Also - [useHead() API](/docs/head/api/composables/use-head): Full API reference - [Build Plugins](/docs/head/guides/build-plugins/overview): Build-time optimizations