Engine Config

The engine configuration controls every aspect of PikaCSS. Create a pika.config.ts file in your project root:

import { defineEngineConfig } from '@pikacss/core'

export default defineEngineConfig({
  // options here
})

Config

Core

Property	Description
prefix	Class name prefix prepended to every generated atomic class name. Default: 'pk-'.
defaultSelector	CSS selector template for atomic styles. $ is replaced with the generated class ID. Default: '.$'.
plugins	Array of engine plugins to load in resolution order. See Plugin Development.
layers	Map of CSS @layer names to numeric priorities. Lower numbers render earlier. See Layers.
defaultPreflightsLayer	Layer name for preflight styles. Default: 'preflights'.
defaultUtilitiesLayer	Layer name for atomic utility styles. Default: 'utilities'.
preflights	Base styles injected before utilities. See Preflights.
cssImports	Array of CSS @import rules included at the top of generated output.
important	When true, all generated declarations include !important. See Important.

Customizations

Property	Description
autocomplete	IDE autocomplete configuration. See Autocomplete.
selectors	Custom selector mappings for nested selectors. See Selectors.
shortcuts	Reusable style definition aliases. See Shortcuts.
variables	CSS custom properties injected under :root. See Variables.
keyframes	CSS @keyframes animation definitions. See Keyframes.

Plugin Config

TIP

These fields are added by official plugins via type augmentation. Install the corresponding plugin package to use them.

Property	Description
reset	See Reset plugin.
typography	See Typography plugin.
icons	See Icons plugin.
fonts	See Fonts plugin.

See API Reference — Core for full type signatures and defaults.

Examples

import { defineEngineConfig } from '@pikacss/core'

export const selectorsConfig = defineEngineConfig({
	selectors: {
		selectors: [
			['@dark', 'html.dark $'],
			['@light', 'html:not(.dark) $'],
			['@sm', '@media (min-width: 640px)'],
			['@md', '@media (min-width: 768px)'],
			['@lg', '@media (min-width: 1024px)'],
		],
	},
})

Next

• ESLint Config — set up linting for PikaCSS.
• Customizations — explore all customization options.
• Official Plugins — add CSS resets, icons, fonts, and more.