Выравнивание себя по встроенной оси

Auto

Используйте justify-self-auto для выравнивания элемента на основе значения свойства сетки justify-items:

Start

Используйте justify-self-start, чтобы выровнять элемент сетки относительно начала его встроенной оси:

Center

Используйте justify-self-center, чтобы выровнять элемент сетки по центру его встроенной оси:

End

Используйте justify-self-end, чтобы выровнять элемент сетки до конца его встроенной оси:

Stretch

Используйте justify-self-stretch, чтобы растянуть элемент сетки, чтобы заполнить область сетки на его встроенной оси:

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

Чтобы контролировать выравнивание элемента сетки внутри его области сетки в определенной контрольной точке, добавьте префикс {screen}: к любому существующему служебному классу. Например, используйте md:justify-self-end, чтобы применить утилиту justify-self-end только при средних размерах экрана и выше.

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

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

Варианты

По умолчанию, только responsive варианты создаются для утилит justify-self.

Вы можете контролировать, какие варианты создаются для утилит justify-self для изменения свойства justifySelf в разделе variants Вашего файла конфигурации tailwind.config.js.

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

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

Отключение

Если Вы не планируете использовать в своем проекте утилиты для изменения justify-self, Вы можете полностью отключить их, установив для justifySelf свойство значение false в разделе corePlugins Вашего файла конфигурации:

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