Softonic

CSS naar Tailwind

Stap 1 / 2
converteren naar Tailwind

Een oude stylesheet regel voor regel naar Tailwind migreren is bewerkelijk. Deze converter neemt een blok gewone CSS – met of zonder selectors en accolades – en herschrijft elke declaratie als een Tailwind-utility. Herkende paren worden gekoppeld aan benoemde utilities zoals flex, items-center of rounded-lg; al het andere valt terug op de syntaxis voor willekeurige waarden van Tailwind ([property:value]), zodat er niets stilzwijgend wordt weggelaten.

Hoe de converter uw CSS verwerkt

  1. 1

    Plak de CSS

    Voeg een volledige regel zoals `.card { padding: 16px; border-radius: 8px; }` toe of alleen de declaraties binnen de haakjes.

  2. 2

    De parser verwijdert commentaar

    Blokcommentaar `/* ... */` wordt verwijderd voordat de declaraties op puntkomma's worden gesplitst.

  3. 3

    Elke declaratie wordt gekoppeld

    Veelvoorkomende eigenschappen worden gekoppeld aan echte Tailwind-utilities (marge, radius, lettergrootte, flex, weergave, tekstuitlijning); onbekende eigenschappen vallen terug op `[prop:value]`.

  4. 4

    Kopiëren en toepassen

    Plak de klassenlijst in het `class`-attribuut van het corresponderende HTML-element.

Wat wordt gekoppeld aan benoemde utilities

Het standaardthema van Tailwind kan niet alle mogelijke CSS-waarden omvatten; de converter geeft daarom voorrang aan waarden waarvoor een benoemde utility bestaat en gebruikt in alle overige gevallen willekeurige waarden.

Directe koppelingen

CSS-declaratie 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

Schaalbewuste koppelingen

De waarden voor padding, margin, breedte, hoogte en minimale/maximale afmetingen worden allemaal gedeeld door 4 om een Tailwind-spatiëringsstap te genereren: padding: 16px wordt p-4 en width: 32px wordt w-8. Waarden die niet op een exacte stap vallen, vallen terug op willekeurige waarden op de bijbehorende utility; zo wordt width: 37px omgezet in w-[37px].

border-radius wordt gekoppeld aan de dichtstbijzijnde benoemde utility (rounded-sm, rounded-md, rounded-lg, rounded-xl of rounded-2xl). Afmetingen boven 16px worden rounded-full; dit is handig voor pilvormige elementen, maar onjuist voor ongewoon grote stralen – controleer de uitvoer voordat u naar productie gaat.

font-size wordt op basis van pixeldrempels ingedeeld van text-xs tot text-3xl.

Aandachtspunten

  • Pseudo-classes, media queries en selectors worden niet vertaald; alleen de declaraties binnen de accolades. U moet varianten zoals hover: of md: nog zelf toevoegen.
  • Kleuren krijgen willekeurige waarden zoals text-[#1f2937], omdat de converter uw Tailwind-themapalet niet kent. Vervang deze handmatig door text-gray-800 of een eigen token.
  • Verkorte eigenschappen die u zelden gebruikt (border, background, transition) worden letterlijk weergegeven als [property:value]; controleer ze voordat u naar productie gaat.

Veelgestelde vragen

De uitvoer gebruikt utility-namen die stabiel zijn in zowel Tailwind v3 als v4. Willekeurige waarden tussen vierkante haakjes zijn eveneens in beide geldig. Na het plakken wilt u de kleuren mogelijk opnieuw tokeniseren naar uw @theme-palet in v4.

De converter heeft geen inzicht in uw kleurenschaal in tailwind.config.js. Koppel de willekeurige waarde handmatig aan het dichtstbijzijnde palet-token, bijvoorbeeld text-gray-800 of een door u gedefinieerd merk-token.

Ja, plak meerdere regels. Het hulpmiddel genereert voor elke selector een lijst met classes, gescheiden door een /* selector */-commentaar, zodat u ze kunt afstemmen op de bijbehorende HTML.

De CSS wordt naar onze server gestuurd zodat de converter er Tailwind-klassen van kan maken. De code wordt niet opgeslagen en komt niet in de paginalink terecht.

Gerelateerde tools

ASCII-tabelreferentie

Volledige ASCII-tabel van 0 tot 127 met decimale, hexadecimale, octale en binaire waarden en HTML-numerieke referentienotatie, inclusief control codes zoals NUL, LF en DEL.

HTML-tekenreferentie

Een doorzoekbare lijst met HTML-entiteiten, hun benoemde en numerieke codes, plus kopiëren met één klik voor speciale tekens en symbolen.

Sneltoetsenoverzicht

Zoek gedocumenteerde standaardsneltoetsen voor VS Code, Chrome en Bash met GNU Readline op macOS, Windows en Linux.

HAR-bestandsviewer

Open HAR-netwerkopnamen lokaal, filter verzoeken, bekijk gemaskeerde headers en timing en exporteer opgeschoonde samenvattingen zonder upload.

ASCII naar binair-converter

Converteer elke ASCII-string naar zijn binaire representatie. Elk teken wordt acht bits, gescheiden door spaties, klaar voor protocoltrace of huiswerk.

Telefoonnummers controleren

Controleer de structuur van telefoonnummers per land en bekijk regio, type en E.164-, internationale, nationale en RFC 3966-notatie.

Tool beschikbaar in andere talen