Поддержка браузера

В общем, Tailwind CSS v3.0 разработан и протестирован в последних стабильных версиях Chrome, Firefox, Edge и Safari. Он не поддерживает никакие версии IE, включая IE 11.

Хотя большинство функций Tailwind CSS будут работать во всех современных браузерах, Tailwind также включает API-интерфейсы для нескольких передовых функций, которые еще не поддерживаются всеми браузерами, например псевдокласс :focus-visible и backdrop-filter утилиты.

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

База данных Can I Use - отличный ресурс, когда вы не уверены в поддержке незнакомой функции CSS.

---

​

Префиксы поставщиков

Многие свойства CSS требуют, чтобы префиксы поставщиков были понятны браузерам, например, background-clip: text нуждается в префиксе -webkit для работы в большинстве браузеров:

.bg-clip-text {
  -webkit-background-clip: text;
  background-clip: text;
}

Если вы используете инструмент Tailwind CLI, префиксы поставщиков, подобные этому, будут добавлены автоматически.

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

Чтобы использовать его, установите его через npm:

npm install -D autoprefixer

Затем добавьте его в самый конец списка плагинов в конфигурации PostCSS:

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
  ]
}

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