Softonic

CSS till Tailwind

Steg 1 / 2
Konvertera till Tailwind

Att migrera en äldre stilmall till Tailwind en regel i taget är tidskrävande. Den här omvandlaren tar ett block med vanlig CSS – med eller utan selektorer och klammerparenteser – och skriver om varje deklaration som en Tailwind-utility. Igenkända par mappas till namngivna utilities som flex, items-center eller rounded-lg, medan allt annat faller tillbaka på Tailwinds syntax för godtyckliga värden [property:value], så att inget tyst tappas bort.

Hur omvandlaren bearbetar din CSS

  1. 1

    Klistra in CSS-koden

    Klistra in en fullständig regel som `.card { padding: 16px; border-radius: 8px; }` eller bara deklarationerna inuti klammerparenteserna.

  2. 2

    Parsern tar bort kommentarer

    Blockkommentarer `/* ... */` tas bort innan deklarationerna delas upp vid semikolon.

  3. 3

    Varje deklaration mappas

    Vanliga egenskaper mappas till riktiga Tailwind-utilities (avstånd, radie, teckenstorlek, flex, visning, textjustering); okända egenskaper faller tillbaka på `[prop:value]`.

  4. 4

    Kopiera och tillämpa

    Klistra in klasslistan i attributet `class` på motsvarande HTML-element.

Vad som mappas till namngivna utilities

Tailwinds standardtema kan inte täcka alla tänkbara CSS-värden, så omvandlaren prioriterar de värden där en namngiven utility finns och använder godtyckliga värden överallt annars.

Direkta mappningar

CSS-deklaration Tailwind-utility
display: flex flex
display: grid grid
display: none hidden
justify-content: center justify-center
align-items: center items-center
text-align: center text-center
font-weight: bold font-bold
cursor: pointer cursor-pointer
overflow: hidden overflow-hidden

Skalmedvetna mappningar

Padding, margin, bredd, höjd samt min-/maxdimensioner delas alla med 4 för att ge ett Tailwind-avståndssteg, padding: 16px blir p-4 och width: 32px blir w-8. Värden som inte landar på ett jämnt steg faller tillbaka på godtyckliga värden på motsvarande utility, till exempel blir width: 37px w-[37px].

border-radius mappas till den närmaste namngivna utility (rounded-sm, rounded-md, rounded-lg, rounded-xl, rounded-2xl). Storlekar över 16px blir rounded-full, vilket är praktiskt för pillerformade element men fel för ovanligt stora radier, granska utdata innan du driftsätter.

font-size delas in i text-xs upp till text-3xl utifrån pixeltrösklar.

Att tänka på

  • Pseudoklasser, mediefrågor och selektorer översätts inte; endast deklarationerna inuti klammerparenteserna gör det. Du behöver fortfarande lägga till varianter som hover: eller md: själv.
  • Färger hamnar i godtyckliga värden som text-[#1f2937] eftersom omvandlaren inte känner till din Tailwind-temapalett. Byt manuellt till text-gray-800 eller en egen token.
  • Förkortade egenskaper som du sällan använder (border, background, transition) skrivs ut ordagrant som [property:value], kontrollera dem innan du driftsätter.

Vanliga frågor

Utdata använder utility-namn som är stabila i både Tailwind v3 och v4. Godtyckliga värden inom hakparenteser är också giltiga i båda. Du kan vilja tokenisera om färgerna till din @theme-palett i v4 efter inklistringen.

Omvandlaren har ingen insyn i din färgskala i tailwind.config.js. Mappa det godtyckliga värdet manuellt till den närmaste palett-token, till exempel text-gray-800 eller en varumärkes-token som du har definierat.

Ja, klistra in flera regler. Verktyget ger en klasslista per selektor, åtskilda av en /* selector */-kommentar, så att du kan matcha dem mot motsvarande HTML.

CSS-koden skickas till vår server så att omvandlaren kan göra om den till Tailwind-klasser. Den sparas inte och läggs inte till i sidlänken.

Relaterade verktyg

ASCII-tabellreferens

Full ASCII-tabell från 0 till 127 med decimal-, hex-, oktal- och binärvärden samt notation för numeriska HTML-referenser, inklusive NUL, LF och DEL.

HTML-teckenreferens

En sökbar lista över HTML-entiteter med deras namngivna och numeriska koder samt kopiering med ett klick för specialtecken och symboler.

Referens för kortkommandon

Sök dokumenterade standardkommandon för VS Code, Chrome och Bash med GNU Readline i macOS, Windows och Linux.

Färgpalettgenerator

Skapa monokromatiska, analoga, komplementära, triadiska eller tetradiska färgpaletter från en HEX-basfärg och exportera kopieringsklara CSS-variabler.

Slumpgenerator för bokstäver

Generera slumpade A-Z-bokstäver. Välj antal, versaler, gemener eller blandat läge och använd resultatet för spel, uppgifter eller klassrumsaktiviteter.

HTML-formaterare

Formatera HTML lokalt i webbläsaren med indrag på två eller fyra blanksteg. HTML laddas inte upp eller valideras.

Verktyget finns på andra språk