Questo post illustra tutti i possibili aspetti per aggiungere 'stili di base' in Tailwind CSS.
Come aggiungere stili 'base' in Tailwind?
'Tailwind CSS' viene fornito con i seguenti tre metodi per aggiungere gli stili 'base' nell'intero contenuto HTML o in un elemento specifico:
- Usa 'CSS' per aggiungere stili di base in Tailwind.
- Usa 'Plugin' per aggiungere stili di base in Tailwind.
Esploriamoli uno per uno.
Prerequisiti
Prima di passare all'implementazione pratica, dai un'occhiata al progetto appena creato chiamato 'Linuxhint' che viene utilizzato per aggiungere gli 'stili di base':
Struttura del file di progetto
Ora vai al file 'index.html' e dai un'occhiata al suo codice HTML:
< html >< Testa >
< collegamento href = '/dist/output.css' rel = 'foglio di stile' >
< / Testa >
< corpo >
< h2 classe = 'sottolinea centro testo font-grassetto testo-rosa-600' > Benvenuto su Linuxhint! < / h2 >< fratello >
< h3 classe = 'testo in grassetto al centro del testo–arancione-600' > Tutorial: aggiunta di stili di base in Tailwind. < / h3 >< fratello >
< / corpo >
Nelle righe di codice sopra:
Produzione
L'output del codice precedente è mostrato qui:
Ora, usa il metodo discusso per personalizzare il codice HTML sopra aggiungendo gli stili di base. Iniziamo con il metodo 'CSS' di Tailwind.
Metodo 1: usa i CSS per aggiungere 'stili di base' in Tailwind
Il metodo più semplice e facile per aggiungere lo stile di base all'elemento HTML specifico è aggiungerli nel file CSS principale del progetto. Eseguiamo questo compito praticamente seguendo i passaggi indicati.
Passaggio 1: apri il file CSS
Innanzitutto, apri il file CSS principale, ad esempio ' style.css ” che contiene i layer “base”, “components” e “utilities” incorporati in tailwind:
Passaggio 2: aggiungi il CSS
Successivamente, aggiungi lo stile 'base' per gli specifici elementi HTML '
' e '' applicando le classi utilizzando ' @fare domanda a ” direttiva nel livello “base” con l'aiuto della “ @strato ' parola chiave. Le parole chiave '@layer' aggiungono le classi definite sul layer 'base' specificato: @strato di base {
h2 {
@applica testo-3xl;
}
h3 {
@applica testo-xl;
}
}
h2 {
@applica testo-3xl;
}
h3 {
@applica testo-xl;
}
}
Nelle righe di codice sopra, il ' Dimensione del font ” viene applicata agli elementi “
” e “” per ingrandirli rispettivamente fino alla dimensione specificata:
Salva (Ctrl + S) il file.
Passaggio 3: Uscita
Ora, esegui il codice nel server live e guarda l'output, come segue:
Qui, l'output mostra che la classe 'Font Size' di Tailwind è stata applicata correttamente all'elemento specificato nel livello di base.
Nota : lo stesso approccio viene utilizzato per tutte le altre classi CSS di Tailwind.
Metodo 2: utilizza il plug-in per aggiungere 'stili di base' in Tailwind
Un altro metodo utile per aggiungere stili 'base' è scrivere un ' collegare ” e usa il “ aggiungiBase() ' funzione. Questa funzione aiuta a registrare nuove classi nel ' base ” direttiva layer. Questa funzione viene utilizzata nel file 'tailwind.config.js' di Tailwind. Facciamolo praticamente.
Passaggio 1: definire la funzione 'addBase ()'.
Per prima cosa, vai al ' tailwind.config.js ” file di configurazione e aggiungi gli stili di base dal plugin e chiama la funzione “addBase()”:
Salva il file.
Passaggio 2: Uscita
Infine, esegui il codice HTML specificato e visualizza l'output:
Come visto, la classe Tailwind “Font Size” definita nella funzione “addBase()” come oggetto JavaScript viene applicata agli elementi HTML specificati.
Conclusione
Gli stili di base Tailwind possono essere aggiunti facilmente utilizzando il ' CSS ' classi nel file CSS principale e ' Collegare ' con il ' aggiungiBase() ” funzione nel file di configurazione. Il metodo 'CSS' è considerato il metodo più semplice in quanto definisce solo gli stili di base nel livello 'base' e li implementa automaticamente sull'elemento specificato. D'altra parte, la sezione 'plugin' del ' tailwind.config.js ” richiede la funzione “addBase()” per definire gli stili di base come oggetti JavaScript. Questo post ha illustrato tutti i possibili aspetti per aggiungere stili di base in Tailwind CSS.