Предварительная проверка

Обзор

Построенная поверх modern-normalize, предварительная проверка представляет собой набор базовых стилей для проектов Tailwind, предназначенных для сглаживания перекрестных несоответствий в браузере и упрощения работы в рамках ограничений системы проектирования.

Tailwind автоматически внедряет эти стили, когда вы включаете @tailwind base в свой CSS:

@tailwind base; /* Preflight будет вставлен здесь */

@tailwind components;

@tailwind utilities;

Хотя большинство стилей в 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.

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

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

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

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

<ul class="list-disc list-inside">
  <li>Один</li>
  <li>Два</li>
  <li>Три</li>
</ul>

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

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

Соображения доступности

Списки без стилей 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="...">

Стили границ сбрасываются глобально

Чтобы упростить добавление границы путем простого добавления класса 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;
}

Кнопки имеют контур по умолчанию

Чтобы гарантировать, что мы предоставляем доступные стили из коробки, мы убедились, что кнопки имеют контур по умолчанию. Вы, конечно, можете отменить это, применив к Вашим кнопкам focus:ring или аналогичные утилиты.

button:focus {
  outline: 1px dotted;
  outline: 5px auto -webkit-focus-ring-color;
}

Расширение предварительно подготовки

Если вы хотите добавить свои собственные базовые стили поверх 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;

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

Отключение предварительно подготовки

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