# Tailwind классы в CSS

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

> Каноническая страница: https://elysiatools.com/ru/tools/tailwind-class-to-css-converter

- **Категория:** Development

- **Ключевые слова:** tailwind, tailwind в css, css-сниппет, утилитарные классы, tailwind playground, конвертер css, flex, grid, hover

## Обзор

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

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

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

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

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

## Входные данные

- **Классы Tailwind** (textarea): p-4 flex gap-2 hover:bg-blue-500/20 md:p-6 rounded-lg shadow-md
- **Селектор области** (select)

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

- При переносе отдельных компонентов или стилей из проекта на Tailwind CSS в классический проект на чистом CSS.
- При верстке HTML-шаблонов для писем (email), где использование полноценного фреймворка Tailwind невозможно.
- Для быстрого аудита и понимания того, какие именно CSS-свойства скрываются за конкретной комбинацией классов Tailwind.

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

- Введите или вставьте список классов Tailwind в текстовое поле ввода.
- Выберите желаемый селектор области (например, `.my-class` или `:root`) для группировки стилей.
- Инструмент сопоставит классы со встроенной таблицей правил и мгновенно сгенерирует эквивалентный CSS-код, включая медиа-запросы и псевдоклассы.

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

- Извлечение стилей из Tailwind-компонентов для использования в изолированных виджетах или сторонних CMS.
- Оптимизация стилей для email-рассылок, требующих чистого CSS без внешних библиотек.
- Обучение веб-разработке и быстрое изучение соответствия классов Tailwind стандартным свойствам CSS.

## Частые вопросы

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

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

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

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

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

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

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

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

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

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

## Связанные инструменты

- [Конвертер Markdown в PDF](https://elysiatools.com/ru/tools/markdown-to-pdf-converter): Преобразование файлов Markdown в PDF-документы с форматированием, подсветкой синтаксиса и стилями
- [Markdown в HTML Конвертер](https://elysiatools.com/ru/tools/markdown-to-html): Конвертирует текст Markdown в HTML с настраиваемыми опциями форматирования
- [HTML в Markdown Конвертер](https://elysiatools.com/ru/tools/html-to-markdown): Конвертирует HTML-контент в формат Markdown с настраиваемыми опциями конвертации
- [Объяснитель выражений Cron](https://elysiatools.com/ru/tools/cron-expression-explainer): Разбирает cron-выражение (5/6 полей или Quartz) в описание на естественном языке, разбивает по полям и выводит следующие N запусков в любой зоне IANA, с ИИ-объяснением
- [Карточка спеков Figma iOS Android pt dp sp (адаптивный дизайн)](https://elysiatools.com/ru/tools/figma-ios-android-pt-dp-sp-responsive-design-spec-card): Переводит px из Figma в правильные платформенные единицы и генерирует спеку для разработчиков: iOS pt (@1x/@2x/@3x с рендером px на каждый масштаб), Android dp/sp (таблица рендера mdpi…xxxhdpi и масштаб шрифта), web rem/vw со сниппетом clamp(); аудит минимальных сенсорных целей (44pt iOS / 48dp Android / 44px и 24px WCAG) с пометкой классов окон Material и брейкпоинтов Tailwind.
- [Просмотр Markdown](https://elysiatools.com/ru/tools/markdown-preview): Преобразует Markdown в HTML с подсветкой синтаксиса и настраиваемыми темами
- [Генератор Data URI](https://elysiatools.com/ru/tools/data-uri-generator): Преобразует файлы в Data URI (Base64 или процентное кодирование) для встраивания изображений, шрифтов и ресурсов прямо в HTML, CSS или Markdown
- [Список с отступами в ASCII-дерево](https://elysiatools.com/ru/tools/ascii-tree-from-indented-list): Превращает иерархический список с отступами (2/4 пробела или таб; префиксы -, *, 1. опциональны) в копируемое ASCII-дерево каталогов. Два стиля: Unicode-рамка и классический ASCII. Переключатели: полные направляющие линии, хвостовые пробелы, листья в скобках.

## Примеры

- [Примеры Tailwind CSS](https://elysiatools.com/ru/samples/tailwind-css): Примеры Tailwind CSS - CSS-фреймворк с утилитарно-первым подходом, адаптивным дизайном, компонентами и пользовательской конфигурацией
- [Примеры CSS-фреймворка Bulma](https://elysiatools.com/ru/samples/bulma): Примеры CSS-фреймворка Bulma, включая столбцы, компоненты, элементы управления формами, систему сетки и современные шаблоны дизайна на основе CSS
- [Примеры CSS-селекторов](https://elysiatools.com/ru/samples/css-selectors): Коллекция примеров CSS-селекторов для тестирования извлечения и анализа
- [Образцы CSS](https://elysiatools.com/ru/samples/css-viewer-samples): Образцы файлов для браузерного CSS просмотрщика