Plak CSS en krijg Tailwind v4-classes per selector, of plak classes en krijg CSS terug. Hover, focus en breakpoints worden variants, en alles wat niet om te zetten is, wordt vermeld.
Plak gewone CSS-regels en deze converter geeft per selector een lijst Tailwind v4-classes terug, met benoemde classes waar het standaardthema een exacte match heeft en arbitrary values zoals w-[37px] waar dat niet zo is. Draai de richting om om een classlijst terug te zetten naar CSS. Selectors en regels die geen classes kunnen worden, worden vermeld en nooit stilletjes weggelaten.
Hoe gangbare declaraties worden omgezet (standaardthema Tailwind v4)
Een stylesheet met de hand naar Tailwind overzetten betekent tientallen classnamen opzoeken en uit het hoofd pixels naar rem omrekenen. Deze converter doet het opzoeken en het rekenwerk, laat zien welke classes arbitrary values zijn die u misschien naar de schaal wilt afronden, en vertelt u duidelijk welke regels in een CSS-bestand moeten blijven.
Tailwind v4 met het standaardthema. Spacing wordt berekend vanuit de --spacing-waarde van 0.25rem, radiusnamen volgen de v4-schaal (rounded-xs is 2px, rounded-sm 4px, rounded-md 6px enzovoort), en breakpoints gebruiken de rem-waarden van v4.
Een benoemde class wordt alleen gebruikt als die precies dezelfde waarde geeft. Kleuren worden altijd arbitrary values, omdat een hexcode zelden exact op een tint uit het palet valt, en lettergroottes blijven arbitrary omdat benoemde tekstgroottes ook een regelhoogte instellen.
Selectors met descendants, siblings of attributen, media queries die niet uit één enkele min-width bestaan, keyframes en andere at-rules, en custom properties. Die verschijnen in de lijst met niet omgezette regels, zodat u ze naar uw CSS-bestand kunt verplaatsen.
Classes uit de tabel van de converter, arbitrary values en arbitrary properties komen exact terug, met spacing als rem-waarden die uitgaan van de standaard --spacing. Kleurnamen uit het thema zoals bg-blue-500 en vooraf ingestelde schaduwen staan niet in de tabel en worden als overgeslagen vermeld in plaats van gegokt.
Nee, maar de syntax voor arbitrary properties, [property:value], dekt alles waar Tailwind geen utility voor heeft, zoals [mask-type:luminance]. Deze converter gebruikt die voor elke property die hij niet herkent.
Een regel voor een kaart met een hover-toestand en een breakpoint voor tablets.
Elke declaratie wordt een class; de hover- en breakpointregels worden classes met prefix op hetzelfde element.
Plak CSS-regels of een lijst Tailwind-classes. Arbitrary values worden gemarkeerd en alles wat niet kan worden omgezet, staat onder het resultaat.
Richting van de omzetting
CSS naar Tailwind
Tailwind naar CSS
Uw CSS
Uw Tailwind-classes
Selector voor de CSS-output
Resultaat
Alles kopiëren
Classes kopiëren
Gemarkeerde classes zijn arbitrary values: {n} van {t}.
Niet omgezet ({n})
Alles is omgezet.
Nog niets om om te zetten.
selector heeft een class op een ander element of een custom variant nodig
media query heeft geen enkel breakpoint
at-rule blijft in CSS
custom property, houd in CSS of @theme
staat niet in de tabel van deze converter
Gratis beginnen · Geen creditcard nodig