Dokáže převést CSS na Tailwind?

Ano. Před exportem nejbližšího seznamu tříd Tailwind vložte blok deklarace CSS a Tailfind jej použije na ukázkový prvek.

Jsou vlastní hodnoty zachovány?

Tailfind mapuje hodnoty na výchozí nástroje Tailwind, když je to možné, a udržuje jiné než výchozí hodnoty viditelné jako libovolné nástroje namísto jejich skrývání.

Mám vložit celý stylesheet?

Převodník CSS je určen pro deklarační bloky. Převodník HTML/CSS použijte, když potřebujete selektory, třídy, vnořený markup nebo úplnější stylesheet.

Převodník CSS na Tailwind

Vložte blok deklarace CSS a převeďte vykreslený vzorek na třídy Tailwind, které můžete zkopírovat do komponent.

CSS

Tailwind v4

Zatím žádný výstup

Vygenerovaný výstup Tailwind se zde objeví automaticky.

Pixelově přesný převodník Tailwind

Převeďte CSS na čisté třídy Tailwind

Převod podle deklarací: Vložte blok deklarace CSS a Tailfind jej použije na ukázkový prvek před převedením vykresleného výsledku na znovu použitelné třídy Tailwind.
Preferuje výchozí utility: Přenosné výchozí hodnoty Tailwind zůstávají zachovány, když hodnoty deklarací odpovídají škále frameworku.
Fallback na arbitrární hodnoty: Nevýchozí hodnoty se stanou explicitními arbitrárními utility, takže vlastní pixely, barvy, stíny a časování lze snadno zkontrolovat.
Výstup bezpečný pro rozložení: Mezery, velikost, display, grid, flex, rámečky, stíny a typografie jsou mapovány z vykresleného vzorku.
Rychlá extrakce třídy: Výstupem je zaměřený seznam tříd Tailwind, připravený ke zkopírování do komponenty, rychlého ověření tokenů nebo úklidu stylů.
Dobré pro audity: Použijte jej k nahrazení jednorázových bloků CSS, inline stylových experimentů a prototypů designového systému přehlednějšími utility Tailwind.

Průvodce převodníkem CSS

Převeďte CSS deklarace na třídy Tailwind

Převodník CSS na Tailwind změní blok deklarací na nejbližší přenosné třídy Tailwind. Hodí se pro jednorázové design tokeny, čištění inline stylů a přesun menších CSS úryvků do markupu komponent.

Tailfind aplikuje deklarace na ukázkový prvek před převodem, takže hodnoty rozvržení, mezer, barev, ohraničení, stínů, typografie a velikosti jsou interpretovány stejnou cestou vykreslování prohlížeče, kterou používá rozšíření.

Použijte jej k převodu vlastností CSS na třídy Tailwind, ke kontrole, které hodnoty se mapují na výchozí škálu Tailwind, a k zachování nevýchozích hodnot explicitně jako arbitrární utility.

Dokáže převést CSS na Tailwind?: Ano. Před exportem nejbližšího seznamu tříd Tailwind vložte blok deklarace CSS a Tailfind jej použije na ukázkový prvek.
Jsou vlastní hodnoty zachovány?: Tailfind mapuje hodnoty na výchozí nástroje Tailwind, když je to možné, a udržuje jiné než výchozí hodnoty viditelné jako libovolné nástroje namísto jejich skrývání.
Mám vložit celý stylesheet?: Převodník CSS je určen pro deklarační bloky. Převodník HTML/CSS použijte, když potřebujete selektory, třídy, vnořený markup nebo úplnější stylesheet.

Přeskočit ruční převod

Převeďte jakoukoli živou stránku
do čistého Tailwind CSS

Tailfind přináší převodník do vašeho prohlížeče, takže můžete zachytit produkční uživatelské rozhraní přímo ze stránky, kterou si prohlížíte.

Více informací

Stáhnout