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.

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

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

pnpm panda codegen

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

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