# Why Panda

What Panda is, and what you get from writing styles this way.

## What is Panda

Panda is a styling engine. You write styles in TypeScript, and Panda generates plain atomic CSS at build time.

It reads your source rather than running in the browser: static analysis picks up JSX style props and function calls,
and only the styles you actually used end up in the stylesheet. You get the authoring experience of CSS-in-JS without
shipping a style engine to your users.

There is more than one way to write it. Every tab below produces the same atomic CSS.

<Tabs items={['css function', 'Style props', 'Patterns', 'Recipes']}>
  <Tab>
    ```jsx
    import { css } from '../styled-system/css'

    export function Card() {
      return (
        <div className={css({ display: 'flex', gap: '4', p: '4', rounded: 'md', bg: 'white' })}>
          <img className={css({ w: '12', h: '12', rounded: 'full' })} src="/avatar.png" alt="" />
          <span className={css({ fontWeight: 'semibold' })}>John Doe</span>
        </div>
      )
    }
    ```

  </Tab>
  <Tab>
    ```jsx
    import { styled } from '../styled-system/jsx'

    export function Card() {
      return (
        <styled.div display="flex" gap="4" p="4" rounded="md" bg="white">
          <styled.img w="12" h="12" rounded="full" src="/avatar.png" alt="" />
          <styled.span fontWeight="semibold">John Doe</styled.span>
        </styled.div>
      )
    }
    ```

  </Tab>
  <Tab>
    ```jsx
    import { hstack, circle } from '../styled-system/patterns'

    export function Card() {
      return (
        <div className={hstack({ gap: '4', p: '4', rounded: 'md', bg: 'white' })}>
          <img className={circle({ size: '12' })} src="/avatar.png" alt="" />
          <span>John Doe</span>
        </div>
      )
    }
    ```

  </Tab>
  <Tab>
    ```jsx
    import { cva } from '../styled-system/css'

    const card = cva({
      base: { display: 'flex', gap: '4', rounded: 'md', bg: 'white' },
      variants: {
        size: { sm: { p: '2' }, md: { p: '4' } }
      },
      defaultVariants: { size: 'md' }
    })

    export function Card({ size }) {
      return <div className={card({ size })}>John Doe</div>
    }
    ```

  </Tab>
</Tabs>

## How it works

Panda runs two passes at build time, so the browser never computes styles:

1. **Codegen** reads your config and writes the `styled-system` package you import from.
2. **Extract** scans your source for those calls and emits only the CSS you used.

```
  panda.config.ts                 css({ color: 'blue.500' })
         │                                    │
         ▼                                    ▼
      codegen                              extract
         │                                    │
         ▼                                    ▼
  styled-system/                         styles.css
  (css, cva, …)                     .color_blue\.500 { … }
         │                                    │
         └────────────────┬───────────────────┘
                          ▼
                       browser
              class name string + static CSS
```

Values have to be visible in source. If a style only exists at runtime, see
[Dynamic Styles](/docs/styling/dynamic-styling). Folder details: [Styled System](/docs/reference/styled-system).

## The compiled output

Here is the whole trip for one component, with [source transforms](/docs/styling/source-transforms) on
(`transform: true` on the bundler plugin). The second and third tabs are the compiler's actual output for the first.

