Размещение себя

Справочник классов по умолчанию

Класс	Свойства
place-self-auto	place-self: auto;
place-self-start	place-self: start;
place-self-end	place-self: end;
place-self-center	place-self: center;
place-self-stretch	place-self: stretch;

Auto

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

<div class="grid grid-cols-3 gap-2 ...">
  <div>1</div>
  <div class="place-self-auto ...">2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

Start

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

<div class="grid grid-cols-3 gap-2 ...">
  <div>1</div>
  <div class="place-self-start ...">2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

Center

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

<div class="grid grid-cols-3 gap-2 ...">
  <div>1</div>
  <div class="place-self-center ...">2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

End

Используйте place-self-end, чтобы выровнять элемент по обеим осям:

<div class="grid grid-cols-3 gap-2 ...">
  <div>1</div>
  <div class="place-self-end ...">2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

Stretch

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

<div class="grid grid-cols-3 gap-2 ...">
  <div>1</div>
  <div class="place-self-stretch ...">2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

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

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

<div class="place-self-start md:place-self-end">
  <!-- ... -->
</div>

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

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

Варианты

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

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

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

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

Отключение

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

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