Вставьте HTML и нажмите «Сгенерировать»

Как перевести Tailwind-классы в обычный CSS

Инструмент собирает используемые утилитарные классы Tailwind и генерирует эквивалентные CSS-правила для автономного использования.

Как получить обычный CSS из HTML с классами Tailwind?

Вставьте HTML-фрагмент с Tailwind-классами (например, `<button class="px-4 py-2 bg-blue-500">`) в поле ввода и нажмите «Сгенерировать» — инструмент вернёт эквивалентные CSS-правила с объяснением.

Зачем переводить Tailwind в обычный CSS, если можно оставить классы?

Это полезно, когда компонент нужно перенести в проект без сборщика Tailwind (например, в CMS-шаблон или чужую систему вёрстки), где utility-классы недоступны, но обычный CSS подключить можно.

Как обрабатываются адаптивные префиксы вроде md: или lg:?

Классы с брейкпоинт-префиксами преобразуются в соответствующие media-запросы в CSS — после конвертации стоит проверить порядок правил, чтобы приоритет стилей на разных экранах сохранился.

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

  • 1

    Вставьте HTML

    Вставьте HTML с Tailwind-классами.

  • 2

    Сгенерируйте CSS

    Нажмите «Сгенерировать» и скопируйте правила в свой файл CSS.

FAQ