Engine Config

The engine configuration controls every aspect of PikaCSS. Create a pika.config.ts (or .js) in your project root — the plugin does not create one for you unless you opt in with autoCreateConfig: true (see Setup). Never keep both a pika.config.ts and pika.config.js: config discovery loads the highest-priority root-level candidate and ignores the rest.

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 atomic class ID, so the template must contain %. 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 set to { default: true }, all generated declarations include !important. See Important.

Two placeholders

% is the atomic class ID slot used inside defaultSelector (e.g. '.%' becomes .pk-a), while $ is the nested-selector slot used inside style definitions and custom selectors — it expands to the whole defaultSelector.

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.
designTokens	See Design Tokens plugin.

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

Examples

import { defineEngineConfig } from '@pikacss/core'

export const selectorsConfig = defineEngineConfig({
	selectors: {
		definitions: [
			['@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.