L'Assistente Tailwind ispeziona qualsiasi elemento e genera una scomposizione completa e categorizzata delle classi Tailwind CSS corrispondenti.
Mentre Copia come Tailwind ti dà una stringa rapida, l'Assistente Tailwind è il compagno per l'approfondimento. Ogni proprietà CSS calcolata viene mappata al suo equivalente Tailwind e raggruppata in categorie logiche.
Le classi Tailwind sono organizzate in categorie chiare: Layout, Spaziatura, Tipografia, Colori, Bordi ed Effetti.
Clicca su qualsiasi elemento e il pannello si popola istantaneamente con la scomposizione completa delle classi Tailwind.
Ogni classe Tailwind è mostrata come tag cliccabile. Clicca su qualsiasi tag per copiare solo quella classe.
Il pulsante "Copia tutte le classi" genera una stringa pulita separata da spazi di tutte le classi.
Ogni valore viene mappato alla scala predefinita di Tailwind. Un font di 16px diventa text-base, 24px di padding diventa p-6.
Passa il cursore su qualsiasi tag di classe nel pannello per vedere il valore CSS calcolato originale.
Assistente Tailwind 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:*La vista categorizzata ti permette di capire la composizione completa di un elemento.
Ispeziona un elemento ben progettato su qualsiasi sito web, poi ricrealo nel tuo progetto Tailwind.
Passa il cursore sui tag delle classi per vedere i valori CSS sorgente.
Ispeziona gli elementi del tuo sito Tailwind per verificare spaziatura, colori e tipografia coerenti.
Usa Copia come Tailwind per una stringa rapida. Usa l'Assistente Tailwind per studiare la scomposizione.
Apri il dock di DevSuite Pro e clicca sull'icona Assistente Tailwind.
Clicca su qualsiasi elemento della pagina. Viene evidenziato e il pannello si popola con classi categorizzate.
Naviga tra le categorie per capire la composizione completa degli stili dell'elemento.
Clicca sui tag individuali per copiare classi specifiche, o usa "Copia tutte" per ottenere tutto.
Clicca su un elemento diverso per aggiornare istantaneamente il pannello con nuove classi.
Installa DevSuite Pro gratuitamente e sblocca più di 39 strumenti per sviluppatori per il tuo browser.