PikaCSS

English

繁體中文

English

繁體中文

Appearance

Installation ​

Most projects should start with the unplugin package. That path covers Vite, Rollup, Webpack, Rspack, Rolldown, and esbuild through a shared integration model.

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

If you are using Nuxt, go straight to Nuxt.

Start with Vite unless your project already runs on something else. The smallest successful setup has three pieces:

  1. Register the PikaCSS plugin in your bundler config.
  2. Import the virtual module pika.css in your app entry.
  3. Write a literal pika() call in a supported source file.
ts
// vite.config.ts
import PikaCSS from '@pikacss/unplugin-pikacss/vite'
import { defineConfig } from 'vite'

export default defineConfig({
	plugins: [
		PikaCSS(),
	],
})
ts
// Import the virtual CSS module in your app entry file
import 'pika.css'

Supported build tools ​

  • Vite
  • Nuxt
  • Rollup
  • Webpack
  • Rspack
  • Rolldown
  • esbuild

See Integrations Overview for the full matrix.

Read this before writing real styles

pika() arguments must be statically analyzable. Do not assume you can pass runtime values just because the API surface looks like normal JavaScript. Read Static Arguments before you spread usage across a codebase.

Config file discovery ​

PikaCSS automatically discovers config files named pika.config.{js,ts,mjs,mts,cjs,cts}. Zero-config is useful for the first run, but most real projects should add a config file as soon as they need selectors, shortcuts, variables, plugins, or consistent layer control.

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

export default defineEngineConfig({
	// Add plugins, variables, selectors, shortcuts, etc.
})

What gets generated ​

The integration may generate:

  • pika.gen.ts for autocomplete and type augmentation.
  • pika.gen.css as the generated CSS output file on disk.
  • The virtual module pika.css, which resolves to generated CSS at build time.

Read Generated Files before editing anything that looks auto-created.

Next ​