Preflight

Обзор

Созданный на основе modern-normalize, Preflight — это набор базовых стилей для проектов Tailwind, призванный устранить несоответствия между браузерами и упростить работу в рамках вашей системы дизайна.

Tailwind автоматически вставляет эти стили при включении @tailwind base в ваш CSS:

@tailwind base; /* Preflight will be injected here */

@tailwind components;

@tailwind utilities;

Хотя большинство стилей в Preflight не должны привлекать к себе внимание — они просто делают вещи более предсказуемыми — некоторые из них более категоричны и могут быть неожиданными при первом знакомстве.

Для полного справочника всех стилей, применяемых Preflight, см. файл стилей.

Убраны стандартные отступы

Preflight удаляет все стандартные отступы у элементов, таких как заголовки, блоки цитат, абзацы и т.д.

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

Это затрудняет случайную зависимость от значений отступов, заданных стилями пользователя, которые не входят в вашу шкалу интервалов.

Заголовки не стилизованы

Все элементы заголовков по умолчанию не стилизованы и имеют тот же размер шрифта и вес шрифта, что и обычный текст.

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

Причина этого двояка:

• Это помогает избежать случайных отклонений от вашей шкалы размеров шрифта. Браузеры по умолчанию присваивают заголовкам размеры, которые не существуют в стандартной шкале размеров шрифтов Tailwind и не гарантируются в вашей собственной шкале.
• В разработке пользовательского интерфейса заголовки часто должны быть визуально менее важными. Делает заголовки нестилизованными по умолчанию, означает, что любая стилизация, которую вы применяете к заголовкам, происходит осознанно и целенаправленно.

Вы всегда можете добавить стандартные стили заголовков в свой проект, добавив свои собственные базовые стили.

Если вы хотите выборочно вводить разумные стандартные стили заголовков в части страницы в стиле статьи, мы рекомендуем @tailwindcss/typography плагин.

Списки не стилизованы

Нумерованные и маркированные списки по умолчанию не стилизованы, без маркеров/номеров и без отступов или отступов.

ol,
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

Если вы хотите стилизовать список, вы можете сделать это, используя утилиты list-style-type и list-style-position:

<ul class="list-disc list-inside">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

Вы всегда можете добавить стандартные стили списков в свой проект, добавив свои собственные базовые стили.

Если вы хотите выборочно вводить стандартные стили списков в части страницы в стиле статьи, мы рекомендуем @tailwindcss/typography плагин.

Учитывая доступность

Нестилизованные списки не объявляются как списки VoiceOver. Если ваш контент действительно является списком, но вы хотите сохранить его нестилизованным, добавьте атрибут «list» к элементу:

<ul role="list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

Изображения — блочные элементы

Изображения и другие заменяемые элементы (например, svg, video, canvas, и другие) по умолчанию являются display: block.

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  vertical-align: middle;
}

Это помогает избежать неожиданных проблем с выравниванием, с которыми вы часто сталкиваетесь, используя стандартное браузерное поведение display: inline.

Если вам когда-либо нужно сделать один из этих элементов inline вместо block, просто используйте утилиту inline:

<img class="inline" src="..." alt="...">

Изображения ограничены шириной родителя

Изображения и видео ограничены шириной родителя таким образом, что сохраняется их внутреннее соотношение сторон.

img,
video {
  max-width: 100%;
  height: auto;
}

Это предотвращает их переполнение контейнеров и делает их отзывчивыми по умолчанию. Если вам когда-либо нужно изменить это поведение, используйте утилиту max-w-none:

<img class="max-w-none" src="..." alt="...">

Стили границ сброшены глобально

Чтобы легко добавить границу, просто добавив класс border, Tailwind переопределяет стандартные стили границ для всех элементов с помощью следующих правил:

*,
::before,
::after {
  border-width: 0;
  border-style: solid;
  border-color: theme('borderColor.DEFAULT', currentColor);
}

Поскольку класс border устанавливает только свойство border-width, этот сброс гарантирует, что добавление этого класса всегда добавляет твёрдую границу 1 пиксел с использованием вашего настроенного цвета границы по умолчанию.

Это может привести к некоторым неожиданным результатам при интеграции определённых библиотек сторонних разработчиков, например, Google maps.

В таких ситуациях можно обойти их, переопределив стили Preflight собственным настраиваемым CSS:

.google-map * {
  border-style: none;
}

Расширение Preflight

Если вы хотите добавить свои собственные базовые стили поверх Preflight, просто добавьте их в свой CSS с помощью директивы @layer base:

@tailwind base;

@layer base {
  h1 {
    @apply text-2xl;
  }
  h2 {
    @apply text-xl;
  }
  h3 {
    @apply text-lg;
  }
  a {
    @apply text-blue-600 underline;
  }
}

@tailwind components;

@tailwind utilities;

Подробнее см. документацию по добавлению базовых стилей.

Отключение Preflight

Если вы хотите полностью отключить Preflight — возможно, потому что вы интегрируете Tailwind в существующий проект или потому что хотите предоставить свои собственные базовые стили — всё, что вам нужно сделать, это установить preflight на значение false в разделе corePlugins вашего файла tailwind.config.js:

module.exports = {
  corePlugins: {
    preflight: false,
  }
}