Customization

Customizing Conditions

Conditions allow you to apply different styles and behaviors based on specific conditions or states. They provide a way to target specific elements or apply styles in response to certain events or conditions.

Creating a condition

To create a condition, you can use the conditions property in the config. Let's say we want to create a groupHover pseudo condition that applies styles to an element when a parent container with the group role is hovered.

panda.config.ts

import { defineConfig } from '@pandacss/dev'
 
export default defineConfig({
  conditions: {
    extend: {
      groupHover: "[role=group]:where(:hover, [data-hover]) &",
    },
  },
});

💡

⚠️ The & character is mandatory, it is a placeholder for the current selector. It will be replaced with the actual selector when the condition is used. It has to be used either at the beginning or at the end of the condition.

Then you can run the following command to generate the conditions JS code:

pnpm panda codegen

npm panda codegen

yarn panda codegen

bun panda codegen

Now, we can use the groupHover condition in our components.

import { css } from '../styled-system/css'
 
function App() {
  return (
    <div role="group">
      <span
        className={css({
          color: { base: "blue.400", _groupHover: "blue.600" },
        })}
      />
    </div>
  );
}

Customizing Built-in Conditions

You can extend the default conditions by using the conditions.extend property in the config.

panda.config.ts

import { defineConfig } from '@pandacss/dev'
 
export default defineConfig({
  conditions: {
    extend: {
      // Extend the default `dark` condition
      dark: '.dark &, [data-theme="dark"] &',
    },
  },
});

Then you can run the following command to update the conditions JS code:

pnpm panda codegen

npm panda codegen

yarn panda codegen

bun panda codegen

Using tokens

You can also use tokens in your conditions, and they will be resolved to their actual values:

import { defineConfig } from '@pandacss/dev'
 
export default defineConfig({
  conditions: {
    extend: {
      mq: '@media (min-width: token(sizes.4xl))',
      size2: '&[data-size=token(spacing.2)]'
    }
  }
})

Mixed conditions

You can also use mixed conditions (nested at-rules/selectors) under a single condition name:

import { defineConfig } from '@pandacss/dev'
 
export default defineConfig({
  conditions: {
    extend: {
      supportHover: ['@media (hover: hover) and (pointer: fine)', '&:hover']
    }
  }
})

import { css } from '../styled-system/css'
 
css({
  _supportHover: {
    color: 'red'
  }
})

will generate the following CSS:

@media (hover: hover) and (pointer: fine) {
  &:hover {
    color: red;
  }
}

Container queries

Read more about how to define type-safe container queries here

Minimal setup

If you want to use Panda with the bare minimum, without any of the defaults, you can read more about it here

Patterns Utilities