Основные концепции
Понимание и настройка того, как Tailwind сканирует ваши исходные файлы.
Tailwind работает путем сканирования вашего проекта на предмет утилитарных классов, а затем генерирует весь необходимый CSS на основе классов, которые вы фактически использовали.
Это гарантирует, что ваш CSS будет максимально маленьким, а также делает возможными такие функции, как произвольные значения.
Tailwind обрабатывает все ваши исходные файлы как обычный текст и не пытается анализировать ваши файлы как код каким-либо образом.
Вместо этого он просто ищет любые токены в вашем файле, которые могут быть классами, основываясь на том, какие символы Tailwind ожидает в именах классов:
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 сканирует ваши исходные файлы как обычный текст, он не может понять конкатенацию строк или интерполяцию в языке программирования, который вы используете.
Не конструируйте имена классов динамически
<div class="text-{{ error ? 'red' : 'green' }}-600"></div>
В приведенном выше примере строки text-red-600
и text-green-600
не существуют, поэтому Tailwind не сгенерирует эти классы.
Вместо этого убедитесь, что любые имена классов, которые вы используете, существуют полностью:
Всегда используйте полные имена классов
<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>
Если вы используете библиотеку компонентов, такую как React или Vue, это означает, что вы не должны использовать пропсы для динамического конструирования классов:
Не используйте пропсы для динамического построения имен классов
function Button({ color, children }) { return <button className={`bg-${color}-600 hover:bg-${color}-500 ...`}>{children}</button>;}
Вместо этого сопоставьте пропсы с полными именами классов, которые статически обнаруживаются во время сборки:
Всегда сопоставляйте пропсы со статическими именами классов
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>;}
Это имеет дополнительное преимущество, позволяя вам сопоставлять разные значения пропсов с разными оттенками цветов, например:
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
Если вам нужно сканировать любые файлы, которые Tailwind игнорирует по умолчанию, вы можете явно зарегистрировать эти источники.
Используйте @source
для явной регистрации путей к источникам относительно таблицы стилей:
@import "tailwindcss";@source "../node_modules/@acmecorp/ui-lib";
Это особенно полезно, когда вам нужно сканировать внешнюю библиотеку, которая построена с Tailwind, поскольку зависимости обычно перечислены в вашем файле .gitignore
и игнорируются Tailwind по умолчанию.
Tailwind использует текущую рабочую директорию как отправную точку при сканировании имен классов по умолчанию.
Чтобы явно установить базовый путь для обнаружения источников, используйте функцию source()
при импорте Tailwind в ваш CSS:
@import "tailwindcss" source("../src");
Это может быть полезно при работе с монорепозиториями, где ваши команды сборки запускаются из корня монорепозитория вместо корня каждого проекта.
Используйте @source not
для игнорирования конкретных путей, относительно таблицы стилей, при сканировании имен классов:
@import "tailwindcss";@source not "../src/components/legacy";
Это полезно, когда у вас есть большие директории в вашем проекте, которые, как вы знаете, не используют классы Tailwind, такие как устаревшие компоненты или сторонние библиотеки.
Используйте source(none)
для полного отключения автоматического обнаружения источников, если вы хотите явно зарегистрировать все ваши источники:
@import "tailwindcss" source(none);@source "../admin";@source "../shared";
Это может быть полезно в проектах, которые имеют несколько таблиц стилей Tailwind, где вы хотите убедиться, что каждая из них включает только те классы, которые нужны каждой таблице стилей.
Если вам нужно убедиться, что Tailwind генерирует определенные имена классов, которых нет в ваших файлах контента, используйте @source inline()
для принудительной их генерации:
@import "tailwindcss";@source inline("underline");
.underline { text-decoration: underline;}
Вы также можете использовать @source inline()
для генерации классов с вариантами. Например, чтобы сгенерировать класс underline
с вариантами hover и focus, добавьте {hover:,focus:,}
к входному источнику:
@import "tailwindcss";@source inline("{hover:,focus:,}underline");
.underline { text-decoration: underline;}@media (hover: hover) { .hover\:underline:hover { text-decoration: underline; }}@media (focus: focus) { .focus\:underline:focus { text-decoration: underline; }}
Входной источник расширяется фигурными скобками, поэтому вы можете генерировать несколько классов одновременно. Например, чтобы сгенерировать все красные цвета фона с вариантами hover, используйте диапазон:
@import "tailwindcss";@source inline("{hover:,}bg-red-{50,{100..900..100},950}");
.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()
для предотвращения генерации конкретных классов, даже если они обнаружены в ваших исходных файлах:
@import "tailwindcss";@source not inline("{hover:,focus:,}bg-red-{50,{100..900..100},950}");
Это явно исключит красные утилиты фона вместе с их вариантами hover и focus из генерации.