PikaCSS

Appearance

Setup ​

Install PikaCSS and add the build plugin to start generating atomic CSS from your style definitions.

Install ​

sh
pnpm add -D @pikacss/core @pikacss/unplugin-pikacss
sh
npm install -D @pikacss/core @pikacss/unplugin-pikacss
sh
yarn add -D @pikacss/core @pikacss/unplugin-pikacss

Apply Vite Plugin ​

Add the PikaCSS Vite plugin to your vite.config.ts:

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

export default defineConfig({
	plugins: [PikaCSS()],
})

For other build tools, see Integrations.

Import pika.css ​

Import the generated CSS file in your application entry point:

ts
import 'pika.css'

This import resolves to the generated CSS output that contains all your atomic styles. By default that file is pika.gen.css, but cssCodegen can point it to a different output path.

Generated Files ​

By default, the build plugin writes pika.gen.ts and pika.gen.css. Setting tsCodegen or cssCodegen to a string writes the same outputs to custom paths. Setting tsCodegen to false disables TypeScript declaration codegen entirely.

pika.gen.ts ​

When tsCodegen is enabled, the build plugin generates a TypeScript declaration file. By default this file is named pika.gen.ts, but a string value can write it to a custom path. It provides type definitions and autocomplete support for the pika() function, including all custom selectors, shortcuts, variables, and plugin-contributed properties.

You do not usually import this file directly. The integration generates it for you, but TypeScript only sees its declarations when the generated path is part of your project through your tsconfig/include. In scaffolded configs, PikaCSS may also add a triple-slash reference to the generated declaration file, but that is a convenience of the scaffolded file rather than the guarantee.

pika.gen.css ​

The generated CSS file containing:

  • Layer order declarations
  • Preflight styles (resets, variables, keyframes)
  • Atomic utility classes

By default this file is named pika.gen.css. It is imported via import 'pika.css' and is updated automatically when your source code or configuration changes, even if you customize cssCodegen to write a different filename.

Next ​

  • Usage — learn how to write styles with pika().
  • Engine Config — configure layers, preflights, and plugins.
  • ESLint Config — enable static analysis for style definitions.