Panda CSS Has a Free Zero-Runtime CSS Engine — Here's How to Use It

#css #typescript #design #webdev

Tailwind is utility-first but string-based. Styled-components is type-safe but ships runtime JS. Panda CSS gives you type-safe, zero-runtime styling with design tokens built in.

What Is Panda CSS?

Panda CSS is a CSS-in-JS engine that generates atomic CSS at build time. You write styles in TypeScript — it outputs optimized CSS. Zero runtime overhead.

Quick Start

npm install -D @pandacss/dev
npx panda init

import { css } from '../styled-system/css';

function Button({ children }) {
  return (
    <button className={css({
      bg: 'blue.500',
      color: 'white',
      px: '4',
      py: '2',
      borderRadius: 'md',
      fontSize: 'sm',
      fontWeight: 'semibold',
      _hover: { bg: 'blue.600' },
      _active: { bg: 'blue.700' },
    })}>
      {children}
    </button>
  );
}

Why Panda CSS

Feature	Panda CSS	Tailwind	styled-components
Type safety	Full	String-based	Partial
Runtime JS	0KB	0KB	~12KB
Design tokens	Built-in	Config	Manual
Conditions	Type-safe	String-based	Props
Responsive	Type-safe	String-based	Manual
Recipes	Built-in	@apply	Variants

Design Tokens

// panda.config.ts
export default defineConfig({
  theme: {
    extend: {
      tokens: {
        colors: {
          brand: {
            50: { value: '#eff6ff' },
            500: { value: '#3b82f6' },
            900: { value: '#1e3a5f' },
          }
        },
        fonts: {
          heading: { value: 'Inter, sans-serif' },
          body: { value: 'system-ui, sans-serif' },
        }
      }
    }
  }
});

Recipes (Component Variants)

import { cva } from '../styled-system/css';

const button = cva({
  base: {
    borderRadius: 'md',
    fontWeight: 'semibold',
    cursor: 'pointer',
  },
  variants: {
    size: {
      sm: { px: '3', py: '1', fontSize: 'sm' },
      md: { px: '4', py: '2', fontSize: 'md' },
      lg: { px: '6', py: '3', fontSize: 'lg' },
    },
    variant: {
      primary: { bg: 'blue.500', color: 'white' },
      outline: { border: '1px solid', borderColor: 'blue.500', color: 'blue.500' },
      ghost: { color: 'blue.500', _hover: { bg: 'blue.50' } },
    },
  },
  defaultVariants: {
    size: 'md',
    variant: 'primary',
  },
});

// Usage — fully typed, autocomplete works
<button className={button({ size: 'lg', variant: 'outline' })}>
  Click me
</button>

Responsive Design

<div className={css({
  display: 'flex',
  flexDirection: { base: 'column', md: 'row' },
  gap: { base: '2', lg: '4' },
  padding: { base: '4', md: '8' },
})}>

Framework Support

React, Next.js, Remix
Vue, Nuxt
Svelte, SvelteKit
Solid, Qwik
Astro

Key Features

Zero runtime — all CSS generated at build time
Type-safe — autocomplete for every property and token
Atomic CSS — deduplication, minimal output
Recipes — component variants with type checking
Patterns — layout primitives (stack, flex, grid, center)
Conditions — hover, focus, dark mode, responsive

Get Started

Styling a data dashboard? My Apify scrapers feed fresh data to your UI. Custom solutions: spinov001@gmail.com

DEV Community