Reset

The @pikacss/plugin-reset provides a modern CSS reset to ensure a consistent baseline across different browsers.

Installation

pnpm

pnpm add -D @pikacss/plugin-reset

yarn

yarn add -D @pikacss/plugin-reset

npm

npm install -D @pikacss/plugin-reset

Setup

Add the plugin to your pika.config.ts:

Vite Project

// pika.config.ts
import { reset } from '@pikacss/plugin-reset'
import { defineEngineConfig } from '@pikacss/unplugin-pikacss'

export default defineEngineConfig({
	plugins: [
		reset(),
	],
})

Nuxt Project

// pika.config.ts
import { reset } from '@pikacss/plugin-reset'
import { defineEngineConfig } from '@pikacss/nuxt-pikacss'

export default defineEngineConfig({
	plugins: [
		reset(),
	],
})

Configuration

You can specify the reset style in your pika.config.ts:

export default defineEngineConfig({
	plugins: [
		reset(),
	],

	reset: 'modern-normalize', // 'normalize' | 'modern-normalize' | 'the-new-css-reset' | 'eric-meyer' | 'andy-bell'
})

Supported Styles

The following reset styles are available:

• modern-normalize: modern-normalize (Default)
• normalize: Normalize.css
• the-new-css-reset: The New CSS Reset
• eric-meyer: Eric Meyer's Reset CSS
• andy-bell: A Modern CSS Reset by Andy Bell

How It Works

The plugin uses the configureEngine hook to inject the reset styles into the engine's preflights. These styles will be rendered at the beginning of your generated CSS.