Panda CSS Has a Free API That Combines the Best of Tailwind and CSS-in-JS

#webdev #css #javascript #react

Panda CSS is a zero-runtime CSS-in-JS engine that generates atomic CSS at build time. Think Tailwind's performance with styled-components' DX.

Style Props: Type-Safe Styling

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

function Card({ title, price }) {
  return (
    <div className={css({
      bg: "white",
      p: "6",
      rounded: "xl",
      shadow: "lg",
      _hover: { shadow: "2xl", transform: "translateY(-2px)" },
      transition: "all 0.2s",
    })}>
      <h2 className={css({ fontSize: "xl", fontWeight: "bold", color: "gray.900" })}>
        {title}
      </h2>
      <span className={css({ fontSize: "2xl", color: "green.600", fontWeight: "semibold" })}>
        ${price}
      </span>
    </div>
  );
}

Recipes: Component Variants

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

const button = cva({
  base: {
    display: "inline-flex",
    alignItems: "center",
    fontWeight: "semibold",
    rounded: "lg",
    cursor: "pointer",
    transition: "all 0.2s",
  },
  variants: {
    visual: {
      solid: { bg: "blue.500", color: "white", _hover: { bg: "blue.600" } },
      outline: { border: "2px solid", borderColor: "blue.500", color: "blue.500" },
      ghost: { color: "blue.500", _hover: { bg: "blue.50" } },
    },
    size: {
      sm: { px: "3", py: "1.5", fontSize: "sm" },
      md: { px: "4", py: "2", fontSize: "md" },
      lg: { px: "6", py: "3", fontSize: "lg" },
    },
  },
  defaultVariants: { visual: "solid", size: "md" },
});

// Usage — fully typed!
<button className={button({ visual: "outline", size: "lg" })}>Click me</button>

Patterns: Layout Primitives

import { stack, hstack, grid, center, flex } from "../styled-system/patterns";

// Vertical stack
<div className={stack({ gap: "4", align: "stretch" })}>
  <Card /><Card /><Card />
</div>

// Horizontal stack
<div className={hstack({ gap: "2", justify: "space-between" })}>
  <Logo /><Nav /><UserButton />
</div>

// Grid
<div className={grid({ columns: { base: 1, md: 2, lg: 3 }, gap: "6" })}>
  {products.map(p => <ProductCard key={p.id} product={p} />)}
</div>

// Center
<div className={center({ h: "screen" })}>
  <Spinner />
</div>

Token System

// panda.config.ts
import { defineConfig } from "@pandacss/dev";

export default defineConfig({
  theme: {
    extend: {
      tokens: {
        colors: {
          brand: {
            50: { value: "#eff6ff" },
            500: { value: "#3b82f6" },
            900: { value: "#1e3a5f" },
          },
        },
      },
      semanticTokens: {
        colors: {
          primary: { value: { base: "{colors.brand.500}", _dark: "{colors.brand.50}" } },
          surface: { value: { base: "white", _dark: "{colors.gray.900}" } },
        },
      },
    },
  },
});

Responsive Design

<div className={css({
  fontSize: { base: "sm", md: "md", lg: "xl" },
  p: { base: "4", md: "6", lg: "8" },
  display: { base: "block", md: "grid" },
  gridTemplateColumns: { md: "repeat(2, 1fr)", lg: "repeat(3, 1fr)" },
})}>