Интервал #

Отступы #

Утилиты для управления отступом элемента.

xxxxxxxxxx

p-4

{}

.p-4 {
  padding: 1rem;
}

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

Padding Y #

Утилиты для управления отступом элемента по вертикали.

xxxxxxxxxx

py-4

{}

.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

Padding X #

Утилиты для управления отступом элемента по горизонтали.

xxxxxxxxxx

px-4

{}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

Padding Top #

Утилиты для управления отступом сверху элемента.

xxxxxxxxxx

pt-4

{}

.pt-4 {
  padding-top: 1rem;
}

Padding Left #

Утилиты для управления левым отступом элемента.

xxxxxxxxxx

pl-4

{}

.pl-4 {
  padding-left: 1rem;
}

Padding Bottom #

Утилиты для управления отступом снизу элемента.

xxxxxxxxxx

pb-4

{}

.pb-4 {
  padding-bottom: 1rem;
}

Padding Right #

Утилиты для управления отступом справа элемента.

xxxxxxxxxx

pr-4

{}

.pr-4 {
  padding-right: 1rem;
}

Поля #

Утилиты для управления полями элемента.

xxxxxxxxxx

m-4

{}

.m-4 {
  margin: 1rem;
}

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

Margin Y #

Утилиты для управления вертикальным отступом элемента.

xxxxxxxxxx

my-4

{}

.my-4 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

Margin X #

Утилиты для управления горизонтальным отступом элемента.

xxxxxxxxxx

mx-4

{}

.mx-4 {
  margin-left: 1rem;
  margin-right: 1rem;
}

Margin Top #

Утилиты для управления верхним полем элемента.

xxxxxxxxxx

mt-4

{}

.mt-4 {
  margin-top: 1rem;
}

Margin Left #

Утилиты для управления левым полем элемента.

xxxxxxxxxx

ml-4

{}

.ml-4 {
  margin-left: 1rem;
}

Margin Bottom #

Утилиты для управления нижним полем элемента.

xxxxxxxxxx

mb-4

{}

.mb-4 {
  margin-bottom: 1rem;
}

Margin Right #

Утилиты для управления правым полем элемента.

xxxxxxxxxx

mr-4

{}

.mr-4 {
  margin-right: 1rem;
}

Space Between Y #

Утилиты для управления пространством между дочерними элементами вертикального выравнивания.

xxxxxxxxxx

space-y-2

{}

.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

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

Space Between Y Reverse #

Если ваши элементы расположены в обратном порядке (например, с помощью flex-col-reverse), используйте утилиты space-y-reverse, чтобы гарантировать, что пространство добавлено с правильной стороны каждого элемента.

space-y-reverse

{}

.space-y-reverse > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 1;
}

Space Between X #

Утилиты для управления пространством между дочерними элементами по горизонтали.

xxxxxxxxxx

space-x-2

{}

.space-x-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}

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

Space Between X Reverse #

Если ваши элементы расположены в обратном порядке (например, с помощью flex-row-reverse), используйте утилиты space-x-reverse, чтобы гарантировать, что пространство добавлено с правильной стороны каждого элемента.

xxxxxxxxxx

space-x-reverse

{}

.space-x-reverse > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 1;
}