🌈Generatore di colori Tailwind

Cosa rappresentano da 50 a 950 in Tailwind

I colori di Tailwind CSS rappresentano la luminosità in 11 livelli numerati, dove 50 è il più chiaro, 950 è il più scuro e 500 è il colore base. Il numero viene utilizzato alla fine del nome della classe, ad esempio "bg-primary-500" o "text-primary-700".

• Livelli da 50 a 300：I livelli da 50 a 300 sono colori chiari spesso utilizzati per i colori di sfondo o riempimenti leggeri, abbastanza leggibili anche con testo scuro sovrapposto.
• Livelli da 600 a 950：I livelli da 600 a 950 sono colori scuri spesso utilizzati per lo stato hover dei pulsanti o il colore del testo dei titoli, ben visibili su sfondi bianchi.

Differenze nel metodo di definizione dei colori tra v3 e v4

In Tailwind CSS v3, i colori vengono definiti in JavaScript in tailwind.config.js, mentre in v4 vengono definiti come variabili CSS all'interno di @theme nel file CSS. Indipendentemente dal metodo di scrittura, i colori definiti possono essere utilizzati con lo stesso nome di classe come "bg-primary-500".

• Metodo di scrittura di v3：Il metodo di scrittura di v3 è il formato in cui il nome del colore e il livello sono annidati come "primary: { 500: '#3B82F6' }" all'interno di theme.extend.colors.
• Metodo di scrittura di v4：Il metodo di scrittura di v4 è il formato in cui il nome della variabile con il nome del colore e il livello collegati da trattini viene scritto come "--color-primary-500: #3B82F6;" all'interno di @theme.