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

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

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

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

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

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

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

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

CSS

Tailwind v4

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

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

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

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

Преобразование от деклараций: Вставьте блок деклараций CSS, и Tailfind применит его к тестовому элементу перед преобразованием отрендеренного результата в переиспользуемые классы Tailwind.
Приоритет стандартных классов: Переносимые стандартные значения Tailwind сохраняются, когда значения деклараций совпадают со шкалой фреймворка.
Произвольные значения без потерь: Нестандартные значения становятся явными произвольными классами, поэтому собственные пиксели, цвета, тени и timing-значения легко проверить.
Вывод, безопасный для layout: Отступы, размеры, display, grid, flex, границы, тени и типографика сопоставляются по отрендеренному образцу.
Быстрое извлечение классов: На выходе получается сфокусированный список классов 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, когда необходимы селекторы, классы, вложенная разметка или более полный stylesheet.

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

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

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

Подробнее

Скачать