Unhead
React
You're viewing Unhead v3 beta documentation. Install with unhead@beta
Core Concepts

Class & Style Attributes

Copy for LLMs
On this page

Quick Answer: Use htmlAttrs and bodyAttrs to set attributes on <html> and <body>. 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 <html> or <body> 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.

import { useHead } from '@unhead/react'

// useHead: /docs/head/api/composables/use-head
useHead({
  htmlAttrs: {
    class: 'my-class my-other-class',
    style: 'background-color: red; color: white;'
  }
})
If you're server-side rendering static tags, you can make use of 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.

import { useHead } from '@unhead/react'

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.

import { useHead } from '@unhead/react'

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:

import { useHead } from '@unhead/react'

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 <html> and <body>
  • 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

Edit this page
Markdown For LLMs
Did this page help you?