In dit artikel
Wat is Tailwind CSS en waarom het converteren
Tailwind CSS is een utility-first CSS-framework waarmee ontwikkelaars elementen opmaken door kleine klassen met een specifiek doel direct in HTML toe te passen. In plaats van aangepaste CSS-regels te schrijven, stelt u stijlen inline samen met klassenamen zoals flex, p-4, text-blue-500 en rounded-lg.
Hoewel Tailwind de ontwikkeling versnelt, zijn er situaties waarin u de equivalente gewone CSS nodig hebt. Misschien migreert u weg van Tailwind, debugt u een specifieke stijl, deelt u code met een team dat het framework niet gebruikt, of leert u wat elke utility-klasse precies produceert. Het converteren van Tailwind naar gewone CSS overbrugt die kloof direct.
Hoe de Tailwind-naar-CSS-converter werkt
De converter neemt Tailwind utility-klassen en geeft de equivalente standaard CSS-eigenschappen en -waarden weer.
- Plak uw klassen — voer een willekeurige Tailwind-klassenreeks in zoals flex items-center gap-4 p-6 bg-white rounded-xl shadow-md
- Bekijk de CSS-uitvoer — elke utility wordt omgezet naar de corresponderende CSS-declaratie, gegroepeerd in één regelblok dat u overal kunt gebruiken
- Verwerk responsieve en state-varianten — voorvoegsels zoals md:, hover: en dark: worden omgezet naar de juiste media queries en pseudo-selectors in de uitvoer
- Kopieer of download — pak de gewone CSS en plak deze in uw stylesheet, component of ontwerptool die standaard CSS-syntax verwacht
Probeer gratis — geen aanmelding vereist
Open de Tailwind-naar-CSS-converter →Wanneer Tailwind-naar-CSS-conversie gebruiken
Het converteren van Tailwind-utilities naar standaard CSS is nuttig in verschillende veelvoorkomende ontwikkel- en ontwerpscenario’s.
- Framework-migratie — haal de exacte CSS-regels uit Tailwind-klassen wanneer u een project verplaatst naar gewone CSS, Sass of een andere stylingaanpak
- CSS leren — zie waar elke Tailwind utility-klasse achter de schermen naar verwijst, wat een dieper begrip van de CSS-specificatie opbouwt
- Documentatie van het ontwerpsysteem — exporteer standaard CSS vanuit Tailwind-gebaseerde prototypes zodat ontwerpers en niet-Tailwind-ontwikkelaars exacte waarden kunnen raadplegen
Veelgestelde vragen
Verwerkt de converter alle Tailwind-klassen?
De converter ondersteunt de kern van de Tailwind CSS utility-set, inclusief lay-out, afstanden, typografie, kleuren, randen, schaduwen, transities en transformaties. Aangepaste klassen die zijn gedefinieerd in uw tailwind.config-bestand of via plug-ins worden niet herkend, omdat de converter werkt met de standaard Tailwind-specificatie.
Worden responsieve breakpoints geconverteerd?
Ja. Responsieve voorvoegsels zoals sm:, md:, lg: en xl: worden omgezet naar de juiste CSS media queries met de standaard Tailwind breakpoint-waarden. De uitvoer verpakt de responsieve stijlen in correct gestructureerde media query-blokken.
Kan ik CSS terug converteren naar Tailwind?
Deze tool converteert in één richting, van Tailwind naar CSS. Omgekeerde conversie is aanzienlijk moeilijker omdat meerdere CSS-eigenschapscombinaties naar dezelfde Tailwind-utility kunnen verwijzen en aangepaste waarden mogelijk geen exacte utility-equivalenten hebben. Voor CSS-naar-Tailwind-conversie zijn gespecialiseerde tools of handmatige toewijzing meestal nodig.