Tailwind-hjælperen inspicerer ethvert element på en webside og genererer en omfattende, kategoriseret opdeling af matchende Tailwind CSS-hjælpeklasser. I modsætning til en simpel klassestreng organiserer den resultater efter kategori — Layout, Afstand, Typografi, Farver, Kanter og Effekter — så du præcist forstår, hvad hver klasse styrer.
Mens Kopiér som Tailwind giver dig en hurtig klassestreng at indsætte, er Tailwind-hjælperen den dybdegående ledsager. Den er bygget til udviklere, der ønsker at forstå den fulde stilkomposition af et element i Tailwind-termer. Hvert beregnet CSS-egenskab kortlægges til sin Tailwind-ækvivalent og grupperes i logiske kategorier. Du kan ved et øjekast se, at et element bruger flex-layout med items-center-justering, har p-5-polstring med gap-3 mellem underordnede, bruger text-lg font-bold til typografi og har en bg-slate-900 rounded-lg border border-slate-700-udseende. Klik på et individuelt klasse-tag for at kopiere kun det ene, eller brug "Kopiér alle" for at hente den komplette streng. Den kategoriserede visning gør det nemt at udvælge præcis de klasser, du har brug for, i stedet for at kopiere alt.
Tailwind-klasser er organiseret i klare kategorier: Layout (flex, grid, position), Afstand (padding, margin, gap), Typografi (skriftstørrelse, vægt, farve), Farver (baggrund, tekst, kant), Kanter (radius, bredde, stil) og Effekter (shadow, opacity, transform). Hver kategori kan skjules og er tydeligt mærket.
Klik på et element — knapper, kort, overskrifter, input, beholdere — og panelet udfyldes øjeblikkeligt med den fulde Tailwind-klasseopdeling. Elementet fremhæves med en lilla kant, så du præcist ved, hvad der inspiceres.
Hvert Tailwind-klasse-tag er klikbart. Klik på et enkelt tag (som p-5 eller font-bold) for at kopiere kun den klasse til din udklipsholder. En subtil "kopieret"-animation bekræfter handlingen. Perfekt, når du kun har brug for én eller to specifikke klasser.
Knappen "Kopiér alle klasser" i bunden genererer en ren, mellemrumsadskilt streng af alle Tailwind-klasser og kopierer den til din udklipsholder. Klar til at indsætte direkte i className="..." eller class="...".
Hver værdi kortlægges til Tailwinds standardafstands- og størrelseskala. En 16 px-skrifttype kortlægges til text-base, 24 px-polstring kortlægges til p-6, og #7c3aed kortlægges til purple-600. Når der ikke findes et nøjagtigt match, vælges og noteres den nærmeste skalaværdi.
Hold markøren over et Tailwind-klasse-tag i panelet for at se den originale beregnede CSS-værdi, det er genereret fra. F.eks. viser det at holde markøren over "p-5" "padding: 20px". Denne tovejsvisning hjælper dig med at lære Tailwind-skalaen ved at forbinde klasser til rigtige CSS-værdier.
Tailwind-hjælper covers the following, organized by category:
flexgridblockinline-flexrelativeabsolutestickyitems-centerjustify-betweengap-*p-* (padding)m-* (margin)px-* py-*mx-autospace-x-*w-* h-*max-w-*min-h-*text-sm / text-base / text-lgfont-normal / font-boldleading-* (line-height)tracking-* (letter-spacing)text-centeruppercasetext-{color}-{shade}bg-{color}-{shade}border-{color}-{shade}opacity-*borderborder-2rounded-* (radius)border-solid / dasheddivide-*shadow-sm / shadow-md / shadow-lgring-*transitionduration-*hover:*I modsætning til en flad klassestreng lader den kategoriserede visning dig forstå et elements komplette komposition. Se, at et kort bruger flex-layout, specifik polstring, fed typografi, en slate-baggrund, afrundede kanter og en subtil skygge — hvert aspekt i sin egen sektion.
Inspicér et veldesignet element på et websted, og genskab det derefter i dit Tailwind-projekt ved at kopiere de relevante kategorieklasser. Tag layoutet fra ét element, typografien fra et andet og farverne fra din brandpalette — bland og kombiner.
Hold markøren over klasse-tags for at se CSS-kildeværdierne. Denne interaktive kortlægning er den hurtigste måde at lære, at p-4 betyder 16 px, text-lg betyder 18 px, eller at purple-600 er #7c3aed. Gør ethvert websted til en Tailwind-læringsøvelse.
Inspicér elementer på dit eget Tailwind-byggede websted for at verificere, at de bruger konsistent afstand, farver og typografi fra designsystemet. Spot utilsigtede enkeltværdier (som p-[13px]), der burde være standardskalaværdier (p-3 eller p-3.5).
Brug Kopiér som Tailwind, når du har brug for en hurtig klassestreng at indsætte. Brug Tailwind-hjælperen, når du vil studere opdelingen, kopiere individuelle klasser selektivt eller forstå, hvorfor specifikke Tailwind-klasser blev valgt til hver CSS-egenskab.
Åbn den flydende dock i DevSuite Pro og klik på ikonet Tailwind-hjælper. Værktøjet aktiveres, og et panel vises i højre side, klar til at vise klasseopdelinger.
Klik på et element på siden. Det fremhæves med en lilla kant, og panelet udfyldes med kategoriserede Tailwind-klasser. Hver kategori (Layout, Afstand, Typografi, Farver, Kanter, Effekter) vises som en sektion med klasse-tags.
Gennemse kategorierne for at forstå elementets komplette stilkomposition. Hvert klasse-tag er klikbart — hold markøren for at se CSS-kildeværdien, klik for at kopiere den individuelle klasse.
Klik på individuelle tags for at kopiere specifikke klasser, eller brug knappen "Kopiér alle klasser" i bunden for at hente alt som en enkelt streng. Indsæt direkte i din Tailwind-komponent.
Klik på et andet element på siden for øjeblikkeligt at opdatere panelet med nye klasser. Du behøver ikke deaktivere og genaktivere — bare bliv ved med at klikke for at inspicere flere elementer i rækkefølge.
Installer DevSuite Pro gratis og lås opp 39+ utviklerverktøy for nettleseren din.