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

Конвертер CSS в Tailwind

Конвертируйте CSS-свойства в утилитарные классы Tailwind CSS. Поддержка layout, отступов, типографики, цветов и многого другого. Просмотр несопоставленных свойств. Бесплатно, 100% в вашем браузере.

Что такое конвертация CSS в Tailwind?

Tailwind CSS — это CSS-фреймворк, основанный на утилитарном подходе, где элементы стилизуются с помощью заранее определённых классов, таких как flex, p-4 и text-center, вместо написания собственного CSS. Этот инструмент сопоставляет распространённые CSS-свойства с их эквивалентами в Tailwind. Вставьте CSS-объявления и получите соответствующую строку классов Tailwind. Свойства без прямого соответствия показываются отдельно.

Поддерживаемые конвертации

Макет — display, position, flex, grid свойства. Отступы — padding, margin, gap, width, height со шкалой отступов Tailwind. Типографика — font-size, font-weight, text-align, text-transform, letter-spacing, line-height. Цвета — background-color, color, border-color с hex-значениями (как произвольные значения). Границы — border-radius, сопоставленный со шкалой rounded Tailwind. Эффекты — opacity, cursor, overflow, visibility, white-space. Произвольные значения — hex-цвета конвертируются в синтаксис произвольных значений Tailwind, например bg-[#3b82f6].

Конфиденциальность

Вся конвертация выполняется на 100% в вашем браузере. Никакие данные не отправляются на сервер.