Верх / Право / Низ / Лево

Применение

Используйте утилиты {top|right|bottom|left|inset}-0 для привязки абсолютно позиционированных элементов к любому из краев ближайшего расположенного родителя.

В сочетании с утилитами заполнения и поля Tailwind Вы, вероятно, обнаружите, что это все, что вам нужно для точного управления абсолютно позиционированными элементами.

Адаптивность

Чтобы разместить элемент только в определенной контрольной точке, добавьте префикс {screen}: к любой существующей утилите позиционирования. Например, добавление класса md:inset-y-0 к элементу приведет к применению утилиты inset-y-0 при средних размерах экрана и выше.

<div class="relative h-32 ...">
  <div class="absolute inset-0 md:inset-y-0 ..."></div>
</div>

Для получения дополнительной информации о функциях адаптивного дизайна Tailwind ознакомьтесь с документацией Адаптивного дизайна.

Кастомизация

Шкала Top / Right / Bottom / Left

По умолчанию Tailwind предоставляет утилиты top/right/bottom/left/inset для комбинации шкалы интервалов по умолчанию, auto, full, а также некоторые дополнительные значения дроби.

Вы можете изменить, добавить или удалить их, отредактировав раздел theme.inset в файле tailwind.config.js.

  // tailwind.config.js
  module.exports = {
    theme: {
      inset: {
        '0': 0,
        // ...
-       '64': '16rem',
+       '1/5': '20%',
      }
    }
  }

Отрицательные значения

Если вы хотите добавить какие-либо отрицательные классы top/right/bottom/left, которые принимают ту же форму, что и классы Tailwind отрицательные поля, поставьте перед ключами в файле конфигурации дефис:

  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        inset: {
+         '-16': '-4rem',
        }
      }
    }
  }

Tailwind достаточно умен, чтобы генерировать классы вроде -top-16, когда видит начальное тире, а не top--16, как вы могли ожидать.

Варианты

По умолчанию, только responsive варианты создаются для утилит top, right, bottom, left, and inset.

Вы можете контролировать, какие варианты создаются для утилит top, right, bottom, left, and inset для изменения свойства inset в разделе variants Вашего файла конфигурации tailwind.config.js.

Например, эта конфигурация также будет генерировать варианты hover и focus:

  // tailwind.config.js
  module.exports = {
    variants: {
      extend: {
        // ...
+       inset: ['hover', 'focus'],
      }
    }
  }

Отключение

Если Вы не планируете использовать в своем проекте утилиты для изменения top, right, bottom, left, and inset, Вы можете полностью отключить их, установив для inset свойство значение false в разделе corePlugins Вашего файла конфигурации:

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     inset: false,
    }
  }