--- title: "Class & Style Attributes · Unhead" canonical_url: "https://unhead.unjs.io/docs/angular/head/guides/core-concepts/class-attr" last_updated: "2026-09-18T22:17:48.243Z" meta: description: "Add classes and styles to html and body tags with htmlAttrs and bodyAttrs. Support for strings, arrays, objects, and reactive values." "og:description": "Add classes and styles to html and body tags with htmlAttrs and bodyAttrs. Support for strings, arrays, objects, and reactive values." "og:title": "Class & Style Attributes · Unhead" --- Home ` Unhead on GitHub Switch to AngularSwitch to TypeScriptSwitch to VueSwitch to ReactSwitch to SvelteSwitch to Solid.jsSwitch to Nuxt **Core Concepts** # **Class & Style Attributes** [Copy for LLMs](https://raw.githubusercontent.com/unjs/unhead/refs/heads/main/docs/head/1.guides/1.core-concepts/3.class-attr.md) 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. ``` import { useHead } from '@unhead/angular' // useHead: /docs/head/api/composables/use-head useHead({ htmlAttrs: { 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: ``` import { useHead } from '@unhead/angular' 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. ``` import { useHead } from '@unhead/angular' 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: ``` import { useHead } from '@unhead/angular' 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. ``` // 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. ``` 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~~**](https://unhead.unjs.io/docs/head/api/composables/use-head): Full API reference - [**~~Build Plugins~~**](https://unhead.unjs.io/docs/head/guides/build-plugins/overview): Build-time optimizations [Edit this page](https://github.com/unjs/unhead/edit/main/docs/head/1.guides/1.core-concepts/3.class-attr.md) [Markdown For LLMs](https://raw.githubusercontent.com/unjs/unhead/refs/heads/main/docs/head/1.guides/1.core-concepts/3.class-attr.md) **Did this page help you? ** [**Tag Sorting & Placement** Control where head tags render with tagPosition (head, bodyOpen, bodyClose) and tagPriority for ordering. Understand the Capo.js weights applied during SSR.](https://unhead.unjs.io/docs/head/guides/core-concepts/positions) [**Inline Style & Scripts** Add inline scripts, styles, JSON data, and noscript content with textContent and innerHTML.](https://unhead.unjs.io/docs/head/guides/core-concepts/inner-content) **On this page ** - [Static classes and styles](#static-classes-and-styles) - [Dynamic classes and styles](#dynamic-classes-and-styles) - [Merging classes across entries](#merging-classes-across-entries) - [See Also](#see-also)