More 🐼 PandaCSS space utilities

Add the missing spaceX and spaceY utilities to 🐼 PandaCSS.

Installation

npm install --save-dev pandacss-preset-space

Usage

Add the preset to your PandaCSS configuration (panda.config.ts)

import { defineConfig } from "@pandacss/dev";

// Import the preset. The name can be anything you want
import spacePreset from "pandacss-preset-space";

export default defineConfig({
  presets: [
    spacePreset,
    // Re-add the panda preset if you want to keep
    // the default keyframes, breakpoints, tokens
    // and textStyles provided by PandaCSS
    "@pandacss/preset-panda",
  ],
});

You can now use the spaceX and spaceY utilities within your styles. The values are based on the spacing tokens you can set in your 🐼 PandaCSS configuration.

spaceX adds a margin to the left of every child element except the first one. spaceY adds a margin to the top of every child element except the first one.

export function Page() {
  return (
    <div
      className={css({
        spaceY: 4,
      })}
    >
      <div>Hello</div>
      <div>World</div>
    </div>
  );
}

Attributions

• Chakra team for creating 🐼 PandaCSS