Начало работы
Узнайте о поддержке браузеров и совместимости с другими инструментами.
Tailwind CSS v4.0 разработан и протестирован для современных браузеров, и основная функциональность фреймворка зависит от следующих версий браузеров:
Tailwind также включает поддержку многих передовых функций платформы, таких как field-sizing: content, @starting-style и text-wrap: balance, которые имеют ограниченную поддержку в браузерах. Вам решать, хотите ли вы использовать эти современные функции в своих проектах — если браузеры, которые вы поддерживаете, не поддерживают их, просто не используйте эти утилиты и варианты.
Если вы не уверены в поддержке современной функции платформы, база данных Can I use — это отличный ресурс.
Tailwind CSS v4.0 — это полнофункциональный инструмент для сборки CSS, разработанный для конкретного рабочего процесса, и он не предназначен для использования с CSS-препроцессорами, такими как Sass, Less или Stylus.
Считайте Tailwind CSS вашим препроцессором — вам не следует использовать Tailwind вместе с Sass по той же причине, по которой вы не стали бы использовать Sass вместе со Stylus.
Поскольку Tailwind разработан для современных браузеров, вам на самом деле не нужен препроцессор для таких вещей, как вложенность или переменные. Сам Tailwind будет выполнять такие задачи, как объединение ваших импортов и добавление вендорных префиксов.
Tailwind автоматически объединит другие CSS-файлы, которые вы подключаете с помощью @import, без необходимости использования отдельного инструмента предварительной обработки.
@import "tailwindcss";@import "./typography.css";В этом примере файл typography.css будет автоматически объединен в ваш скомпилированный CSS с помощью Tailwind, без необходимости использования других инструментов, таких как Sass или postcss-import.
Все современные браузеры поддерживают нативные CSS-переменные без необходимости использования каких-либо препроцессоров:
.typography { font-size: var(--text-base); color: var(--color-gray-700);}Tailwind активно использует CSS-переменные внутри себя, поэтому, если вы можете использовать Tailwind в своем проекте, вы также можете использовать нативные CSS-переменные.
Под капотом Tailwind использует Lightning CSS для обработки вложенного CSS, как в этом примере:
.typography { p { font-size: var(--text-base); } img { border-radius: var(--radius-lg); }}Tailwind автоматически преобразует вложенный CSS в плоскую структуру, чтобы он мог быть понят всеми современными браузерами:
.typography p { font-size: var(--text-base);}.typography img { border-radius: var(--radius-lg);}Поддержка вложенности в нативном CSS в наши дни также очень хороша, поэтому вам действительно не нужен препроцессор для вложенности, даже если вы не используете Tailwind.
В Tailwind классы, которые вы могли бы создавать с помощью циклов в прошлом (например, col-span-1, col-span-2 и т.д.), генерируются по запросу, когда вы их используете, вместо того чтобы быть предопределенными.
Кроме того, когда вы создаете что-то с помощью Tailwind CSS, большая часть стилей пишется в HTML, а не в CSS-файлах. Поскольку вы изначально не пишете тонны CSS, вам просто не нужны такие функции, как циклы, которые предназначены для программного создания множества пользовательских CSS-правил.
При использовании препроцессоров, таких как Sass или Less, вы могли использовать функции, такие как darken или lighten , для настройки цветов.
При использовании Tailwind рекомендуется использовать предопределенную палитру цветов, которая включает светлые и темные оттенки каждого цвета, например, профессионально разработанную палитру по умолчанию, включенную в фреймворк.
<button class="bg-indigo-500 hover:bg-indigo-600 ..."> <!-- ... --></button>Вы также можете использовать современные функции CSS, такие как color-mix(), чтобы настраивать цвета непосредственно в браузере во время выполнения. Это даже позволяет вам настраивать цвета, определенные с помощью CSS-переменных или ключевого слова currentcolor, что невозможно с препроцессорами.
Аналогично, браузеры теперь нативно поддерживают математические функции, такие как min(), max() и round(), поэтому больше нет необходимости полагаться на препроцессоры для этих функций.
Tailwind совместим с CSS-модулями и может сосуществовать с ними, если вы внедряете Tailwind в проект, который уже их использует, но мы не рекомендуем использовать CSS-модули и Tailwind вместе, если этого можно избежать.
CSS-модули предназначены для решения проблем с областью видимости, которые просто не существуют при использовании утилитарных классов в HTML вместо написания пользовательского CSS.
Стили естественным образом ограничены в Tailwind, потому что каждый утилитарный класс всегда делает одно и то же, независимо от того, где он используется — нет риска, что добавление утилитарного класса в одну часть вашего интерфейса создаст неожиданный побочный эффект в другом месте.
При использовании CSS-модулей инструменты сборки, такие как Vite, Parcel и Turbopack, обрабатывают каждый CSS-модуль отдельно. Это означает, что если у вас есть 50 CSS-модулей в проекте, Tailwind нужно запустить 50 раз, что приводит к более медленному времени сборки и ухудшению опыта разработчика.
Поскольку CSS-модули обрабатываются отдельно, у них нет @theme, если вы его не импортируете.
Это означает, что такие функции, как @apply, не будут работать так, как вы ожидаете, если вы явно не импортируете свои глобальные стили в качестве ссылки:
Импортируйте свои глобальные стили в качестве ссылки, чтобы убедиться, что переменные темы определены
@reference "../app.css";button { @apply bg-blue-500;}Альтернативно, вы также можете просто использовать CSS-переменные вместо @apply, что имеет дополнительное преимущество: Tailwind пропускает обработку этих файлов, что улучшает производительность сборки:
button { background: var(--color-blue-500);}Vue, Svelte и Astro поддерживают блоки <style>в файлах компонентов, которые ведут себя очень похоже на CSS-модули, это означает, что каждый из них обрабатывается вашими инструментами сборки полностью отдельно и имеет те же недостатки.
Если вы используете Tailwind с этими инструментами, мы рекомендуем избегать блоков <style> в ваших компонентах и просто стилизовать элементы с помощью утилитарных классов непосредственно в разметке, как и задумано в Tailwind.
Если вы все же используете блоки <style>, убедитесь, что импортируете глобальные стили в качестве ссылки, если хотите, чтобы такие функции, как @apply, работали должным образом:
Импортируйте свои глобальные стили в качестве ссылки, чтобы убедиться, что переменные темы определены
<template> <button><slot /></button></template><style scoped> @reference "../app.css"; button { @apply bg-blue-500; }</style>Или просто используйте глобально определенные CSS-переменные вместо функций, таких как @apply, которые не требуют обработки CSS ваших компонентов Tailwind:
<template> <button><slot /></button></template><style scoped> button { background-color: var(--color-blue-500); }</style>