Tailwind CSS Konverterare
Konvertera rå CSS till Tailwind CSS utility-klasser och vice versa. Stöder margin, padding, display, flex, grid, färger, typografi, ramar och mer.
CSS-indata
Tailwind-utdata
Klistra in CSS till vänster för att generera Tailwind-klasser
Tailwind CSS Konverterare
Konvertera rå CSS till Tailwind CSS utility-klasser och vice versa. Stöder margin, padding, display, flex, grid, färger, typografi, ramar och mer.
Funktioner
- Konvertera CSS-egenskaper till Tailwind CSS utility-klasser direkt
- Omvänt läge: konvertera Tailwind-klasser tillbaka till rå CSS
- Stöder över 50 CSS-egenskaper inklusive flex, grid, avstånd, färger och typografi
- Hanterar godtyckliga värden med Tailwinds hakparentesnotation
- Känner igen Tailwinds standardavståndsskala, färgpalett och brytpunkter
- Markerar icke-mappade egenskaper så att du vet vad som behöver manuell konvertering
Så använder du
- Klistra in din CSS-kod i den vänstra panelen eller klicka på Exempel för exempel-CSS.
- Se de genererade Tailwind-klasserna direkt i den högra panelen.
- Klicka på Byt för att växla till omvänt läge och konvertera Tailwind-klasser tillbaka till CSS.
Vanliga frågor
Vilka CSS-egenskaper stöds?
Konverteraren stöder över 50 vanliga CSS-egenskaper inklusive display, position, flex/grid-layout, margin, padding, width, height, font-size, font-weight, färger, border, border-radius, opacity, box-shadow, z-index, overflow, cursor och många fler. Egenskaper som inte stöds listas som icke-mappade kommentarer.
Kan jag konvertera Tailwind-klasser tillbaka till CSS?
Ja. Klicka på knappen Byt för att växla till omvänt läge. Ange mellanrumsseparerade Tailwind utility-klasser, och verktyget genererar motsvarande CSS-deklarationer inpackade i en .element-selektor.
Hur mappas färger?
Konverteraren känner igen Tailwinds standardfärgpalett (slate, gray, red, blue, green, yellow, purple) i olika nyanser (50-900). Hex-värden som #3b82f6 mappas till blue-500. Okända färger använder Tailwinds syntax för godtyckliga värden, t.ex. bg-[#custom].
Hanterar den förkortade CSS-egenskaper?
Ja. Förkortade egenskaper som margin, padding och border analyseras och konverteras till sina Tailwind-motsvarigheter. Till exempel blir margin: 8px 16px till my-2 mx-4, och border: 1px solid #ccc blir border border-solid border-[#ccc].
Skickas min CSS-data till en server?
Nej. All konvertering sker helt i din webbläsare med hjälp av klient-side JavaScript. Din CSS-kod lämnar aldrig din enhet, vilket gör detta verktyg helt privat och säkert att använda med proprietär kod.
Vad händer med egenskaper som inte stöds?
Egenskaper som inte kan mappas till en standard Tailwind-klass listas som kommentarer i utdatan. Detta låter dig se exakt vilka egenskaper som behöver manuell hantering eller anpassad Tailwind-konfiguration.
Stöder det godtyckliga Tailwind-värden?
Ja. När ett CSS-värde inte matchar Tailwinds standardskala använder konverteraren syntax för godtyckliga värden som p-[13px] eller text-[22px]. I omvänt läge tolkas godtyckliga värden som w-[200px] korrekt tillbaka till width: 200px.