Kopiér som Tailwind

At bygge med Tailwind CSS betyder at tænke i hjælpeklasser i stedet for at skrive brugerdefineret CSS. Men når du refererer til et eksisterende design — uanset om det er en konkurrents landingsside, et designsystem bygget i vanilla CSS eller en klients nuværende webside — er det manuelt at oversætte visuelle typografier til Tailwind-klasser besværligt og fejlbehæftet. Kopiér som Tailwind automatiserer dette fuldstændigt. Den læser browserens beregnede typografier for ethvert element og kortlægger hver egenskab til den nærmeste Tailwind-hjælpeklasse ved hjælp af standardskalaen. Farver matches til den nærmeste Tailwind-palettefarve, afstandsværdier snapper til den nærmeste rem-baserede hjælpeklasse, og typografi kortlægges til text-*- og font-*-klasser. Outputtet er en ren enkeltlinje klassestreng, du kan indsætte direkte i din komponent.

Nøglefunktioner

Øjeblikkelig CSS-til-Tailwind-konvertering

Klik på et element, og dets fulde beregnede CSS analyseres i realtid. Alle anvendelige egenskaber kortlægges til den tilsvarende Tailwind-hjælpeklasse — fra bg-purple-600 til rounded-lg til font-semibold. Konverteringen sker øjeblikkeligt uden indlæsnings- eller behandlingsforsinkelse.

Smart klassekortlægning

Værktøjet laver ikke bare strengerstatning — det forstår Tailwinds designsystem. En polstring på 12 px kortlægges til p-3 (ikke en brugerdefineret værdi), farver matches til den nærmeste nuance i Tailwinds palette (f.eks. bliver #7c3aed til purple-600), og skriftstørrelser kortlægges til text-sm, text-base, text-lg osv.

Ét-klik-kopiering til udklipsholder

Den genererede klassestreng vises i et rent outputpanel. Klik på Kopiér-knappen én gang, og hele strengen er på din udklipsholder — klar til at indsætte i className="..." i React, class="..." i HTML eller :class="..." i Vue.

Integration af kontekstmenu

For en endnu hurtigere arbejdsgang kan du højreklikke på ethvert element på siden for at tilgå "Kopiér som Tailwind" direkte fra browserens kontekstmenu. Du behøver ikke åbne DevSuite-docken — bare højreklik, klik, og klasserne er på din udklipsholder.

Håndterer komplekse egenskaber

Går ud over simple kortlægninger. Håndterer box-shadows (shadow-md, shadow-lg), gradienter, kantstile, flex/grid-layoutklasser, opacitetsværdier og endda responsivt bevidste egenskaber som max-width og aspect ratios.

Rent, minimalt output

Inkluderer kun klasser, der adskiller sig fra browserstandards — ingen redundante hjælpeklasser. Outputtet er kortfattet og produktionsklar, ikke oppustet med klasser til arvede eller standardværdier.

Hvad du kan inspicere

Kopiér som Tailwind covers the following, organized by category:

Layout

display (flex, grid, block)
position (relative, absolute)
flex-direction
justify-content
align-items
gap
overflow

Afstand

padding (p-*)
margin (m-*)
width (w-*)
height (h-*)
max-width
min-height

Typografi

font-size (text-*)
font-weight (font-*)
line-height (leading-*)
letter-spacing (tracking-*)
text-align
text-transform

Farver

color (text-*)
background-color (bg-*)
border-color (border-*)
opacity

Kanter

border-width (border-*)
border-radius (rounded-*)
border-style

Effekter

box-shadow (shadow-*)
transform (scale-*, rotate-*)
transition
cursor

Almindelige brugstilfælde

Migrering af et eksisterende websted til Tailwind

Genopbygger du et websted fra vanilla CSS eller Bootstrap til Tailwind? Klik på hver større komponent på det eksisterende websted, kopiér Tailwind-klasserne og brug dem som udgangspunkt for dine nye Tailwind-komponenter. Sparer timer med manuel egenskab-til-klasse-oversættelse.

Reverse engineering af designmønstre

Fandt du et smukt designet kort, hero-sektion eller navigation på et andet websted? Klik på det, hent Tailwind-klasserne og brug dem som reference til at bygge din egen version. Du behøver ikke manuelt inspicere snesevis af CSS-egenskaber.

Hurtigere komponentudvikling

Når du bygger nye Tailwind-komponenter fra et Figma- eller PSD-mockup, skal du implementere designet i browseren først ved hjælp af DevTools og derefter klikke på elementet med Kopiér som Tailwind for at få de præcise hjælpeklasser i stedet for at skrive dem i hånden.

Konsistent oversættelse af design-tokens

Sørg for, at dine håndskrevne CSS-værdier faktisk kortlægges til gyldige Tailwind-skalaværdier. Hvis du skrev padding: 14px, viser værktøjet dig, om det afrundes til p-3 (12px) eller p-3.5 (14px) — og fanger inkonsistenser, inden de sendes.

Undervisning og læring af Tailwind

Ny til Tailwind? Klik på elementer på en hvilken som helst webside for at se, hvordan traditionelle CSS-egenskaber oversættes til hjælpeklasser. Det er en interaktiv måde at lære Tailwinds klassenavngivningssystem ved at se rigtige eksempler.

Sådan bruger du det

Aktiver Kopiér som Tailwind

Åbn den flydende dock i DevSuite Pro og klik på ikonet Kopiér som Tailwind. Værktøjet aktiveres, og din markør skifter til en trådkorsvælger, der angiver, at du nu kan klikke på elementer.

Klik på målelementet

Klik på et element på siden — en knap, et kort, en overskrift, en navigationslinje. Elementet fremhæves, og dets beregnede CSS analyseres. Et flydende panel vises med den genererede Tailwind-klassestreng.

Gennemgå de genererede klasser

Panelet viser den fulde Tailwind-klassestreng opdelt i logiske grupper. Du kan se præcist, hvilken CSS-egenskab der kortlagdes til hvilken Tailwind-klasse. Hold markøren over en klasse for at se den underliggende CSS-værdi, den repræsenterer.

Kopiér og indsæt i din kode

Klik på "Kopiér"-knappen for at hente den komplette klassestreng. Indsæt den direkte i din komponents className, class-attribut eller skabelon. Klasserne fungerer straks med en standard Tailwind-opsætning.