Перейти к содержимому
Numio

Конвертировать CSS в классы TailwindCSS — Numio

Преобразуйте CSS-объявления в утилитарные классы Tailwind CSS, показанные как правила @apply для каждого селектора. Используйте инструмент, чтобы подобрать подходящие утилиты при миграции существующих стилей. Конвертер ориентирован на Tailwind CSS v3.

Найти утилиты Tailwind, соответствующие существующим CSS-правилам, во время миграции.

CSS

TailwindCSS 3.x

Когда пригодится

  • Найти утилиты Tailwind, соответствующие существующим CSS-правилам, во время миграции.
  • Выучить имена классов Tailwind, преобразуя уже знакомый CSS.

Как пользоваться

  1. Вставьте CSS-правила.
  2. Измените базовое значение rem или конфигурацию Tailwind, если в проекте используются свои настройки.
  3. Скопируйте классы после @apply в разметку или таблицу стилей и проверьте результат в своём Tailwind-проекте.

CSS

.card { display: flex; padding: 1rem; }

Результат Tailwind (стандартная шкала)

.card {
  @apply flex p-4;
}

Подробности и ограничения

Имена классов и шкалы соответствуют Tailwind CSS v3. Совместимость с конфигурацией и синтаксисом Tailwind CSS v4 не гарантируется.

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

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

FAQ

Поддерживается ли Tailwind CSS v4?

Используются имена классов и шкалы Tailwind CSS v3. Многие утилиты, например flex, p-4 и text-sm, в v4 называются так же, но v4 переносит конфигурацию в CSS и переименовывает часть утилит, поэтому проверьте результат в своём проекте на v4.

Как использовать имена классов вместо @apply?

Скопируйте список после @apply в атрибут class элемента, например class="flex p-4". Форма @apply группирует классы по исходному селектору.

Можно ли преобразовать классы Bootstrap в Tailwind?

Нет. Инструмент преобразует CSS-объявления, а не имена классов другого фреймворка. Вставьте CSS-правила, стоящие за компонентом Bootstrap, чтобы увидеть подходящие утилиты.

Почему некоторые объявления не преобразуются?

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