Panda CSS Conditions

Conditions in Panda allow you to change styles depending on specific states or situations.

For example, if I want to style an SVG element specifically, I can create a condition in the Panda config file.

import { defineConfig } from '@pandacss/dev'

export default defineConfig({
  conditions: {
    extend: {
      icon: "& > svg"
    },
  },
});

To use this condition, I prefix it with an underscore.

function App() {
  return (
    <div
      className={css({
        _icon: {
          color: '#CDCDCD',
        },
      })}
    >
      Conditions in Panda
    </div>
  );
}

This tells Panda only to apply that style when that specific condition is true.

Learn more about Panda CSS with my crash course ⬇️

.