pandacss-styling

Overview

Panda CSS is a zero-runtime CSS-in-JS framework with a token system, patterns, recipes, and JSX style props. Generates static CSS at build time with full TypeScript support.

Capabilities

• Zero-runtime CSS generation
• Design token system with semantic tokens
• Patterns for common layout primitives
• Recipes for component variants
• Conditions for responsive and state styles
• JSX style props for inline styling
• Works with React, Vue, Solid, Qwik

When to Use

Trigger phrases:

• "pandacss styling"

• "Panda CSS zero-runtime styling — token system, patterns, recipes, conditions, JS"

• Want type-safe styling with design tokens

• Need component variants without runtime cost

• Building design systems with consistent tokens

• Using JSX style props for rapid development

When NOT to Use

• Task is about content strategy, not creation (use strategy skills)
• Task is about content distribution (use distribution skills)
• You need to analyze content performance (use analytics skills)
• Task is about content moderation (use moderation tools)
• You don't have content guidelines
• Task requires domain expertise (consult experts)

Pseudo Code

The pandacss-styling workflow follows a standard pipeline pattern.

Core flow:

# pandacss-styling primary flow
input = prepare(raw_data)
result = process(input, config={conditions, panda, pandacss, patterns, recipes})
validate(result)
deliver(result)

Error handling:

on error:
  log(error_details)
  retry_with_backoff(max=3)
  if still_failing: alert_and_escalate()

Core Workflow

# pandacss-styling primary flow
input = prepare(raw_data)
result = process(input, config={conditions, panda, pandacss, patterns, recipes})
validate(result)
deliver(result)

Error Handling

on error:
  log(error_details)
  retry_with_backoff(max=3)
  if still_failing: alert_and_escalate()

Configuration

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

export default defineConfig({
  preflight: true,
  include: ["./src/**/*.{ts,tsx}"],
  exclude: [],
  theme: {
    extend: {
      tokens: {
        colors: {
          primary: { value: "#3b82f6" },
          secondary: { value: "#8b5cf6" },
        },
      },
    },
  },
  outdir: "styled-system",
})