В этой статье
Что такое Tailwind CSS и зачем его конвертировать
Tailwind CSS — это CSS-фреймворк, основанный на утилитарных классах, который позволяет разработчикам стилизовать элементы, применяя небольшие одноцелевые классы непосредственно в HTML. Вместо написания пользовательских CSS-правил вы составляете стили инлайн, используя классы вроде flex, p-4, text-blue-500 и rounded-lg.
Хотя Tailwind ускоряет разработку, бывают ситуации, когда нужен эквивалентный чистый CSS. Возможно, вы уходите с Tailwind, отлаживаете конкретный стиль, делитесь кодом с командой, которая не использует этот фреймворк, или изучаете, что именно генерирует каждый утилитарный класс. Конвертация Tailwind в ванильный CSS мгновенно устраняет этот пробел.
Как работает конвертер Tailwind в CSS
Конвертер принимает утилитарные классы Tailwind и выводит эквивалентные стандартные CSS-свойства и значения.
- Вставьте классы — введите любую строку классов Tailwind, например flex items-center gap-4 p-6 bg-white rounded-xl shadow-md
- Посмотрите CSS-вывод — каждый утилитарный класс преобразуется в соответствующее CSS-объявление, сгруппированное в единый блок правил, который можно использовать где угодно
- Обработка адаптивных и интерактивных вариантов — префиксы вроде md:, hover: и dark: преобразуются в соответствующие медиазапросы и псевдоселекторы в выводе
- Скопируйте или скачайте — возьмите чистый CSS и вставьте его в вашу таблицу стилей, компонент или инструмент дизайна, ожидающий стандартный синтаксис CSS
Попробуйте бесплатно — без регистрации
Открыть конвертер Tailwind в CSS →Когда использовать конвертацию Tailwind в CSS
Конвертация утилитарных классов Tailwind в стандартный CSS полезна в нескольких распространённых сценариях разработки и дизайна.
- Миграция фреймворка — извлеките точные CSS-правила из классов Tailwind при переводе проекта на чистый CSS, Sass или другой подход к стилизации
- Изучение CSS — посмотрите, чему соответствует каждый утилитарный класс Tailwind, что формирует более глубокое понимание спецификации CSS
- Документация дизайн-системы — экспортируйте стандартный CSS из прототипов на основе Tailwind, чтобы дизайнеры и разработчики, не использующие Tailwind, могли обращаться к точным значениям
Часто задаваемые вопросы
Обрабатывает ли конвертер все классы Tailwind?
Конвертер поддерживает основной набор утилитарных классов Tailwind CSS, включая компоновку, отступы, типографику, цвета, границы, тени, переходы и трансформации. Пользовательские классы, определённые в вашем файле tailwind.config или через плагины, не распознаются, поскольку конвертер работает со спецификацией Tailwind по умолчанию.
Конвертируются ли адаптивные брейкпоинты?
Да. Адаптивные префиксы, такие как sm:, md:, lg: и xl:, преобразуются в соответствующие CSS-медиазапросы с использованием значений брейкпоинтов Tailwind по умолчанию. Вывод оборачивает адаптивные стили в корректно структурированные блоки медиазапросов.
Можно ли конвертировать CSS обратно в Tailwind?
Этот инструмент выполняет конвертацию в одном направлении — из Tailwind в CSS. Обратная конвертация значительно сложнее, потому что несколько комбинаций CSS-свойств могут соответствовать одному и тому же утилитарному классу Tailwind, а пользовательские значения могут не иметь точных утилитарных эквивалентов. Для конвертации CSS в Tailwind обычно требуются специализированные инструменты или ручное сопоставление.