Tailwind CSS использует утилитарные классы, такие как flex, p-4, text-lg и bg-blue-500, которые соответствуют стандартным CSS свойствам. При миграции от Tailwind, отладке стилей или изучении того, что делает каждый класс, конвертация их в обычный CSS бесценна. Этот инструмент берет имена классов Tailwind и выводит эквивалентные CSS свойства.
display: flex; align-items: center; gap: 1rem; padding: 1.5rem; border-radius: 0.75rem; box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); background-image: linear-gradient(to right, var(--tw-gradient-stops)); --tw-gradient-from: #a855f7 var(--tw-gradient-from-position); --tw-gradient-to: #a855f700 var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); --tw-gradient-to: #ec4899 var(--tw-gradient-to-position); color: #ffffff; font-weight: 600; backdrop-filter: blur(12px);
Вставьте утилитарные классы Tailwind CSS (например, 'flex items-center gap-4 p-6 bg-blue-500 rounded-lg shadow-md') в поле ввода. Инструмент конвертирует каждый класс в его эквивалентное CSS свойство и значение. Вывод показывает чистый набор CSS правил, который вы можете использовать в проектах с обычным CSS. Неизвестные или пользовательские классы помечаются комментарием. Также обрабатываются варианты hover, responsive и dark mode.
Конвертация Tailwind-в-CSS полезна при миграции проектов от Tailwind CSS к обычному CSS или CSS Modules, понимании того, что на самом деле делают утилитарные классы Tailwind (инструмент обучения), создании версий компонентов, построенных на Tailwind, только на CSS для проектов без Tailwind, отладке стилей Tailwind путем просмотра базового CSS, документировании стилей компонентов в независимом от фреймворка формате и построении дизайн-токенов из конфигураций Tailwind.
Конвертер поддерживает всеобъемлющий словарь соответствий утилитарных классов Tailwind и их CSS эквивалентов. Утилиты отступов (p-4, m-2, gap-3) используют шкалу отступов Tailwind по умолчанию, где каждая единица = 0.25rem (4px при базе 16px). Цветовые утилиты (bg-blue-500, text-gray-700) соответствуют цветовой палитре Tailwind по умолчанию. Адаптивные префиксы (sm:, md:, lg:) генерируют @media запросы с точками останова Tailwind по умолчанию (640px, 768px, 1024px). Инструмент покрывает наиболее часто используемые 300+ утилит Tailwind.
Tailwind CSS предоставляет утилитарные классы, каждый из которых применяет одно CSS свойство. Например, 'p-4' применяет padding: 1rem, 'flex' применяет display: flex, а 'text-blue-500' применяет цвет с определенным оттенком синего.
Инструмент покрывает распространенные утилиты Tailwind, включая отступы (p, m), размеры (w, h), типографику (text, font), цвета (bg, text, border), макет (flex, grid) и эффекты (shadow, opacity, rounded).
Полезно для: миграции проектов от Tailwind, понимания того, что делают классы Tailwind, создания CSS-запасных вариантов или использования компонентов, разработанных на Tailwind, в проектах без Tailwind.
Трансформируйте, форматируйте, генерируйте и кодируйте данные мгновенно. Приватно, быстро и всегда бесплатно.
Смотреть все инструменты