<Tabs items={['You write', 'Panda emits', 'Your bundle ships']}>
  <Tab>
    ```tsx filename="Card.tsx"
    import { css } from '../styled-system/css'

    export function Card() {
      return (
        <div
          className={css({
            display: 'flex',
            gap: '4',
            p: '4',
            rounded: 'md',
            bg: 'white',
            _hover: { bg: 'gray.50' }
          })}
        >
          <span className={css({ fontWeight: 'semibold', color: 'gray.900' })}>John Doe</span>
        </div>
      )
    }
    ```

  </Tab>
  <Tab>
    ```css filename="styles.css"
    @layer utilities {
      .bg_white {
        background: var(--colors-white);
      }
      .p_4 {
        padding: var(--spacing-4);
      }
      .bdr_md {
        border-radius: var(--radii-md);
      }
      .gap_4 {
        gap: var(--spacing-4);
      }
      .c_gray\.900 {
        color: var(--colors-gray-900);
      }
      .d_flex {
        display: flex;
      }
      .fw_semibold {
        font-weight: var(--font-weights-semibold);
      }
      .hover\:bg_gray\.50:is(:hover, [data-hover]) {
        background: var(--colors-gray-50);
      }
    }
    ```

  </Tab>
  <Tab>
    ```tsx filename="Card.js"
    // vite: pandacss({ transform: true })
    export function Card() {
      return (
        <div
          className={"bg_white bdr_md d_flex gap_4 p_4 hover:bg_gray.50"}
        >
          <span className={"c_gray.900 fw_semibold"}>John Doe</span>
        </div>
      )
    }
    ```

  </Tab>
</Tabs>

The stylesheet is a static file and the component is a string. The `css` import is gone because there was nothing
left for it to do, so no styling code reaches the browser.

Transforms are opt-in. Without them the CSS is the same, but the `css` call stays in the client bundle and a small
runtime joins the class names. Server components get the same result with no transform, since `css()` runs on the
server.

## What you get

- **Static analysis:** Panda parses your styles at build time and generates plain CSS files that work in any JavaScript
  framework.
- **Type safety:** Panda combines `csstype` with auto-generated typings, so CSS properties and design tokens are
  type-checked as you write them.
- **Performance:** styles compile down to atomic CSS ahead of time, so there's no runtime style engine shipped to the
  browser.
- **Developer experience:** recipes, patterns, design tokens, and JSX style props give you a consistent way to author
  styles without hand-rolling your own system.
- **Modern CSS:** generated styles use cascade layers, CSS variables, and modern selectors like `:where` and `:is`.

## Where to go next

Panda installs as a CLI tool, a PostCSS plugin, through a framework-specific guide, or inside Storybook.

<Cards>
  <Card
    arrow
    title="Installation"
    description="Pick the setup that matches your project, then write your first style"
    href="/docs/get-started/cli"
  />
  <Card
    arrow
    title="Tokens"
    description="Learn how setup and customize design tokens to customize your colors, typography, and more"
    href="/docs/theming/tokens"
  />
  <Card
    arrow
    title="Recipes"
    description="Create composable style variants that are typed and generates the atomic or layer recipe"
    href="/docs/recipes/overview"
  />
  <Card
    arrow
    title="Patterns"
    description="Use the built-in layout patterns like stack, flex, grid to speed up your development"
    href="/docs/styling/patterns"
  />
  <Card
    arrow
    title="Utilities"
    description="Learn how to create your own custom css properties and speed up your development"
    href="/docs/theming/utilities"
  />
</Cards>

## Playground

You can use the [online playground](https://play.panda-css.com) to get a taste of what Panda can do.

- See the live results of your JSX code
- Inspect what panda can extract using static analysis from your code
- Preview the statically generated `.css` files

## Acknowledgement

The development of Panda was only possible due to the inspiration and ideas from these amazing projects.

- [Chakra UI](https://chakra-ui.com/) - where it all started
- [Vanilla Extract](https://vanilla-extract.style/) - for inspiring the utilities API
- [Stitches](https://stitches.dev/) - for inspiring the recipes and variants API
- [Tailwind CSS](https://tailwindcss.com/) - for inspiring the JIT compiler and strategy
- [Class Variance Authority](https://cva.style/) - for inspiring the `cva` name
- [Styled System](https://styled-system.com/) - for the initial idea of Styled Props
- [Linaria](https://linaria.dev/) - for inspiring the initial atomic css strategy
- [Uno CSS](https://unocss.dev) - for inspiring the studio and astro integration

---

_This content is automatically generated from the official Panda CSS documentation._