Поддерживает ли конвертер адаптивные префиксы вроде md: или lg:?

Да, адаптивные префиксы преобразуются в соответствующие медиа-запросы @media (min-width: ...).

Как обрабатываются состояния наведения (hover) и фокуса (focus)?

Они автоматически выделяются в отдельные блоки стилей с псевдоклассами :hover и :focus.

Работает ли синтаксис прозрачности цвета через косую черту?

Да, синтаксис вида bg-blue-500/20 успешно преобразуется в стандартный формат цвета rgba().

Можно ли использовать произвольные значения в квадратных скобках?

Инструмент использует статическую таблицу правил, поэтому сложные произвольные значения вроде w-[327px] обрабатываются с ограничениями.

Требуется ли установка Node.js или компилятора Tailwind для работы?

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

Elysia Tools

Навигация

Development

Tailwind классы в CSS

Преобразует классы Tailwind (напр. p-4 flex gap-2 hover:bg-blue-500/20 md:p-6) в эквивалентный CSS для проектов без Tailwind. Покрывает spacing, flex, grid, цвета, типографику, рамки, эффекты, трансформации, переходы и адаптивные/состояния.

Детали

С чем помогает этот инструмент

Посмотрите точно, что генерирует класс Tailwind — затем скопируйте чистый CSS в любой проект.

Зачем нужен. Tailwind удобен, но иногда нужен сырой CSS: проект без Tailwind, email-шаблон, аудит дизайн-токенов. Вставьте классы и сразу получите эквивалентный CSS.

Покрытие. Движок правил обрабатывает самые частые утилиты: layout (flex/grid/gap), spacing, размеры, цвета, типографику, рамки, эффекты, трансформации, переходы и адаптивные/состояния варианты.

Модификатор прозрачности. Синтаксис bg-blue-500/20 раскрывается в rgba().

Ограничения. Это статическая таблица правил, а не полный JIT-движок. Для 100% точности используйте официальный компилятор Tailwind.

Запуск

Запустить этот инструмент

Заполните форму, запустите инструмент и посмотрите результат на этой же странице.

Подготовленные примеры запуска

Нажмите пример, чтобы автоматически заполнить форму. Файлы по-прежнему нужно загрузить.

2 примеров

Классы карточки

Типичная карточка: flex-вёрстка, отступы, gap, фон при наведении, адаптивный padding, скругление и тень.

<div class="tw-root">8 classes recognized. Outputs .my-class { display:flex; gap:1rem; ... } plus a :hover block and an @media (min-width:768px) block.</div>

Кнопка с состоянием и модификатором прозрачности

Показывает, как синтаксис bg-blue-500/75 раскрывается в rgba() и варианты hover/focus.

<div class="tw-root">7 classes recognized. bg-blue-500/75 expands to rgba(59,130,246,0.75). Outputs .btn plus .btn:hover and .btn:focus blocks.</div>

Ввод

Заполните нужные поля и запустите инструмент.

2 параметров

СодержимоеВставьте или введите основные значения.1

Классы TailwindtextareaОбязательно

НастройкиНастройте форматы, диапазоны, числа и режимы.1

Селектор областиselectНеобязательно

Результат

Готово к запуску

После запуска здесь появятся файлы, текст, структурированные данные или потоковый вывод.

Примеры

Примеры для этого инструмента

Связано

Tailwind классы в CSS

С чем помогает этот инструмент

Запустить этот инструмент

Подготовленные примеры запуска

Ввод

Результат

Примеры для этого инструмента

Продолжить с похожими инструментами и темами

Подготовленные примеры запуска

Ввод

Результат

Узнайте, когда использовать этот инструмент, что он поддерживает и как его применяют пользователи.

Ключевые факты

Обзор

Когда использовать

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

Сценарии использования

Примеры

1. Конвертация стилей адаптивной карточки

2. Стилизация интерактивной кнопки

FAQ

Примеры Tailwind CSS

Примеры CSS-фреймворка Bulma

Примеры CSS-селекторов

Образцы CSS

Конвертер Markdown в PDF

Markdown в HTML Конвертер

HTML в Markdown Конвертер

Объяснитель выражений Cron

Инструменты экспорта, OCR и конвертации Markdown

Инструменты для написания и публикации Markdown

Инструменты для написания, извлечения и публикации документации

Инструменты кодирования и конвертации аудио