Реклама мешает? Идти Без рекламы Сегодня 

Конвертер классов Tailwind CSS в обычный CSS

РазработчикТекст

Реклама · УДАЛИТЬ?

ВХОД

Автоматический процесс

ВЫХОД

Клиентская сторона

Реклама · УДАЛИТЬ?

Гид

Конвертер классов Tailwind в простой CSS

Конвертер классов Tailwind CSS в обычный CSS

Вставьте строку классов Tailwind v3 и мгновенно получите соответствующее правило простого CSS. Каждый класс Tailwind расширяется до точного объявления CSS с правильными значениями rem, px и цветов из официальных дизайн-токенов — без предположений, без округления.

Полезно при миграции компонента Tailwind в обычный CSS, при необходимости проверить исходные объявления или при необходимости передачи ручно написанного CSS без этапа сборки Tailwind.

Как использовать

Вставьте свою строку классов Tailwind в поле ввода (например: flex items-center gap-4 p-6 bg-blue-500).
Опционально измените селектор — по умолчанию: .element.
Просмотрите сгенерированный CSS в панели вывода. Результирующие варианты (md:, lg:…) вложены в соответствующие @media запросы; варианты состояния (hover:, focus:…) генерируют собственные селекторы.
Скопируйте результат или сохраните его как файл .css файл.

Возможности

Полная шкала отступов — Все значения отступов, паддингов, зазоров, ширины и высоты Tailwind преобразуются в канонические значения в rem или px.
Полный цветовой палитр — Все 22 цветовых семейств с оттенками 50–950 отображаются в точных шестнадцатеричных кодах для текста, фона, границы, заполнения и обводки.
Результирующие варианты – sm:, md:, lg:, xl:и 2xl: выдаются как корректные @media (min-width: ...) блоки.
Варианты состояния – hover:, focus:, active:, disabled:, group-hover:, peer-focus:, dark:, before:, after: и другие превращаются в настоящие селекторы CSS или медиа-запросы.
Арбитрные значения — Синтаксис в квадратных скобках, например w-[37rem] или bg-[#abc123] передаётся в соответствующее объявление.
Отрицательные утилиты — Формы с ведущим дефисом, такие как -mt-4 выдают правильные отрицательные значения в rem.
Пользовательский селектор — Выберите любой селектор для обертывания выходного правила (.card, #hero, и т. д.).
Копирование и загрузка — Один клик для копирования CSS или сохранения в файл.

Реклама · УДАЛИТЬ?

 Часто задаваемые вопросы

Какова разница между утилитарным CSS и компонентным CSS?

Утилитарный CSS предоставляет одноразовые классы (например, flex, p-4, text-center), каждый из которых соответствует одному объявления CSS, поэтому стилизация происходит непосредственно в разметке. Компонентный CSS объединяет множество объявлений под семантическими именами классов (например, .card, .button), которые описывают элемент, а не его визуальные характеристики. Утилитарный подход обменивает более крупную разметку на предсказуемые и повторно используемые атомы; компонентный подход обменивает более крупные стилистические файлы на более высокие уровни абстракции.
Как связано масштабирование Tailwind с единицами rem?

Масштабирование по умолчанию Tailwind — это множитель от базы 0.25rem, где 1rem равен 16px в стандартном браузере. Следовательно, p-4 расширяется до padding: 1rem (16px), p-2 — до 0.5rem (8px), а p-6 — до 1.5rem (24px). Исключения — spacing-0 (0px) и spacing-px (1px), которые обходят единицу rem, чтобы вы могли размещать границы с точностью до пикселей или создавать минимальные зазоры без арифметических вычислений.
Почему результирующие утилитарные фреймворки используют запросы минимальной ширины по умолчанию?

Фреймворки, ориентированные на мобильные устройства, такие как Tailwind, используют запросы минимальной ширины, чтобы базовые стили применялись к наименьшему окну и постепенно улучшались на больших экранах. Это соответствует тому, как мобильные браузеры отображают содержимое до того, как они узнают окончательную структуру, избегает эффекта «неправильного стиля» при медленном соединении и позволяет каждому порогу переключения изменять только то, что изменилось — сохраняя добавление стилей вместо их удаления.