來認識 Panda CSS：一隻不佔你 runtime 的 CSS 熊貓 🐼
寫 React 或 Vue 的時候，你是不是也糾結過：想要 CSS-in-JS 的爽感（寫在 JS 裡、變數好傳、type-safe），又怕 runtime 把 bundle 搞爆、hydration 慢到哭？結果在「Styled Components 好香」和「Tailwind 真快」之間反覆橫跳。今天要聊的 Panda CSS，就是一隻想幫你「兩邊都要」的熊貓——用 build time 生 CSS，zero runtime，還能 type-safe、RSC 友善，聽起來是不是很像在騙人？我們來看看它到底在搞什麼。
Panda CSS 是誰？一句話版
Panda CSS 的官方 slogan 很直白：「Build modern websites using build time and type-safe CSS-in-JS」。也就是說：你還是用「寫在 JS/TS 裡」的方式寫樣式，但這些樣式會在建置階段被掃描、生成靜態的 atomic CSS，最後送到瀏覽器的是普通 CSS 檔案，不是一坨 runtime 的 style 注入。所以你有 CSS-in-JS 的開發體驗，卻沒有 runtime 的成本——熊貓在 build 時就幫你煮好菜了，上桌時不用再開火。
為什麼會「像」CSS-in-JS？因為你真的是用 JS 寫
用法長這樣：從 styled-system import css、stack、circle 這類 pattern，在 component 裡用 className={css({ mt: "4", fontSize: "xl" })} 或 className={stack({ direction: "row", p: "4" })}。寫起來就跟你在用某個 CSS-in-JS 庫一樣，差別是：這些呼叫在 build 時會被靜態分析，Panda 會把用到的屬性生成成 class（例如 .mt_2、.fs_xl），放進 cascade layers、用 CSS 變數掛好 design tokens，最後產出一個靜態 CSS 檔。所以開發時你很開心，上線時沒有多餘的 JS 在算樣式。
零 runtime、type-safe、還支援 RSC
三大賣點直接講：
- Zero runtime — 樣式全是 build time 產好的，用到的都是現代 CSS 招數（cascade layers、
:where、CSS variables），沒有在瀏覽器裡動態插 style。 - Type-safe — TypeScript 從頭支援，design tokens、屬性名、variant 都會被檢查，打錯字或傳錯型別會直接報錯，不用等到 runtime 才發現按鈕長歪。
- RSC 友善、多框架 — React Server Components 可以用，Next.js（含 app dir）、Vite、Remix、Astro、Vue、Svelte 等都有支援，裝好 PostCSS 或 CLI 就能開工。
Design tokens、recipes、patterns 一次滿足
Panda 吃 W3C 那套 design token 的思維，你可以定義 core tokens（顏色、字體、間距）和 semantic tokens（例如 danger、success 在 light/dark 下對應不同色）。再來是 recipes：用類似 CVA（Class Variance Authority）的方式寫「一個元件多種 variant」，例如按鈕的 default / success / warning，一次定義、到處複用。還有內建的 patterns：stack、hstack、vstack、circle、container 等，layout 常用的小積木都幫你準備好，不用每次都從 flex 從頭寫。
三分鐘開工
安裝：npm i -D @pandacss/dev，接著 npx panda init --postcss，然後 npm run dev 就可以在專案裡開始用 css()、stack() 寫樣式。官方文件與 Playground 都很齊，有興趣可以直接到 panda-css.com 摸一輪。
小結：想要 DX 又想要效能，可以看看這隻熊貓
如果你喜歡「在 JS 裡寫樣式、type-safe、variant 好管理」，又不想付 runtime 的學費，Panda CSS 就是一個很認真的選項。它不跟你談心靈雞湯，直接在建置階段把事做完，把快樂留給開發、把效能留給使用者。下次在選型「到底要用哪種 CSS 方案」時，記得把這隻熊貓也放進候選名單——說不定它就是你缺的那一塊。
