Preflight

Обзор

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

Когда вы импортируете tailwindcss в свой проект, Preflight автоматически вставляется в слой base:

@layer theme, base, components, utilities;@import "tailwindcss/theme.css" layer(theme);@import "tailwindcss/preflight.css" layer(base);@import "tailwindcss/utilities.css" layer(utilities);

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

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

Отступы удалены

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

*,::after,::before,::backdrop,::file-selector-button {  margin: 0;  padding: 0;}

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

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

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

*,::after,::before,::backdrop,::file-selector-button {  box-sizing: border-box;  border: 0 solid;}

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

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

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

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

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

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

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

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

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

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

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

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

ol,ul,menu {  list-style: none;}

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

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

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

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

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

<ul role="list">  <li>Один</li>  <li>Два</li>  <li>Три</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="..." />

Расширение Preflight

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

@layer base {  h1 {    font-size: var(--text-2xl);  }  h2 {    font-size: var(--text-xl);  }  h3 {    font-size: var(--text-lg);  }  a {    color: var(--color-blue-600);    text-decoration-line: underline;  }}

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

Отключение Preflight

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

По умолчанию @import "tailwindcss"; вставляет следующее:

@layer theme, base, components, utilities;@import "tailwindcss/theme.css" layer(theme);@import "tailwindcss/preflight.css" layer(base);@import "tailwindcss/utilities.css" layer(utilities);

Чтобы отключить Preflight, просто пропустите его импорт, оставив все остальное:

@layer theme, base, components, utilities;@import "tailwindcss/theme.css" layer(theme);@import "tailwindcss/preflight.css" layer(base);@import "tailwindcss/utilities.css" layer(utilities);

При импорте файлов Tailwind CSS по отдельности функции типа source(), theme() и prefix() должны быть размещены на соответствующих импортах.

Например, обнаружение исходного кода влияет на сгенерированные утилиты, поэтому source(…) должен быть добавлен к импорту utilities.css:

@layer theme, base, components, utilities;@import "tailwindcss/theme.css" layer(theme);@import "tailwindcss/utilities.css" layer(utilities);@import "tailwindcss/utilities.css" layer(utilities) source(none);

То же самое касается important, который также влияет на утилиты:

@layer theme, base, components, utilities;@import "tailwindcss/theme.css" layer(theme);@import "tailwindcss/utilities.css" layer(utilities);@import "tailwindcss/utilities.css" layer(utilities) important;

Аналогично, theme(static) и theme(inline) влияют на сгенерированные переменные темы и должны быть размещены на импорте theme.css:

@layer theme, base, components, utilities;@import "tailwindcss/theme.css" layer(theme);@import "tailwindcss/theme.css" layer(theme) theme(static);@import "tailwindcss/utilities.css" layer(utilities);

Наконец, использование префикса с prefix(tw) влияет на утилиты и переменные, поэтому он должен быть размещен на обоих импортах:

@layer theme, base, components, utilities;@import "tailwindcss/theme.css" layer(theme);@import "tailwindcss/utilities.css" layer(utilities);@import "tailwindcss/theme.css" layer(theme) prefix(tw);@import "tailwindcss/utilities.css" layer(utilities) prefix(tw);