Чи може Tailfind перетворити CSS на Tailwind?

Так. Вставте блок CSS-декларацій, і Tailfind застосує його до тестового елемента перед експортом найближчого списку класів Tailwind.

Чи зберігаються спеціальні значення?

Tailfind зіставляє значення зі стандартними класами Tailwind, коли це можливо, і зберігає нестандартні значення видимими як довільні класи замість того, щоб приховувати їх.

Чи варто вставляти повну таблицю стилів?

Конвертер CSS призначений для блоків декларацій. Використовуйте конвертер HTML/CSS, коли потрібні селектори, класи, вкладена розмітка або більш повна таблиця стилів.

Конвертер CSS у Tailwind

Вставте блок оголошення CSS і перетворіть відрендерений зразок у класи Tailwind, які можна скопіювати в компоненти.

CSS

Tailwind v4

Виведення ще немає

Згенерований вихід Tailwind з’являється тут автоматично.

Ідеальний для пікселів конвертер Tailwind

Перетворіть CSS на чисті класи Tailwind

Перетворення від декларацій: Вставте блок оголошення CSS, і Tailfind застосує його до зразка елемента перед перетворенням візуалізованого результату в повторно використовувані класи Tailwind.
Пріоритет стандартних класів: Переносні стандартні значення Tailwind зберігаються, коли значення декларацій відповідають шкалі фреймворку.
Довільні значення без втрат: Нестандартні значення стають явними довільними класами, щоб власні пікселі, кольори, тіні та timing-значення було легко перевірити.
Безпечний вихід: Інтервали, розміри, відображення, сітка, гнучкість, рамки, тіні та типографіка зіставляються з візуалізованого зразка.
Швидке вилучення класів: На виході ви отримуєте сфокусований список класів Tailwind, готовий для компонента, перевірки токенів або етапу очищення.
Добре підходить для аудиту: Використовуйте його, щоб замінити одноразові CSS-блоки, inline-експерименти та прототипи дизайн-систем зрозумілішими класами Tailwind.

Посібник з CSS-конвертера

Перетворіть CSS-декларації на класи Tailwind

Конвертер CSS у Tailwind перетворює блок декларацій на найближчі переносні класи Tailwind. Це корисно для разових design tokens, очищення inline-стилів і перенесення невеликих CSS-фрагментів у розмітку компонентів.

Tailfind застосовує оголошення до зразка елемента перед перетворенням, тому значення макета, інтервалу, кольору, рамки, тіні, типографіки та розміру інтерпретуються через той самий шлях візуалізації браузера, який використовується розширенням.

Використовуйте його, щоб перетворювати CSS-властивості на класи Tailwind, перевіряти збіги зі стандартною шкалою Tailwind і явно зберігати нестандартні значення як довільні класи.

Чи може Tailfind перетворити CSS на Tailwind?: Так. Вставте блок CSS-декларацій, і Tailfind застосує його до тестового елемента перед експортом найближчого списку класів Tailwind.
Чи зберігаються спеціальні значення?: Tailfind зіставляє значення зі стандартними класами Tailwind, коли це можливо, і зберігає нестандартні значення видимими як довільні класи замість того, щоб приховувати їх.
Чи варто вставляти повну таблицю стилів?: Конвертер CSS призначений для блоків декларацій. Використовуйте конвертер HTML/CSS, коли потрібні селектори, класи, вкладена розмітка або більш повна таблиця стилів.

Пропустити ручне перетворення

Перетворити будь-яку живу сторінку на чистий Tailwind CSS

Tailfind переносить конвертер у ваш браузер, тож ви можете захоплювати робочий інтерфейс безпосередньо зі сторінки, яку ви переглядаєте.

Більше інформації

Завантажити