PikaCSS

Appearance

Layers ​

PikaCSS uses CSS @layer to establish cascade ordering between preflight styles and utility classes.

CSS layers provide explicit control over the cascade order. PikaCSS generates a @layer declaration at the top of the CSS output. With the default priorities, preflights come before utilities; custom priorities can reorder those defaults or insert additional layers anywhere in the order.

By default, PikaCSS creates two layers: preflights (priority 1) and utilities (priority 10). Lower numbers render earlier in the layer order.

Config ​

Configure layers via layers in the engine config:

ts
import { defineConfig } from '@pikacss/unplugin-pikacss'

export default defineConfig({
  engine: {
    layers: {
      reset: -1, // before preflights
      preflights: 1, // default
      components: 5, // between preflights and utilities
      utilities: 10, // default
    },
  },
})

Use the __layer meta-property in a style definition to assign styles to a specific layer:

ts
pika({
  __layer: 'components',
  display: 'flex',
  padding: '1rem',
})

Related config options:

  • defaultPreflightsLayer — the layer for unlayered preflights (default: 'preflights').
  • defaultUtilitiesLayer — the fallback layer for utility styles (default: 'utilities').

Examples ​

ts
const className = pika({
	__layer: 'components',
	display: 'flex',
	padding: '1rem',
})
css
@layer preflights, components, utilities;

@layer components {
  .pk-a {
    display: flex;
  }
  .pk-b {
    padding: 1rem;
  }
}

Next ​