Spacing #

Padding #

Utilities for controlling an element's padding.

export default {
  theme: {
    padding: {
      sm: '8px',
      md: '16px',
      lg: '24px',
      xl: '48px',
    },
  },
}

Padding Y #

Utilities for controlling an element's vertical padding.

Padding X #

Utilities for controlling an element's horizontal padding.

Padding Top #

Utilities for controlling an element's top padding.

Padding Left #

Utilities for controlling an element's left padding.

Padding Bottom #

Utilities for controlling an element's bottom padding.

Padding Right #

Utilities for controlling an element's right padding.

Margin #

Utilities for controlling an element's margin.

export default {
  theme: {
    margin: {
      sm: '8px',
      md: '16px',
      lg: '24px',
      xl: '48px',
    },
  },
}

Margin Y #

Utilities for controlling an element's vertical margin.

Margin X #

Utilities for controlling an element's horizontal margin.

Margin Top #

Utilities for controlling an element's top margin.

Margin Left #

Utilities for controlling an element's left margin.

Margin Bottom #

Utilities for controlling an element's bottom margin.

Margin Right #

Utilities for controlling an element's right margin.

Space Between Y #

Utilities for controlling the space between vertical align child elements.

export default {
  theme: {
    space: {
      sm: '8px',
      md: '16px',
      lg: '24px',
      xl: '48px',
    },
  },
}

Space Between Y Reverse #

If your elements are in reverse order (using say flex-col-reverse), use the space-y-reverse utilities to ensure the space is added to the correct side of each element.

Space Between X #

Utilities for controlling the space between horizontal align child elements.

export default {
  theme: {
    space: {
      sm: '8px',
      md: '16px',
      lg: '24px',
      xl: '48px',
    },
  },
}

Space Between X Reverse #

If your elements are in reverse order (using say flex-row-reverse), use the space-x-reverse utilities to ensure the space is added to the correct side of each element.