Обнаружение классов в исходных файлах

Понимание и настройка того, как Tailwind сканирует ваши исходные файлы.

Обзор

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

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

Как обнаруживаются классы

Tailwind обрабатывает все ваши исходные файлы как обычный текст и не пытается анализировать ваши файлы как код каким-либо образом.

Вместо этого он просто ищет любые токены в вашем файле, которые могут быть классами, основываясь на том, какие символы Tailwind ожидает в именах классов:

JSX

export function Button({ color, children }) {  const colors = {    black: "bg-black text-white",    blue: "bg-blue-500 text-white",    white: "bg-white text-black",  };  return (    <button className={`${colors[color]} rounded-full px-2 py-1.5 font-sans text-sm/6 font-medium shadow`}>      {children}    </button>  );}

Затем он пытается сгенерировать CSS для всех этих токенов, отбрасывая любые токены, которые не соответствуют утилитарному классу, о котором знает фреймворк.

Динамические имена классов

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

Не конструируйте имена классов динамически

HTML

<div class="text-{{ error ? 'red' : 'green' }}-600"></div>

В приведенном выше примере строки text-red-600 и text-green-600 не существуют, поэтому Tailwind не сгенерирует эти классы.

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

Всегда используйте полные имена классов

HTML

<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>

Если вы используете библиотеку компонентов, такую как React или Vue, это означает, что вы не должны использовать пропсы для динамического конструирования классов:

Не используйте пропсы для динамического построения имен классов

JSX

function Button({ color, children }) {  return <button className={`bg-${color}-600 hover:bg-${color}-500 ...`}>{children}</button>;}

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

Всегда сопоставляйте пропсы со статическими именами классов

JSX

function Button({ color, children }) {  const colorVariants = {    blue: "bg-blue-600 hover:bg-blue-500",    red: "bg-red-600 hover:bg-red-500",  };  return <button className={`${colorVariants[color]} ...`}>{children}</button>;}

Это имеет дополнительное преимущество, позволяя вам сопоставлять разные значения пропсов с разными оттенками цветов, например:

JSX

function Button({ color, children }) {  const colorVariants = {    blue: "bg-blue-600 hover:bg-blue-500 text-white",    red: "bg-red-500 hover:bg-red-400 text-white",    yellow: "bg-yellow-300 hover:bg-yellow-400 text-black",  };  return <button className={`${colorVariants[color]} ...`}>{children}</button>;}

Пока вы всегда используете полные имена классов в своем коде, Tailwind будет генерировать весь ваш CSS идеально каждый раз.

Какие файлы сканируются

Tailwind будет сканировать каждый файл в вашем проекте на предмет имен классов, за исключением следующих случаев:

Файлы, указанные в вашем .gitignore
Файлы в директории node_modules
Двоичные файлы, такие как изображения, видео или архивы
CSS-файлы
Типовые lock-файлы менеджеров пакетов

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

Явная регистрация источников

Используйте @source для явной регистрации путей к источникам относительно таблицы стилей:

CSS

@import "tailwindcss";@source "../node_modules/@acmecorp/ui-lib";

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

Установка базового пути

Tailwind использует текущую рабочую директорию как отправную точку при сканировании имен классов по умолчанию.

Чтобы явно установить базовый путь для обнаружения источников, используйте функцию source() при импорте Tailwind в ваш CSS:

CSS

@import "tailwindcss" source("../src");

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

Игнорирование конкретных путей

Используйте @source not для игнорирования конкретных путей, относительно таблицы стилей, при сканировании имен классов:

CSS

@import "tailwindcss";@source not "../src/components/legacy";

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

Отключение автоматического обнаружения

Используйте source(none) для полного отключения автоматического обнаружения источников, если вы хотите явно зарегистрировать все ваши источники:

CSS

@import "tailwindcss" source(none);@source "../admin";@source "../shared";

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

Безопасный список конкретных утилит

Если вам нужно убедиться, что Tailwind генерирует определенные имена классов, которых нет в ваших файлах контента, используйте @source inline() для принудительной их генерации:

CSS

@import "tailwindcss";@source inline("underline");

Generated CSS

.underline {  text-decoration: underline;}

Безопасный список вариантов

Вы также можете использовать @source inline() для генерации классов с вариантами. Например, чтобы сгенерировать класс underline с вариантами hover и focus, добавьте {hover:,focus:,} к входному источнику:

CSS

@import "tailwindcss";@source inline("{hover:,focus:,}underline");

Generated CSS

.underline {  text-decoration: underline;}@media (hover: hover) {  .hover\:underline:hover {    text-decoration: underline;  }}@media (focus: focus) {  .focus\:underline:focus {    text-decoration: underline;  }}

Безопасный список с диапазонами

Входной источник расширяется фигурными скобками, поэтому вы можете генерировать несколько классов одновременно. Например, чтобы сгенерировать все красные цвета фона с вариантами hover, используйте диапазон:

CSS

@import "tailwindcss";@source inline("{hover:,}bg-red-{50,{100..900..100},950}");

Generated CSS

.bg-red-50 {  background-color: var(--color-red-50);}.bg-red-100 {  background-color: var(--color-red-100);}.bg-red-200 {  background-color: var(--color-red-200);}/* ... */.bg-red-800 {  background-color: var(--color-red-800);}.bg-red-900 {  background-color: var(--color-red-900);}.bg-red-950 {  background-color: var(--color-red-950);}@media (hover: hover) {  .hover\:bg-red-50:hover {    background-color: var(--color-red-50);  }  /* ... */  .hover\:bg-red-950:hover {    background-color: var(--color-red-950);  }}

Это генерирует красные цвета фона от 100 до 900 с шагом 100, а также первые и последние оттенки 50 и 950. Это также добавляет вариант hover: для каждого из этих классов.

Явное исключение классов

Используйте @source not inline() для предотвращения генерации конкретных классов, даже если они обнаружены в ваших исходных файлах:

CSS

@import "tailwindcss";@source not inline("{hover:,focus:,}bg-red-{50,{100..900..100},950}");

Это явно исключит красные утилиты фона вместе с их вариантами hover и focus из генерации.

На этой странице