Copia come Tailwind collega il design visivo al codice Tailwind CSS. Clicca su qualsiasi elemento e ottieni istantaneamente le classi Tailwind equivalenti.
Sviluppare con Tailwind CSS significa pensare in classi utility invece di scrivere CSS personalizzato. Ma tradurre manualmente gli stili visivi in classi Tailwind è noioso e soggetto a errori. Copia come Tailwind automatizza completamente questo processo.
bg-purple-600 text-white
px-7 py-3 rounded-lg
font-semibold text-base
border-2 border-purple-400
Clicca su qualsiasi elemento e il suo CSS calcolato completo viene analizzato in tempo reale. Ogni proprietà applicabile viene mappata alla classe Tailwind equivalente.
Lo strumento comprende il sistema di design di Tailwind. Un padding di 12px viene mappato a p-3, i colori vengono abbinati alla tonalità più vicina nella palette Tailwind.
La stringa di classi generata viene mostrata in un pannello pulito. Clicca il pulsante Copia e l'intera stringa è negli appunti.
Per un flusso di lavoro ancora più veloce, clicca col tasto destro su qualsiasi elemento per accedere a "Copia come Tailwind" direttamente dal menu contestuale del browser.
Va oltre le mappature semplici. Gestisce box-shadow, gradienti, stili bordo, classi layout flex/grid, valori di opacità e proprietà responsive.
Include solo classi che differiscono dai valori predefiniti del browser — nessuna utility ridondante.
Copia come Tailwind covers the following, organized by category:
display (flex, grid, block)position (relative, absolute)flex-directionjustify-contentalign-itemsgapoverflowpadding (p-*)margin (m-*)width (w-*)height (h-*)max-widthmin-heightfont-size (text-*)font-weight (font-*)line-height (leading-*)letter-spacing (tracking-*)text-aligntext-transformcolor (text-*)background-color (bg-*)border-color (border-*)opacityborder-width (border-*)border-radius (rounded-*)border-stylebox-shadow (shadow-*)transform (scale-*, rotate-*)transitioncursorStai ricostruendo un sito da CSS vanilla o Bootstrap a Tailwind? Clicca su ogni componente principale del sito esistente e copia le classi Tailwind.
Trovato un card, hero section o navigazione ben progettati su un altro sito? Clicca, ottieni le classi Tailwind e usale come riferimento.
Quando costruisci nuovi componenti Tailwind da un mockup, implementa prima il design nel browser, poi clicca con Copia come Tailwind per ottenere le classi esatte.
Assicurati che i tuoi valori CSS scritti a mano corrispondano effettivamente ai valori di scala Tailwind validi.
Nuovo in Tailwind? Clicca sugli elementi di qualsiasi pagina web per vedere come le proprietà CSS tradizionali si traducono in classi utility.
Apri il dock fluttuante di DevSuite Pro e clicca sull'icona Copia come Tailwind.
Clicca su qualsiasi elemento della pagina. L'elemento viene evidenziato e il suo CSS analizzato.
Il pannello mostra la stringa completa di classi Tailwind divisa in gruppi logici.
Clicca "Copia" per ottenere la stringa completa. Incollala direttamente nel tuo componente.
Installa DevSuite Pro gratuitamente e sblocca più di 39 strumenti per sviluppatori per il tuo browser.