--- title: Class & Style Attributes description: Learn how to dynamically style your HTML and body tags with Unhead's powerful class and style attribute API navigation: title: Class & Style Attributes --- **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 ``{lang="html"} or ``{lang="html"} 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. ::code-group ```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;' } }) ``` :: ::tip If you're server-side rendering static tags, you can make use of [Client-Only Tags](/docs/head/guides/advanced/client-only-tags). :: ### 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 ::tip - 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 - [Bundle Optimizations](/docs/head/guides/advanced/client-only-tags) - Client-only attributes