Tailwind CSS Converter
Convert raw CSS to Tailwind CSS utility classes and vice versa. Supports margin, padding, display, flex, grid, colors, typography, borders, and more.
CSS Input
Tailwind Output
Paste CSS on the left to generate Tailwind classes
Tailwind CSS Converter
Convert raw CSS to Tailwind CSS utility classes and vice versa. Supports margin, padding, display, flex, grid, colors, typography, borders, and more.
Features
- Миттєво конвертуйте властивості CSS в утилітарні класи Tailwind CSS
- Зворотний режим: конвертуйте класи Tailwind назад у звичайний CSS
- Підтримує понад 50 властивостей CSS, включаючи flex, grid, відступи, кольори та типографіку
- Обробляє довільні значення з використанням квадратних дужок Tailwind
- Розпізнає стандартну шкалу відступів, палітру кольорів та breakpoints Tailwind
- Виділяє незіставлені властивості, щоб ви знали, що потребує ручної конвертації
How to use
- Вставте ваш CSS-код у ліву панель або натисніть Приклад для прикладу CSS.
- Перегляньте згенеровані класи Tailwind миттєво на правій панелі.
- Натисніть Поміняти для переходу у зворотний режим і конвертації класів Tailwind назад у CSS.
FAQ
Які властивості CSS підтримуються?
Конвертер підтримує понад 50 поширених властивостей CSS, включаючи display, position, flex/grid-розмітку, margin, padding, width, height, font-size, font-weight, кольори, border, border-radius, opacity, box-shadow, z-index, overflow, cursor та багато інших. Непідтримувані властивості перераховуються як незіставлені коментарі.
Чи можу я конвертувати класи Tailwind назад у CSS?
Так. Натисніть кнопку Поміняти для переходу у зворотний режим. Введіть утилітарні класи Tailwind через пробіл, і інструмент згенерує еквівалентні CSS-оголошення, обгорнуті в селектор .element.
Як зіставляються кольори?
Конвертер розпізнає стандартну палітру кольорів Tailwind (slate, gray, red, blue, green, yellow, purple) у різних відтінках (50-900). Hex-значення як #3b82f6 зіставляються з blue-500. Нерозпізнані кольори використовують синтаксис довільних значень Tailwind, напр. bg-[#custom].
Чи обробляє він скорочені властивості CSS?
Так. Скорочені властивості як margin, padding та border аналізуються і конвертуються в їх Tailwind-еквіваленти. Наприклад, margin: 8px 16px стає my-2 mx-4, а border: 1px solid #ccc стає border border-solid border-[#ccc].
Чи надсилаються мої дані CSS на сервер?
Ні. Уся конвертація відбувається повністю у вашому браузері з використанням клієнтського JavaScript. Ваш CSS-код ніколи не залишає ваш пристрій, що робить цей інструмент повністю приватним та безпечним для використання з пропрієтарним кодом.
Що відбувається з непідтримуваними властивостями?
Властивості, які не можуть бути зіставлені зі стандартним класом Tailwind, перераховуються як коментарі у виводі. Це дозволяє побачити, які саме властивості потребують ручної обробки або користувацької конфігурації Tailwind.
Чи підтримуються довільні значення Tailwind?
Так. Коли значення CSS не збігається зі стандартною шкалою Tailwind, конвертер використовує синтаксис довільних значень, наприклад p-[13px] або text-[22px]. У зворотному режимі довільні значення як w-[200px] коректно перетворюються назад у width: 200px.