# Reset

Opt into a base reset that normalizes browser defaults below application styles.

## Overview

The reset is disabled by default, and core imports do not install it. Enable it with the `reset` option of the web integration. Babel inserts `import 'zyzz/reset.css'` for web builds, so the consuming bundler must support CSS imports.

```ts
import { defineConfig } from 'vite'
import { zyzz } from 'zyzz/vite'

export default defineConfig({
  plugins: [zyzz({ reset: true })],
})
```

```ts
import { zyzz } from 'zyzz/next'

export default zyzz({}, { reset: true })
```

```ts
import { build } from 'esbuild'
import { zyzz } from 'zyzz/esbuild'

await build({
  bundle: true,
  entryPoints: ['src/main.ts'],
  outdir: 'dist',
  plugins: [zyzz({ reset: true })],
})
```

```ts
import { zyzz } from 'zyzz/rollup'

export default {
  input: 'src/main.ts',
  output: { dir: 'dist', format: 'es' },
  plugins: [zyzz({ reset: true })],
}
```

```ts
import { zyzz } from 'zyzz/webpack'

export default {
  plugins: [zyzz({ reset: true })],
}
```

```js
import { zyzz } from 'zyzz/babel'

export default {
  plugins: [[zyzz, { target: 'web', reset: true }]],
}
```

## Manual Import

When plugin injection is disabled, import the stylesheet once from the application entrypoint.

```ts title="src/main.ts"
import 'zyzz/reset.css'
```

## Reset Layer

The reset's declarations live in the `reset` layer, so normal unlayered declarations take precedence regardless of stylesheet load order. This list restores the markers and indentation that the reset removes:

```tsx title="Steps.tsx"
import { style } from 'zyzz'

export function Steps() {
  return (
    <ol {...styles.list()}>
      <li>Install</li>
      <li>Configure</li>
    </ol>
  )
}

namespace styles {
  export const list = style({
    listStyleType: 'decimal',
    paddingInlineStart: '1.5rem',
  })
}
```

Use configured [layers](/docs/guides/layers) when component styles also need an explicit order.

## Defaults

The reset applies these defaults:

* Applies border-box sizing.
* Removes margins and padding.
* Removes default heading, link, and list styling.
* Makes form controls inherit typography.
* Makes replaced elements block-level.
* Uses system fallbacks in its document and code font stacks.

## More

[Layers](/docs/guides/layers)

Order the reset, document defaults, and component styles.

[Global Styles](/docs/guides/global-styles)

Add document defaults on top of the reset with selector maps.

[Getting Started](/docs/introduction/getting-started)

Connect the web integration that compiles styles and loads the reset.