Naar de inhoud
Numio

CSS naar Tailwind-converter — CSS naar Tailwind-klassen — Numio

Zet CSS-declaraties om naar Tailwind CSS-utilityklassen, weergegeven als @apply-regels per selector. Gebruik dit om bijpassende klassen te vinden bij het migreren van bestaande stijlen. De converter is bedoeld voor Tailwind CSS v3.

Zoek tijdens een migratie de Tailwind-klassen die overeenkomen met bestaande CSS-regels.

CSS

TailwindCSS 3.x

Wanneer gebruik je dit?

  • Zoek tijdens een migratie de Tailwind-klassen die overeenkomen met bestaande CSS-regels.
  • Leer de klassenamen van Tailwind door vertrouwde CSS om te zetten.

Hoe werkt het

  1. Plak CSS-regels.
  2. Pas de rem-basiswaarde of Tailwind-configuratie aan als je project aangepaste instellingen gebruikt.
  3. Kopieer de klassen na @apply naar je markup of stylesheet en controleer het resultaat in je Tailwind-project.

CSS-invoer

.card { display: flex; padding: 1rem; }

Tailwind-uitvoer (standaardschaal)

.card {
  @apply flex p-4;
}

Details en beperkingen

Klassenamen en schalen volgen Tailwind CSS v3. Compatibiliteit met de configuratie en syntaxis van Tailwind CSS v4 is niet gegarandeerd.

Aangepaste waarden, complexe selectors en pseudo-elementen kunnen mogelijk niet worden omgezet. De uitvoer ziet er niet gegarandeerd hetzelfde uit. Controleer het resultaat op de echte pagina.

Het veld voor aangepaste configuratie wordt als JavaScript in je browser uitgevoerd. Plak geen configuratie die je niet vertrouwt.

FAQ

Wordt Tailwind CSS v4 ondersteund?

De tool gebruikt de klassenamen en schalen van Tailwind CSS v3. Veel klassen, zoals flex, p-4 en text-sm, behouden hun naam in v4. v4 verplaatst de configuratie echter naar CSS en hernoemt sommige klassen. Controleer de uitvoer daarom in je v4-project.

Hoe gebruik ik klassenamen in plaats van @apply?

Kopieer de lijst na @apply naar het class-attribuut van het element, bijvoorbeeld class="flex p-4". De @apply-notatie groepeert de klassen per oorspronkelijke selector.

Kan de tool Bootstrap-klassen naar Tailwind omzetten?

Nee. De tool converteert CSS-declaraties, geen klassenamen uit een ander framework. Plak de CSS-regels achter een Bootstrap-component om de bijpassende klassen te zien.

Waarom worden sommige declaraties niet geconverteerd?

Waarden buiten de Tailwind-schaal, complexe selectors en pseudo-elementen hebben mogelijk geen direct bijpassende klasse. Behoud deze als CSS of voeg ze toe aan je Tailwind-configuratie.