Конвертировать CSS в Tailwind Онлайн

Конвертируйте традиционный CSS в утилитарные классы Tailwind. Бесплатно, в браузере.

CSS

Tailwind

/* .container */
class="flex text-center p-[1rem] bg-[#f0f0f0] cursor-pointer"
/* font-weight: bold */

Processed in your browser

Для чего это нужно

Переходите на utility-first с Tailwind

Совместим с Tailwind v3 и v4

Сгенерированные классы совместимы с современными версиями Tailwind CSS и движком JIT для произвольных значений.

100% приватно

Ваш CSS обрабатывается в браузере. Никогда не отправляется на серверы. Идеально для конвертации стилей собственных проектов.

Точные соответствия

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

Мгновенно

Конвертация в реальном времени. Вставьте CSS — и классы Tailwind появятся немедленно.

Как это работает

Три шага — никаких сложностей

Вставьте ваш CSS

Введите CSS-блок, который нужно конвертировать. Это может быть селектор с его свойствами или несколько CSS-правил.

Получите эквивалентные классы Tailwind

Инструмент сопоставляет каждое CSS-свойство с ближайшим утилитарным классом Tailwind. Свойства без прямого аналога показываются как произвольные значения в синтаксисе скобок.

Скопируйте классы и примените в HTML

Скопируйте сгенерированные классы прямо в атрибут class вашего HTML-элемента. Совместимо с Tailwind CSS v3 и v4.

FAQ

Остались вопросы?

Что такое Tailwind CSS?

Tailwind CSS — утилитарный CSS-фреймворк, созданный Адамом Уотаном и выпущенный в 2017 году. Вместо готовых CSS-компонентов, как в Bootstrap, Tailwind предоставляет низкоуровневые утилитарные классы (`flex`, `pt-4`, `text-gray-700`), которые составляются прямо в HTML. Это избавляет от необходимости писать пользовательский CSS для большинства стилей и обеспечивает единообразие дизайна.

Какие CSS-свойства можно конвертировать?

Инструмент конвертирует большинство распространённых CSS-свойств: layout (display, flexbox, grid, position), отступы (margin, padding), типографику (font-size, font-weight, line-height, color), фоны, границы, тени, прозрачность и другие. Свойства без точного аналога в Tailwind выражаются через синтаксис произвольных значений: `w-[123px]` или `bg-[#1a2b3c]`.

Что такое произвольные значения в скобках []?

Tailwind включает систему произвольных значений, позволяющую указывать любое CSS-значение в скобках: `w-[37px]`, `text-[#ff6600]`, `grid-cols-[1fr_2fr_1fr]`. Это означает, что любое CSS-свойство может быть выражено в Tailwind даже без предопределённого класса для конкретного значения. Произвольные значения компилируются движком JIT (Just-In-Time) Tailwind и включаются в итоговый CSS только при использовании.

Что насчёт адаптивных состояний и hover?

Инструмент конвертирует базовые CSS-свойства без вариантов состояний. Псевдоселекторы :hover, :focus, :active и медиазапросы выражаются в Tailwind с префиксами `hover:`, `focus:`, `md:`, `lg:`. Для CSS со сложными состояниями результат может служить отправной точкой, к которой вы вручную добавляете нужные префиксы вариантов.

Когда НЕ стоит конвертировать CSS в Tailwind?

Не стоит конвертировать, если CSS содержит сложные анимации с @keyframes, использует экспериментальные или вендорные свойства без поддержки Tailwind, если проект не использует Tailwind и его добавление стало бы серьёзным архитектурным изменением, или если CSS уже хорошо организован по методологии BEM или CSS Modules. Tailwind хорошо работает в новых проектах или при полном редизайне.