Обтекание

Обтекание справа

Используйте float-right, чтобы разместить элемент справа от его контейнера.

Обтекание слева

Используйте float-left, чтобы разместить элемент слева от его контейнера.

Без обтекания

Используйте float-none, чтобы сбросить любые обтекания, которые применяются к элементу. Это значение по умолчанию для свойства float.

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

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

<div class="bg-gray-200 p-4">
  <img class="float-right md:float-left ...">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam venenatis et lorem sit amet vehicula. Etiam vel nibh nec nisi euismod mollis ultrices condimentum velit. Proin velit libero, interdum ac rhoncus sit amet, pellentesque ac turpis. Quisque ac luctus turpis, vel efficitur ante. Cras convallis risus vel vehicula dapibus. Donec eget neque fringilla, faucibus mi quis, porttitor magna. Cras pellentesque leo est, et luctus neque rutrum eu. Aliquam consequat velit sed sem posuere, vitae sollicitudin mi consequat. Mauris eget ipsum sed dui rutrum fringilla. Donec varius vehicula magna sit amet auctor. Ut congue vehicula lectus in blandit. Vivamus suscipit eleifend turpis, nec sodales sem vulputate a. Curabitur pulvinar libero viverra, efficitur odio eu, finibus justo. Etiam eu vehicula felis.</p>
</div>

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

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

Варианты

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

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

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

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

Отключение

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

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