Come configurare i percorsi dei modelli in Tailwind CSS

“ CSS vento in coda ' è un framework CSS versatile e ben noto che modella il contenuto HTML con l'aiuto di classi CSS integrate e personalizzate. È anche utile personalizzare il modello specificato secondo i requisiti dell'utente. L'intero processo richiede la configurazione dei modelli in cui l'utente utilizzerà il CSS di Tailwind. Il CSS Tailwind non può essere applicato se l'utente non configura il percorso del modello. Pertanto, la configurazione dei percorsi del modello è un prerequisito e obbligatorio.

Questo post illustra la procedura per configurare i percorsi dei modelli in Tailwind CSS.

Come configurare i percorsi dei modelli in Tailwind CSS?

IL ' tailwind.config.js Il file di configurazione viene utilizzato per configurare i percorsi del modello in cui l'utente desidera incorporare il CSS di Tailwind. Non è presente di default, tuttavia può essere creato nel progetto utilizzando il gestore di pacchetti 'npm'.

Questa sezione esegue alcuni passaggi essenziali per configurare i percorsi del modello nel file 'tailwind.config.js'.

Nota : per implementare 'Tailwind CSS', installare prima ' Node.js ” applicazione nel tuo sistema tramite il link fornito “ https://nodejs.org/en ” per eseguire i comandi.

Passaggio 1: installa 'TailwindCSS'
Innanzitutto, crea un nuovo progetto denominato 'Project1' e aprilo nell'editor di codice. Ora apri il nuovo terminale e installa 'Tailwind CSS' con l'aiuto del seguente comando:

npm install -D tailwindcss

Nel comando precedente, ' npm ' è il gestore di pacchetti del nodo che installa 'TailwindCSS', come segue:

Qui l'output mostra che il 'Tailwind CSS' e i suoi pacchetti sono stati scaricati correttamente.

Passaggio 2: creare il file di configurazione Tailwind
Successivamente, crea il file di configurazione CSS di Tailwind ' tailwind.config.js ” per estendere le sue funzionalità come specificare i percorsi del modello HTML, le classi definite dall'utente e molti altri utilizzando questo comando:

npx tailwindcss init

L'output mostra che il file di configurazione specificato è stato creato. Ora, dai un'occhiata al ' tailwind.config.js ' file:

Passaggio 3: aggiungere le direttive Tailwind al file CSS principale
Ora, per aggiungere funzionalità speciali al progetto Tailwind creato, aggiungi le seguenti tre direttive tailwind preesistenti nel file principale ' style.css ' file:

@base del vento in poppa;
componenti @tailwind;
utilità @tailwind;

Nel blocco di codice sopra:

base : è il primo livello di 'Tailwind CSS' che modifica lo stile della pagina Web per impostazione predefinita come il colore di sfondo, il colore del testo o la famiglia di caratteri.
componenti : Questo secondo layer è disponibile all'interno della classe “container” che aggiunge la larghezza in base alla dimensione del browser. Nella sua sezione, l'utente può aggiungere i propri componenti esterni creati.
utilità : è il terzo livello che somma quasi tutte le classi di stile come ombre, colori, aggiunta, flessibilità e molte altre classi.

Queste direttive possono essere visualizzate nella seguente finestra:

Passaggio 4: crea il CSS
Ora, crea il CSS utilizzando lo strumento CLI Tailwind eseguendo il seguente comando. Analizzerà tutti i file modello e creerà il CSS nel file ' dist/output.css ' file:

npx tailwindcss -i . / stile .css -o . / dist / output.css --watch

Si può osservare che il comando precedente viene eseguito correttamente. Ora, la struttura del file del 'progetto1' è simile a questa:

Passaggio 5: creare un modello HTML e configurarne il percorso
Creare il template HTML in cui l'utente vuole incorporare il “Tailwind CSS” e poi configurarne il percorso nel “ tailwind.config.js ”. Diamo prima un'occhiata al seguente modello HTML ' indice.html ”:

< Testa >
< collegamento href = '/dist/output.css' rel = 'foglio di stile' >
< / Testa >
< corpo >
< h2 classe = 'text-center font-bold text-white bg-orange-500' >Benvenuto in Linuxhint!< / h2 >< fratello >
< h3 classe = 'text-center font-bold text-blue-600 bg-pink-400' >Primo tutorial: Tailwind CSS Framework.< / h3 >< fratello >
< P classe = 'text-center text-green-500' >Tailwind CSS è un noto framework CSS che aiuta a impostare le classi CSS predefinite su stile i tuoi elementi HTML.< / P >
< / corpo >

Nelle righe di codice sopra:

La sezione 'testa' utilizza il ' ” tag per collegare il file CSS creato/compilato “ /dist/output.css ' con il file HTML esistente ' indice.html ”.
La sezione 'corpo' specifica prima il '
” tag che definisce il primo sottotitolo utilizzando la classe Tailwind “ Allinea il testo ” per regolare il suo allineamento al “centro”, “ Peso carattere ” per “grassetto” il testo, “ Colore del testo ' per aggiungere il colore specificato e ' Colore di sfondo ” per applicare rispettivamente il colore di sfondo specificato.
Successivamente, il “
' e il '
I tag utilizzano anche le classi Tailwind sopra discusse per modellare il loro contenuto.

Configura il percorso del modello HTML
Successivamente, apri il ' tailwind.config.js ' e aggiungi i collegamenti o il percorso nella sezione 'contenuto' del file modello HTML, ad esempio 'index.html':

contenuto : [ './indice.html' ]

Premere ' Ctrl+S ” per salvare le nuove modifiche.

Passaggio 6: eseguire il codice HTML
Infine, esegui il codice HTML 'index.html' nel server live e guarda il suo output:

Produzione

Come visto, l'output mostra il contenuto HTML in stile con l'aiuto di Tailwind CSS.

Conclusione

Tailwind CSS utilizza il ' tailwind.config.js ” file di configurazione per configurare i percorsi del modello HTML creato. Specifica il “ contenuto ” che include il percorso esatto di tutti i modelli HTML, i file sorgente contenenti i nomi delle classi Tailwind e i componenti JavaScript. Esamina il file HTML specificato e quindi implementa Tailwind CSS nel suo contenuto. Questo post ha illustrato la procedura completa per configurare i percorsi dei modelli in Tailwind CSS.

Come configurare i percorsi dei modelli in Tailwind CSS