PikaCSSAtomic CSS-in-JS 引擎

用 JS 物件撰寫樣式，產生零執行階段成本的 atomic CSS。

⚡

零執行階段成本

所有 CSS 都在建置時期產生，正式環境沒有任何執行階段負擔。

✍️

用熟悉的 CSS 屬性名稱撰寫樣式，不必背誦 utility class 名稱。

🧬

每一條 CSS 宣告都會變成一個原子 class，讓重複使用最大化、bundle 體積最小化。

🔧

選擇器、shortcut、變數、關鍵影格，以及強大的外掛系統。

🌐

支援 Vite、Webpack、Rspack、esbuild、Rollup、Rolldown 與 Nuxt。

🤖

為每個 CSS 屬性與自訂設定提供完整的自動完成與型別檢查。

用單純的 CSS 屬性名稱撰寫樣式，在建置時期得到 atomic CSS：

輸入輸出

const className = pika({
	color: 'red',
	fontSize: '16px',
})

css

@layer utilities {
  .pk-a {
    color: red;
  }
  .pk-b {
    font-size: 16px;
  }
}

想試試看嗎？開始使用，或打開 playground，不需要安裝任何東西。

從其他工具轉過來嗎？看看 PikaCSS 與其他工具的比較，包含 UnoCSS、Tailwind CSS、Panda CSS 與 vanilla-extract。