Softonic

CSS a Tailwind

Passaggio 1 / 2
Converti in Tailwind

Migrare un foglio di stile legacy a Tailwind regola per regola è noioso. Questo convertitore prende un blocco di CSS semplice, con o senza selettori e parentesi graffe, e riscrive ogni dichiarazione come una utility Tailwind. Le coppie riconosciute mappano a utility nominate come flex, items-center o rounded-lg, e tutto il resto ricade nella sintassi dei valori arbitrari di Tailwind [property:value] in modo che nulla venga silenziosamente scartato.

Come il convertitore elabora il tuo CSS

  1. 1

    Incolla il CSS

    Inserisci una regola completa come `.card { padding: 16px; border-radius: 8px; }` o solo le dichiarazioni all'interno delle parentesi.

  2. 2

    Il parser rimuove i commenti

    I commenti a blocco `/* ... */` vengono rimossi prima che le dichiarazioni vengano divise sui punti e virgola.

  3. 3

    Ogni dichiarazione viene mappata

    Le proprietà comuni si mappano a vere utility Tailwind (spaziatura, raggio, dimensione del font, flex, display, allineamento del testo); gli sconosciuti ricadono in `[prop:value]`.

  4. 4

    Copia e applica

    Incolla l'elenco delle classi nell'attributo `class` dell'elemento HTML corrispondente.

Cosa viene mappato a utility nominate

Il tema predefinito di Tailwind non può coprire ogni possibile valore CSS, quindi il convertitore dà priorità a quelli in cui esiste una utility nominata e utilizza valori arbitrari altrove.

Mappature dirette

Dichiarazione CSS Utility Tailwind
display: flex flex
display: grid grid
display: none hidden
justify-content: center justify-center
align-items: center items-center
text-align: center text-center
font-weight: bold font-bold
cursor: pointer cursor-pointer
overflow: hidden overflow-hidden

Mappature consapevoli della scala

Padding, margine, larghezza, altezza, dimensioni min/max dividono un valore in px per 4 per produrre un passo di spaziatura Tailwind, padding: 16px diventa p-4, width: 32px diventa w-8. I valori che non si trovano su un passo pulito ricadono in valori arbitrari sulla utility corrispondente, ad esempio width: 37px diventa w-[37px].

border-radius è mappato alla utility nominata più vicina (rounded-sm, rounded-md, rounded-lg, rounded-xl, rounded-2xl). Le dimensioni superiori a 16px diventano rounded-full, che è utile per le pillole ma errato per raggi di dimensioni strane, ispeziona l’output prima di spedire.

font-size si suddivide in text-xs fino a text-3xl in base alle soglie di pixel.

Avvertenze

  • Le pseudo-classi, le media query e i selettori non vengono tradotti; solo le dichiarazioni all’interno delle parentesi graffe lo sono. Devi ancora aggiungere varianti come hover: o md: tu stesso.
  • I colori si trovano in valori arbitrari come text-[#1f2937] perché il convertitore non conosce la tua palette di tema Tailwind. Sostituisci con text-gray-800 o un token personalizzato a mano.
  • Le proprietà abbreviate che usi raramente (border, background, transition) vengono emesse letteralmente come [property:value], verifica prima di spedire.

Domande frequenti

L’output utilizza nomi di utility che sono stabili tra Tailwind v3 e v4. I valori arbitrari tra parentesi quadre sono validi in entrambi. Potresti voler ritrasformare i colori nella tua palette @theme v4 dopo aver incollato.

Il convertitore non ha visibilità sulla tua scala di colori tailwind.config.js. Mappa il valore arbitrario al token di palette più vicino manualmente, ad esempio text-gray-800 o un token di marca che hai definito.

Sì, incolla più regole. Lo strumento emetterà un elenco di classi per selettore, separato da un commento /* selettore */ in modo da poterli allineare con l’HTML corrispondente.

Il CSS viene inviato al nostro server perché il convertitore lo trasformi in classi Tailwind. Non viene archiviato e non compare nel link della pagina.

Strumenti correlati

Riferimento Tabella ASCII

Tabella ASCII completa da 0 a 127 con decimale, esadecimale, ottale, binario e riferimento numerico HTML per ogni carattere, inclusi i codici di controllo come NUL, LF e DEL.

Generatore di lettere casuali

Genera lettere A-Z casuali. Scegli la quantità, usa maiuscole, minuscole o un mix, e applica il risultato a giochi, spunti o attività in classe.

Riferimento ai caratteri HTML

Elenco ricercabile delle entità HTML, dei loro codici nominati e numerici, e copia con un clic per caratteri e simboli speciali.

Riferimento scorciatoie da tastiera

Cerca le scorciatoie predefinite documentate di VS Code, Chrome e Bash con GNU Readline su macOS, Windows e Linux.

Trova nome colore

Trova il colore CSS standard con nome più vicino a un valore HEX, RGB o HSL usando la differenza CIEDE2000.

Semplificatore di Algebra Booleana

Valuta un'espressione booleana per ogni combinazione di input e mostra la tabella della verità completa. Supporta fino a cinque variabili e gli operatori &, |, ! e ^.

Strumento disponibile in altre lingue