Сброс

Сбросить слева

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

Сбросить справа

Используйте clear-right, чтобы расположить элемент под любыми предыдущими элементами, обтекающими справа.

Сбросить оба

Используйте clear-both, чтобы разместить элемент под всеми предыдущими плавающими элементами.

Не сбрасывать

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

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

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

<p class="clear-right md:clear-left ...">
  <!-- ... -->
</p>

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

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

Варианты

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

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

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

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

Отключение

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

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