Panda CSS Has a Free API — Type-Safe CSS-in-JS With Zero Runtime

Panda CSS is the CSS-in-JS engine with build-time static extraction — you get the DX of styled-components with the performance of Tailwind. And it's completely free. Why Panda CSS? The CSS-in-JS ecosystem has a problem: runtime overhead. styled-components and Emotion inject styles at runtime, which hurts performance. Tailwind solves this but loses type safety and colocation. Panda CSS gives you both : write styles in TypeScript, extract them at build time to atomic CSS. Zero runtime. Quick Start # Install npm install -D @pandacss/dev # Initialize npx panda init --postcss # Generate utilities npx panda codegen // panda.config.ts import { defineConfig } from " @pandacss/dev " ; export default defineConfig ({ preflight : true , include : [ " ./src/**/*.{js,jsx,ts,tsx} " ], theme : { extend : {} }, outdir : " styled-system " , }); Type-Safe Styling (The Killer Feature) import { css } from " ../styled-system/css " ; function Button () { return ( < button className = { css ({ bg : " blue.500