Конвертер Tailwind CSS
Конвертируйте обычный CSS в утилитарные классы Tailwind CSS и наоборот. Поддерживает margin, padding, display, flex, grid, цвета, типографику, границы и многое другое.
Ввод CSS
Вывод Tailwind
Вставьте CSS слева для генерации классов Tailwind
Конвертер Tailwind CSS
Конвертируйте обычный CSS в утилитарные классы Tailwind CSS и наоборот. Поддерживает margin, padding, display, flex, grid, цвета, типографику, границы и многое другое.
Возможности
- Мгновенно конвертируйте свойства CSS в утилитарные классы Tailwind CSS
- Обратный режим: конвертируйте классы Tailwind обратно в обычный CSS
- Поддерживает более 50 свойств CSS, включая flex, grid, отступы, цвета и типографику
- Обрабатывает произвольные значения с использованием квадратных скобок Tailwind
- Распознаёт стандартную шкалу отступов, цветовую палитру и breakpoints Tailwind
- Выделяет несопоставленные свойства, чтобы вы знали, что требует ручной конвертации
Как использовать
- Вставьте ваш CSS-код в левую панель или нажмите Пример для примера CSS.
- Просмотрите сгенерированные классы Tailwind мгновенно на правой панели.
- Нажмите Поменять для перехода в обратный режим и конвертации классов Tailwind обратно в CSS.
Вопросы и ответы
Какие свойства CSS поддерживаются?
Конвертер поддерживает более 50 распространённых свойств CSS, включая display, position, flex/grid-разметку, margin, padding, width, height, font-size, font-weight, цвета, border, border-radius, opacity, box-shadow, z-index, overflow, cursor и многие другие. Неподдерживаемые свойства перечисляются как несопоставленные комментарии.
Могу ли я конвертировать классы Tailwind обратно в CSS?
Да. Нажмите кнопку Поменять для перехода в обратный режим. Введите утилитарные классы Tailwind через пробел, и инструмент сгенерирует эквивалентные CSS-объявления, обёрнутые в селектор .element.
Как сопоставляются цвета?
Конвертер распознаёт стандартную цветовую палитру Tailwind (slate, gray, red, blue, green, yellow, purple) в различных оттенках (50-900). Hex-значения вроде #3b82f6 сопоставляются с blue-500. Нераспознанные цвета используют синтаксис произвольных значений Tailwind, напр. bg-[#custom].
Обрабатывает ли он сокращённые свойства CSS?
Да. Сокращённые свойства вроде margin, padding и border анализируются и конвертируются в их Tailwind-эквиваленты. Например, margin: 8px 16px становится my-2 mx-4, а border: 1px solid #ccc становится border border-solid border-[#ccc].
Отправляются ли мои данные CSS на сервер?
Нет. Вся конвертация происходит полностью в вашем браузере с использованием клиентского JavaScript. Ваш CSS-код никогда не покидает ваше устройство, что делает этот инструмент полностью приватным и безопасным для использования с проприетарным кодом.
Что происходит с неподдерживаемыми свойствами?
Свойства, которые не могут быть сопоставлены со стандартным классом Tailwind, перечисляются как комментарии в выводе. Это позволяет увидеть, какие именно свойства требуют ручной обработки или пользовательской конфигурации Tailwind.
Поддерживаются ли произвольные значения Tailwind?
Да. Когда значение CSS не совпадает со стандартной шкалой Tailwind, конвертер использует синтаксис произвольных значений, например p-[13px] или text-[22px]. В обратном режиме произвольные значения вроде w-[200px] корректно преобразуются обратно в width: 200px.