Tailwind è un framework CSS che offre una serie di valori predefiniti per varie proprietà, come colori, spaziatura, dimensioni dei caratteri, ecc. Tuttavia, a volte gli utenti potrebbero voler utilizzare un valore che non è incluso nella configurazione predefinita, come un valore personalizzato colore o un margine specifico. In questa situazione, possono utilizzare valori arbitrari.

Questo articolo spiegherà il metodo per utilizzare valori arbitrari in Tailwind CSS.

Come utilizzare valori arbitrari in Tailwind?

I valori arbitrari sono i valori personalizzati che possono essere scritti direttamente nell'attributo della classe HTML senza definirli nel file di configurazione di Tailwind. Sono preceduti da una notazione tra parentesi quadre, ad esempio [24px], [2.5rem] e così via. Per utilizzare i valori arbitrari in Tailwind, utilizzare una notazione tra parentesi quadre e specificare qualsiasi valore personalizzato per generare classi di utilità in modo dinamico.

Dai un'occhiata ai passaggi elencati di seguito per una migliore comprensione:

Passaggio 1: utilizzare valori arbitrari nel programma HTML

Crea un programma HTML e utilizza la notazione tra parentesi quadre con qualsiasi valore personalizzato per creare le classi desiderate. Ad esempio, abbiamo utilizzato il “bg-[#e9e516]”, “w-[600px]”, “h-[400px]”, “p-[13px]”, e altre classi:

Qui:

• “bg-[#e9e516]” class imposta il colore di sfondo del
  su “#e9e516” (giallo).
• 'w-[600px]' class imposta la larghezza di
  su 600 pixel.
• 'h-[400px]' class applica l'altezza di 400 pixel all'elemento
  .
• 'p-[13px]' class imposta il riempimento del
  su 13 pixel.
• 'm-[19px]' class imposta il margine del
  a 19 pixel.

• 'testo-[30px]' class imposta la dimensione del carattere dell'elemento

  a 30 pixel.

• 'testo-[#7405ab]' class imposta il colore del testo dell'elemento

  su viola (#7405ab).

• 'tracciamento-[0.5rem]' class applica la spaziatura tra le lettere a 0,5 rem all'elemento

  .

Passaggio 2: verificare l'output

Per garantire che i valori arbitrari funzionino correttamente, visualizzare la pagina Web HTML:

L'output precedente indica che i valori arbitrari funzionano correttamente così come sono stati definiti.

Conclusione

Per utilizzare i valori arbitrari in Tailwind, utilizza una notazione tra parentesi quadre con qualsiasi valore personalizzato nel programma HTML per generare classi in modo dinamico. Gli utenti possono utilizzare i valori per qualsiasi proprietà che accetta un valore numerico o di colore, come la dimensione del carattere, il colore, la larghezza, l'altezza, il margine, il riempimento e così via. Questo articolo ha spiegato il metodo per utilizzare valori arbitrari in Tailwind CSS.