How to define horizontal and vertical padding size just in padding property?

[MrKou47]

In stitches.js, I could do this:

const button = styled('button', {
  padding: '$1 $2',
})

But in panda, when I try to set padding: '1 2', it will be compiled into .p_1_2: 1 2 which is not a valid value. Does this mean that I cannot directly use the padding property in pandaCSS to define values in two directions? This is too strange. Am I missing something?

[segunadebayo]

Nothing strange here. Panda uses a slightly different approach which is covered in the docs.

You can use the token reference syntax.

padding: {spacing.1} {spacing.2}

alternatively

paddingBlock: 1
paddingInline: 2