间隔 #

Padding #

用于控制元素内边距的工具类。

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

Padding Y #

用于控制元素垂直内边距的工具类。

Padding X #

用于控制元素水平内边距的工具类。

Padding Top #

用于控制元素内边距区域中距顶部高度的工具类。

Padding Left #

用于控制元素内边距区域中距左侧宽度的工具类。

Padding Bottom #

用于控制元素内边距区域中距底部高度的工具类。

Padding Right #

用于控制元素内边距区域中距右侧宽度的工具类。

Margin #

用于控制元素外边距的工具类。

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

Margin Y #

用于控制元素垂直外边距的工具类。

Margin X #

用于控制元素水平外边距的工具类。

Margin Top #

用于控制元素外边距区域中距顶部高度的工具类。

Margin Left #

用于控制元素外边距区域中距左侧宽度的工具类。

Margin Bottom #

用于控制元素外边距区域中距底部高度的工具类。

Margin Right #

用于控制元素外边距区域中距右侧宽度的工具类。

Space Between Y #

用于控制元素垂直方向与其子元素的间隔的工具类。

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

Space Between Y Reverse #

如果你的元素倒序（使用 flex-col-reverse），请使用 space-y-reverse 间隔来确保每个元素被添加到正确的一侧的工具类。

Space Between X #

用于控制元素水平方向与其子元素的间隔的工具类。

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

Space Between X Reverse #

如果你的元素倒序（使用 flex-row-reverse），请使用 space-x-reverse 间隔来确保每个元素被添加到正确的一侧的工具类。