Padding

Apply spacing inside elements (padding).

Usage:

@space p-*;
@space pt-*;
@space pb-*;
@space pl-*;
@space pr-*;
@space px-*;
@space py-*;
@space pbl-*;
@space pbls-*;
@space pble-*;
@space pi-*;
@space pis-*;
@space pie-*;

info

This page contains only the property configuration reference. Complete documentation and usage examples will be added progressively in future updates.

Reference

shilp.config.js
/** @type {import('shilpcss/types').ShilpConfig} */
const shilpConfig = {
  source: "react",

  properties: {
    space: {
      p: {
        property: "padding: <n><v><i>;",
        resolve: "spacing",
        themeKey: "spacingPixels",
        values: {},
      },
      pt: {
        property: "padding-top: <n><v><i>;",
        resolve: "spacing",
        themeKey: "spacingPixels",
        values: {},
      },
      pr: {
        property: "padding-right: <n><v><i>;",
        resolve: "spacing",
        themeKey: "spacingPixels",
        values: {},
      },
      pb: {
        property: "padding-bottom: <n><v><i>;",
        resolve: "spacing",
        themeKey: "spacingPixels",
        values: {},
      },
      pl: {
        property: "padding-left: <n><v><i>;",
        resolve: "spacing",
        themeKey: "spacingPixels",
        values: {},
      },
      px: {
        property: `
					padding-left: <n><v><i>;
          padding-right: <n><v><i>;
        `,
        resolve: "spacing",
        themeKey: "spacingPixels",
        values: {},
      },
      py: {
        property: `
					padding-top: <n><v><i>;
          padding-bottom: <n><v><i>;
        `,
        resolve: "spacing",
        themeKey: "spacingPixels",
        values: {},
      },
      pbl: {
        property: "padding-block: <n><v><i>",
        resolve: "spacing",
        themeKey: "spacingPixels",
        values: {},
      },
      pbls: {
        property: "padding-block-start: <n><v><i>;",
        resolve: "spacing",
        themeKey: "spacingPixels",
        values: {},
      },
      pble: {
        property: "padding-block-end: <n><v><i>;",
        resolve: "spacing",
        themeKey: "spacingPixels",
        values: {},
      },
      pi: {
        property: "padding-inline: <n><v><i>",
        resolve: "spacing",
        themeKey: "spacingPixels",
        values: {},
      },
      pis: {
        property: "padding-inline-start: <n><v><i>;",
        resolve: "spacing",
        themeKey: "spacingPixels",
        values: {},
      },
      pie: {
        property: "padding-inline-end: <n><v><i>;",
        resolve: "spacing",
        themeKey: "spacingPixels",
        values: {},
      },
    },
  },
};

export default shilpConfig;