框架

PikaCSS 與框架無關：pika() 會回傳一個 class 名稱字串，所以唯一和框架相關的部分，就是由哪個屬性來接收它。下面的程式碼片段對應 Playground 範本，它們是各個框架都能實際運作的專案。

以下兩條規則適用於所有情況：

• pika 是由建置外掛提供的全域變數，不要匯入它。
• 在你的進入點檔案裡匯入產生出來的樣式表一次：import 'pika.css'。

提示

這些範本會把 tsCodegen 與 cssCodegen 指向 src/，這樣一來，一份帶有 "include": ["src"]、未經修改的 tsconfig 就會自動抓到產生出來的 pika.gen.ts 宣告。

Vue

請在 Vue 外掛之前註冊 PikaCSS 外掛（這個外掛同時宣告了 enforce: 'pre'，所以無論如何 PikaCSS 的轉換都會在 Vue 編譯器之前執行）：

// vite.config.ts
import pikacss from '@pikacss/unplugin-pikacss/vite'
import vue from '@vitejs/plugin-vue'
import { defineConfig } from 'vite'

export default defineConfig({
	plugins: [
		pikacss({
			tsCodegen: './src/pika.gen.ts',
			cssCodegen: './src/pika.gen.css',
		}),
		vue(),
	],
})

把結果綁定到 :class。在 <template> 裡可以直接呼叫；當安裝了 Vue 時，產生出來的 pika.gen.ts 也會擴增 Vue 的 ComponentCustomProperties，所以 pika 在樣板裡同樣具備型別：

<!-- App.vue -->
<script setup lang="ts">
import { ref } from 'vue'

const count = ref(0)
</script>

<template>
	<button
		type="button"
		:class="pika({
			'padding': '0.625rem 1.25rem',
			'borderRadius': '0.75rem',
			'cursor': 'pointer',
			'$:hover': { filter: 'brightness(1.1)' },
		})"
		@click="count++"
	>
		count is {{ count }}
	</button>
</template>

進入點檔案：

// main.ts
import { createApp } from 'vue'
import 'pika.css'
import App from './App.vue'

createApp(App).mount('#app')

React

// vite.config.ts
import pikacss from '@pikacss/unplugin-pikacss/vite'
import react from '@vitejs/plugin-react'
import { defineConfig } from 'vite'

export default defineConfig({
	plugins: [
		pikacss({
			tsCodegen: './src/pika.gen.ts',
			cssCodegen: './src/pika.gen.css',
		}),
		react(),
	],
})

React 使用 className：

// App.tsx
function App() {
	return (
		<button
			type="button"
			className={pika({
				'padding': '0.625rem 1.25rem',
				'borderRadius': '0.75rem',
				'cursor': 'pointer',
				'$:hover': { filter: 'brightness(1.1)' },
			})}
		>
			Click me
		</button>
	)
}

export default App

進入點檔案：

// main.tsx
import { createRoot } from 'react-dom/client'
import 'pika.css'
import App from './App.tsx'

createRoot(document.getElementById('root')!).render(<App />)

Solid

// vite.config.ts
import pikacss from '@pikacss/unplugin-pikacss/vite'
import { defineConfig } from 'vite'
import solid from 'vite-plugin-solid'

export default defineConfig({
	plugins: [
		pikacss({
			tsCodegen: './src/pika.gen.ts',
			cssCodegen: './src/pika.gen.css',
		}),
		solid(),
	],
})

Solid 使用 class。shortcut 參考可以在同一次呼叫中與行內定義組合：

// App.tsx
function App() {
	return (
		<section class={pika('card', { maxWidth: '28rem', textAlign: 'center' })}>
			<button type="button" class={pika('btn')}>
				Click me
			</button>
		</section>
	)
}

export default App

進入點檔案：

// index.tsx
import { render } from 'solid-js/web'
import 'pika.css'
import App from './App.tsx'

render(() => <App />, document.getElementById('root')!)

Nuxt

請使用專用的模組，而不要自己接上 Vite 外掛：它會註冊外掛並自動匯入 pika.css。詳情請見 Nuxt。

支援的檔案類型

這個轉換支援 JavaScript 家族的原始碼（.js、.mjs、.cjs、.jsx、.ts、.mts、.cts、.tsx）以及 Vue 單一檔案元件（.vue）。其他標記格式（Svelte、Astro、純 HTML）則不在處理範圍內。掃描選項請見 Unplugin。

下一步

• 安裝與設定：安裝流程與產生的檔案導覽。
• SSR 與正式環境：伺服器渲染與建置行為。
• Unplugin：所有外掛選項與其他建置工具。