Vai al contenuto
Numio

Convertitore da CSS a Tailwind: da CSS alle classi Tailwind — Numio

Converti dichiarazioni CSS in classi utility Tailwind CSS, mostrate come regole @apply per ciascun selettore. Trova le utility corrispondenti durante la migrazione degli stili esistenti. Il convertitore usa Tailwind CSS v3.

Trova le utility Tailwind corrispondenti alle regole CSS esistenti durante una migrazione.

CSS

TailwindCSS 3.x

Quando usarlo

  • Trova le utility Tailwind corrispondenti alle regole CSS esistenti durante una migrazione.
  • Impara i nomi delle classi Tailwind convertendo CSS che già conosci.

Come si usa

  1. Incolla regole CSS.
  2. Modifica il valore base rem o la configurazione Tailwind se il tuo progetto usa impostazioni personalizzate.
  3. Copia le classi dopo @apply nel markup o nel foglio di stile, poi controlla il risultato nel tuo progetto Tailwind.

Input CSS

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

Output Tailwind (scala predefinita)

.card {
  @apply flex p-4;
}

Dettagli e limiti

Nomi delle classi e scale seguono Tailwind CSS v3. La compatibilità con configurazione e sintassi di Tailwind CSS v4 non è garantita.

Valori personalizzati, selettori complessi e pseudo-elementi potrebbero non essere convertiti. Il risultato non è necessariamente identico nell’aspetto: controllalo sulla pagina reale.

Il campo di configurazione personalizzata viene valutato come JavaScript nel browser. Non incollare configurazioni di cui non ti fidi.

FAQ

Supporta Tailwind CSS v4?

Usa nomi di classe e scale di Tailwind CSS v3. Molte utility, come flex, p-4 e text-sm, mantengono il nome in v4, ma v4 sposta la configurazione nel CSS e rinomina alcune utility: verifica quindi il risultato nel tuo progetto v4.

Come uso i nomi delle classi al posto di @apply?

Copia l’elenco dopo @apply nell’attributo class dell’elemento, ad esempio class="flex p-4". La forma @apply raggruppa le classi in base al selettore originale.

Può convertire classi Bootstrap in Tailwind?

No. Converte dichiarazioni CSS, non nomi di classi di altri framework. Incolla le regole CSS di un componente Bootstrap per vedere le utility corrispondenti.

Perché alcune dichiarazioni non vengono convertite?

I valori esterni alla scala Tailwind, i selettori complessi e gli pseudo-elementi potrebbero non avere una utility diretta. Mantienili come CSS oppure aggiungili alla configurazione Tailwind.