Come impostare la base flessibile in Tailwind?

Questo articolo spiegherà il metodo per impostare la base flessibile in Tailwind CSS.

Come impostare la base flessibile in Tailwind?

Per impostare la base flessibile in Tailwind CSS, crea un file HTML. Quindi, usa il ' base- ” classe di utilità nel programma HTML e specificare la dimensione dell'elemento flessibile. Questa utility imposta la dimensione iniziale degli elementi flessibili. Per garantire le modifiche, visualizzare la pagina web.

Guarda i passaggi forniti per una dimostrazione pratica:

Passaggio 1: imposta Flex Base nel programma HTML
Crea un programma HTML e utilizza il ' base- ” classe di utilità per impostare la dimensione dell'elemento flessibile. Ad esempio, abbiamo utilizzato ' base-1/4 ”, “ base-1/3 ', E ' base-1/2 ” utility per impostare tre elementi flessibili:

Qui:

• “ flettere La classe ” viene utilizzata per creare un layout flessibile e regolare le dimensioni dell'elemento figlio in base allo spazio disponibile.
• “ h-20 ” class imposta l'altezza del
  su 20 unità.
• “ base-1/4 La classe ” imposta la larghezza dell'elemento
  interno al 25% del suo elemento genitore.
• “ base-1/3 ” class imposta la larghezza del
  interno al 33,33% del suo contenitore padre.
• “ base-1/2 ” imposta la larghezza di
  al 50% del suo contenitore principale.
• “ bg-rosso-400 La classe ” applica un colore di sfondo rosso al
  .
• “ bg-verde acqua-400 ” class imposta il colore verde acqua sullo sfondo di
  .
• “ bg-arancione-400 La classe ” applica il colore di sfondo arancione al
  .
• “ m-1 ” class aggiunge un margine di 1 unità attorno a ciascun elemento
  .

Passaggio 2: verificare l'output
Per assicurarti che la base flessibile sia stata impostata e funzioni correttamente, visualizza la pagina Web HTML:

Nell'output sopra, è possibile vedere la base flessibile in base alla quale sono stati stilizzati.

Conclusione

Base flessibile consente agli utenti di creare layout flessibili che si adattano a varie dimensioni e risoluzioni dello schermo. Per impostare la base flessibile in Tailwind CSS, il ' base- La classe di utilità viene utilizzata nel programma HTML. Gli utenti devono specificare la dimensione dell'articolo flessibile e garantire le modifiche visualizzando la pagina web. Questo articolo ha spiegato il metodo per impostare la base flessibile in Tailwind CSS.