Class & Style Attributes · Unhead

[Unhead Home](https://unhead.unjs.io/ "Home")

- [Docs](https://unhead.unjs.io/docs/nuxt/head/guides/get-started/overview)
- [Tools](https://unhead.unjs.io/tools)
- [Learn](https://unhead.unjs.io/learn/guides/what-is-capo)

[Releases](https://unhead.unjs.io/releases)

Search…```k`` /`

[Unhead on GitHub](https://github.com/unjs/unhead)

[User Guides](https://unhead.unjs.io/docs/nuxt/head/guides/get-started/overview)

[API](https://unhead.unjs.io/docs/nuxt/head/api/get-started/overview)

[Releases](https://unhead.unjs.io/docs/nuxt/releases/v3)

Nuxt

- [Switch to Nuxt](https://unhead.unjs.io/docs/nuxt/head/guides/core-concepts/class-attr)
- [Switch to TypeScript](https://unhead.unjs.io/docs/typescript/head/guides/core-concepts/class-attr)
- [Switch to Vue](https://unhead.unjs.io/docs/vue/head/guides/core-concepts/class-attr)
- [Switch to React](https://unhead.unjs.io/docs/react/head/guides/core-concepts/class-attr)
- [Switch to Svelte](https://unhead.unjs.io/docs/svelte/head/guides/core-concepts/class-attr)
- [Switch to Solid.js](https://unhead.unjs.io/docs/solid-js/head/guides/core-concepts/class-attr)
- [Switch to Angular](https://unhead.unjs.io/docs/angular/head/guides/core-concepts/class-attr)

v3 (stable)

Head

- [Discord Support](https://discord.com/invite/275MBUBvgP)

- Get Started
  - [Overview](https://unhead.unjs.io/docs/nuxt/head/guides/get-started/overview)
  - [Introduction to Unhead](https://unhead.unjs.io/docs/nuxt/head/guides/get-started/intro-to-unhead)
  - [Starter Recipes](https://unhead.unjs.io/docs/nuxt/head/guides/get-started/starter-recipes)
  - [Installation](https://unhead.unjs.io/docs/nuxt/head/guides/get-started/installation)
  - [Upgrade Guide](https://unhead.unjs.io/docs/nuxt/head/guides/get-started/migration)
- Core Concepts
  - [Titles & Title Templates](https://unhead.unjs.io/docs/nuxt/head/guides/core-concepts/titles)
  - [Tag Sorting & Placement](https://unhead.unjs.io/docs/nuxt/head/guides/core-concepts/positions)
  - [Class & Style Attributes](https://unhead.unjs.io/docs/nuxt/head/guides/core-concepts/class-attr)
  - [Inline Style & Scripts](https://unhead.unjs.io/docs/nuxt/head/guides/core-concepts/inner-content)
  - [Tag Deduplication](https://unhead.unjs.io/docs/nuxt/head/guides/core-concepts/handling-duplicates)
  - [DOM Event Handling](https://unhead.unjs.io/docs/nuxt/head/guides/core-concepts/dom-event-handling)
  - [Script Loading](https://unhead.unjs.io/docs/nuxt/head/guides/core-concepts/loading-scripts)
  - [Context & Reactivity](https://unhead.unjs.io/docs/nuxt/head/guides/core-concepts/reactivity)
  - [Components](https://unhead.unjs.io/docs/nuxt/head/guides/core-concepts/components)
- Build Plugins
  - [Overview](https://unhead.unjs.io/docs/nuxt/head/guides/build-plugins/overview)
  - [Tree-Shaking](https://unhead.unjs.io/docs/nuxt/head/guides/build-plugins/tree-shaking)
  - [useSeoMeta Transform](https://unhead.unjs.io/docs/nuxt/head/guides/build-plugins/seo-meta-transform)
  - [Minify Transform](https://unhead.unjs.io/docs/nuxt/head/guides/build-plugins/minify-transform)
  - [Devtools](https://unhead.unjs.io/docs/nuxt/head/guides/build-plugins/devtools)
- Plugins
  - [Template Params](https://unhead.unjs.io/docs/nuxt/head/guides/plugins/template-params)
  - [Alias Sorting](https://unhead.unjs.io/docs/nuxt/head/guides/plugins/alias-sorting)
  - [Canonical Plugin](https://unhead.unjs.io/docs/nuxt/head/guides/plugins/canonical)
  - [Infer SEO Meta](https://unhead.unjs.io/docs/nuxt/head/guides/plugins/infer-seo-meta-tags)
  - [Minify](https://unhead.unjs.io/docs/nuxt/head/guides/plugins/minify)
  - [Validate](https://unhead.unjs.io/docs/nuxt/head/guides/plugins/validate)

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)

Last updated Apr 9, 2026 by [Harlan Wilton](https://github.com/harlan-zw) in [refactor(bundler)!: named Unhead export, ctx-based transforms, dev-mode validate (#733)](https://github.com/unjs/unhead/pull/733).

On this page

- [How Do I Add Static Classes and Styles?](#how-do-i-add-static-classes-and-styles)
- [How Do I Add Dynamic Classes and Styles?](#how-do-i-add-dynamic-classes-and-styles)
- [Key Takeaways](#key-takeaways)
- [See Also](#see-also)

**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?](#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.

HTML Attrs

Body Attrs

```
import { useHead } from '#imports'

// useHead: /docs/head/api/composables/use-head
useHead({
  htmlAttrs: {
    class: 'my-class my-other-class',
    style: 'background-color: red; color: white;'
  }
})
```

```
import { useHead } from '#imports'

useHead({
  bodyAttrs: {
    class: 'my-class my-other-class',
    style: 'background-color: red; color: white;'
  }
})
```

If you're server-side rendering static tags, you can use `import.meta.server` to conditionally add them only during SSR.

### [Can I Use Arrays for Classes and Styles?](#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 '#imports'

useHead({
  htmlAttrs: {
    class: [
      'my-class',
      'my-other-class'
    ],
    style: [
      'background-color: red',
      'color: white'
    ],
  }
})
```

## [How Do I Add Dynamic Classes and Styles?](#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?](#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 '#imports'

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?](#how-do-i-apply-reactive-styles)

Similarly, styles can be defined reactively using an object:

```
import { useHead } from '#imports'

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](#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](#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. Optimize performance with Capo.js weights.](https://unhead.unjs.io/docs/head/guides/core-concepts/positions) [Inline Style & Scripts Add inline scripts and styles with textContent and innerHTML. Security best practices for XSS prevention and performance optimization.](https://unhead.unjs.io/docs/head/guides/core-concepts/inner-content)

On this page

- [How Do I Add Static Classes and Styles?](#how-do-i-add-static-classes-and-styles)
- [How Do I Add Dynamic Classes and Styles?](#how-do-i-add-dynamic-classes-and-styles)
- [Key Takeaways](#key-takeaways)
- [See Also](#see-also)

[GitHub](https://github.com/unjs/unhead) [ Discord](https://discord.com/invite/275MBUBvgP)

[ /llms.txt](https://unhead.unjs.io/llms.txt)

[Part of the UnJS ecosystem](https://unjs.io/)

### Head Management

- [Getting Started](https://unhead.unjs.io/docs/nuxt/head/guides/get-started/overview)
- [useHead](https://unhead.unjs.io/docs/nuxt/head/api/composables/use-head)
- [useSeoMeta](https://unhead.unjs.io/docs/nuxt/head/api/composables/use-seo-meta)
- [useHeadSafe](https://unhead.unjs.io/docs/nuxt/head/api/composables/use-head-safe)
- [useScript](https://unhead.unjs.io/docs/nuxt/head/api/composables/use-script)

### Schema.org

- [Getting Started](https://unhead.unjs.io/docs/nuxt/schema-org/guides/get-started/overview)
- [useSchemaOrg](https://unhead.unjs.io/docs/nuxt/schema-org/api/composables/use-schema-org)
- [Nodes](https://unhead.unjs.io/docs/nuxt/schema-org/guides/core-concepts/nodes)
- [Recipes](https://unhead.unjs.io/docs/nuxt/schema-org/guides/recipes/identity)

### Guides

- [Titles](https://unhead.unjs.io/docs/nuxt/head/guides/core-concepts/titles)
- [Streaming SSR](https://unhead.unjs.io/docs/nuxt/head/guides/core-concepts/streaming)
- [DOM Events](https://unhead.unjs.io/docs/nuxt/head/guides/core-concepts/dom-event-handling)
- [Plugins](https://unhead.unjs.io/docs/nuxt/head/guides/plugins/template-params)

### Tools

- [Meta Tag Generator](https://unhead.unjs.io/tools/meta-tag-generator)
- [OG Image Generator](https://unhead.unjs.io/tools/og-image-generator)
- [Schema.org Generator](https://unhead.unjs.io/tools/schema-generator)
- [Capo.js Analyzer](https://unhead.unjs.io/tools/capo-analyzer)

### Articles

- [What is Capo.js?](https://unhead.unjs.io/learn/guides/what-is-capo)

### Research

- [State of <head> in 2026](https://unhead.unjs.io/learn/research/state-of-head-2026)
- [Streaming Head Performance](https://unhead.unjs.io/learn/research/streaming-head-performance)
- [Capo.js Performance Research](https://unhead.unjs.io/learn/research/capo-performance-research)

Copyright © 2025-2026 Harlan Wilton - [MIT License](https://github.com/unjs/unhead/blob/main/license)