Пробел

Normal

Используйте whitespace-normal, чтобы нормально переносить текст внутри элемента. Новые строки и пробелы будут свернуты.

No Wrap

Используйте whitespace-nowrap, чтобы предотвратить перенос текста внутри элемента. Новые строки и пробелы будут свернуты.

Pre

Используйте whitespace-pre, чтобы сохранить символы новой строки и пробелы внутри элемента. Текст не переносится.

Pre Line

Use whitespace-pre-line to preserve newlines but not spaces within an element. Text will be wrapped normally.

Pre Wrap

Use whitespace-pre-wrap to preserve newlines and spaces within an element. Text will be wrapped normally.

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

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

<div class="whitespace-normal md:whitespace-pre ...">
<!-- ... -->
</div>

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

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

Варианты

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

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

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

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

Отключение

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

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