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

Четыре шага: вставить, запустить, проверить, скопировать. Всё в браузере.

Вставьте данные

Добавьте CSS, HTML, JSON или другой текст. Ничего не загружается на сервер.

Запустите инструмент

Нажмите «Конвертировать» или «Запустить». Результат появится сразу.

Проверьте результат

Просмотрите код и заметки перед использованием.

Скопируйте и вставьте

Скопируйте вывод и вставьте его в проект.

Об этом инструменте

Инструмент расставляет отступы в HTML, чтобы вложенность элементов была видна сразу: это удобно перед конвертацией стилей или проверкой ориентиров доступности. Невалидную разметку он не исправляет, валидатор всё равно нужен.

Пример

В примере компактный hero-блок, записанный одной строкой.

Ввод

<section class="hero"><h1>CSS to Tailwind</h1><p>Convert utilities in the browser.</p><a href="/">Open</a></section>

Вывод

<section class="hero">
  <h1>CSS to Tailwind</h1>
  <p>Convert utilities in the browser.</p>
  <a href="/">Open</a>
</section>

Совет

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