Может ли он конвертировать CSS в Tailwind?

Да. Вставьте блок объявлений CSS, и Tailfind применит его к образцу элемента перед экспортом ближайшего списка классов Tailwind.

Сохраняются ли пользовательские значения?

Tailfind сопоставляет значения со стандартными классами Tailwind, когда это возможно, а нестандартные значения оставляет видимыми как произвольные классы вместо того, чтобы скрывать их.

Должен ли я вставить полную таблицу стилей?

Конвертер CSS предназначен для блоков объявлений. Используйте конвертер HTML/CSS, когда необходимы селекторы, классы, вложенная разметка или более полная таблица стилей.

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

Вставьте блок объявления CSS и преобразуйте визуализированный образец в классы Tailwind, которые можно скопировать в компоненты.

CSS

Tailwind v4

Выходных данных пока нет

Здесь автоматически появляется сгенерированный выходной файл Tailwind.

Пиксельный конвертер Tailwind

Преобразование CSS в чистые классы Tailwind

Преобразование от деклараций: Вставьте блок CSS-деклараций, и Tailfind применит его к тестовому элементу перед преобразованием отрендеренного результата в reusable-классы Tailwind.
Приоритет стандартных классов: Переносимые стандартные значения Tailwind сохраняются, когда значения деклараций совпадают со шкалой фреймворка.
Произвольные значения без потерь: Нестандартные значения становятся явными произвольными классами, поэтому собственные пиксели, цвета, тени и timing-значения легко проверить.
Безопасный вывод: Интервалы, размеры, отображение, сетка, гибкость, границы, тени и типографика отображаются на основе визуализированного образца.
Быстрое извлечение классов: На выходе получается сфокусированный список классов Tailwind, готовый для компонента, проверки токенов или этапа очистки.
Хорошо для аудитов: Используйте его, чтобы заменить одноразовые CSS-блоки, inline-эксперименты и прототипы дизайн-систем более понятными классами Tailwind.

Руководство по конвертеру CSS

Преобразуйте CSS-декларации в классы Tailwind

Конвертер CSS в Tailwind превращает блок деклараций в ближайшие переносимые классы Tailwind. Это удобно для разовых design tokens, очистки inline-стилей и переноса небольших CSS-фрагментов в разметку компонентов.

Tailfind применяет декларации к тестовому элементу перед преобразованием, поэтому layout, отступы, цвета, рамки, тени, типографика и размеры интерпретируются через тот же браузерный рендеринг, что и в расширении.

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

Может ли он конвертировать CSS в Tailwind?: Да. Вставьте блок объявлений CSS, и Tailfind применит его к образцу элемента перед экспортом ближайшего списка классов Tailwind.
Сохраняются ли пользовательские значения?: Tailfind сопоставляет значения со стандартными классами Tailwind, когда это возможно, а нестандартные значения оставляет видимыми как произвольные классы вместо того, чтобы скрывать их.
Должен ли я вставить полную таблицу стилей?: Конвертер CSS предназначен для блоков объявлений. Используйте конвертер HTML/CSS, когда необходимы селекторы, классы, вложенная разметка или более полная таблица стилей.

Без ручной конвертации

Преобразуйте любую страницу из браузера в чистый Tailwind CSS

Tailfind переносит конвертер в браузер, чтобы вы могли захватывать production-интерфейс прямо со страницы, которую просматриваете.

Подробнее

Скачать