Com configurar els camins de plantilla a Tailwind CSS

“ CSS de vent de cua ” és un marc CSS versàtil de bona reputació que dissenya el contingut HTML amb l'ajuda de classes CSS integrades i personalitzades. També és útil personalitzar la plantilla especificada segons els requisits de l'usuari. Tot el procés requereix la configuració de les plantilles on l'usuari utilitzarà el CSS de Tailwind. El Tailwind CSS no es pot aplicar si l'usuari no configura el camí de la plantilla. Per tant, la configuració dels camins de la plantilla és un requisit previ i obligatori.

Aquesta publicació mostra el procediment per configurar els camins de plantilla a Tailwind CSS.

Com configurar els camins de plantilla a Tailwind CSS?

El ' tailwind.config.js ” s'utilitza per configurar els camins de plantilla en què l'usuari vol incrustar el CSS de Tailwind. No està present per defecte, però es pot crear al projecte mitjançant el gestor de paquets 'npm'.

Aquesta secció porta a terme alguns passos essencials per configurar els camins de la plantilla al fitxer 'tailwind.config.js'.

Nota : Per implementar 'Tailwind CSS', primer instal·leu el ' Node.js ' aplicació al vostre sistema mitjançant l'enllaç proporcionat ' https://nodejs.org/en ” per executar les ordres.

Pas 1: instal·leu 'TailwindCSS'
Primer, creeu un projecte nou anomenat 'Projecte1' i obriu-lo a l'editor de codi. Ara, obriu el nou terminal i instal·leu el 'Tailwind CSS' amb l'ajuda de l'ordre següent:

npm install -D tailwindcss

A l'ordre anterior, ' npm ” és el gestor de paquets de nodes que instal·la “TailwindCSS”, de la següent manera:

Aquí la sortida mostra que el 'Tailwind CSS' i els seus paquets s'han descarregat correctament.

Pas 2: creeu el fitxer de configuració de Tailwind
A continuació, creeu el fitxer de configuració CSS de Tailwind ' tailwind.config.js ” per ampliar la seva funcionalitat, com ara especificar els camins de la plantilla HTML, les classes definides per l'usuari i moltes altres utilitzant aquesta ordre:

npx tailwindcss init

La sortida mostra que s'ha creat el fitxer de configuració especificat. Ara, mireu el ' tailwind.config.js ' dossier:

Pas 3: afegiu les directives Tailwind al fitxer CSS principal
Ara, per afegir una funcionalitat especial al projecte Tailwind creat, afegiu les següents tres directives preexistents de vent de cua a la part principal ' estil.css ' dossier:

@base del vent de cua;
components @tailwind;
utilitats @tailwind;

Al bloc de codi anterior:

base : és la primera capa de 'Tailwind CSS' que modifica l'estil de la pàgina web per defecte com el color de fons, el color del text o la família de tipus de lletra.
components : Aquesta segona capa està disponible dins de la classe 'contenidor' que afegeix l'amplada segons la mida del navegador. A la seva secció, l'usuari pot afegir els seus propis components externs creats.
utilitats : és la tercera capa que suma gairebé totes les classes d'estil, com ara ombres, colors, addició, flexió i moltes altres classes.

Aquestes directives es poden veure a la finestra següent:

Pas 4: creeu el CSS
Ara, creeu el CSS amb l'eina Tailwind CLI executant l'ordre següent. Escanejarà tots els fitxers de plantilla i crearà el CSS al ' dist/output.css ' dossier:

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

Es pot observar que l'ordre anterior s'executa correctament. Ara, l'estructura de fitxers del 'projecte1' té aquest aspecte:

Pas 5: creeu una plantilla HTML i configureu-ne el camí
Creeu la plantilla HTML en la qual l'usuari vulgui incrustar el 'Tailwind CSS' i després configureu-ne el camí a ' tailwind.config.js ”. Mirem primer la plantilla HTML següent ' index.html ”:

< cap >
< enllaç href = '/dist/output.css' rel = 'full d'estil' >
< / cap >
< cos >
< h2 classe = 'centre de text font-text en negreta-blanc bg-taronja-500' >Benvingut a Linuxhint!< / h2 >< br >
< h3 classe = 'font de lletra del centre de text-text en negreta-blau-600 bg-rosa-400' >Primer tutorial: Tailwind CSS Framework.< / h3 >< br >
< pàg classe = 'text-centre text-green-500' > Tailwind CSS és un marc CSS conegut que ajuda a configurar les classes CSS predefinides per estil els vostres elements HTML.< / pàg >
< / cos >

A les línies de codi anteriors:

La secció 'capçal' utilitza el ' 'etiqueta per enllaçar el fitxer CSS creat/compilat' /dist/output.css ' amb el fitxer HTML existent ' index.html ”.
La secció 'cos' especifica primer el '
'etiqueta que defineix el primer subtítol utilitzant la classe Tailwind' Alineació de text ” per ajustar la seva alineació al “centre”, “ Pes de la lletra ' per 'negreta' el text, ' Color del text ” per afegir el color especificat i el “ Color de fons ” per aplicar el color de fons donat, respectivament.
A continuació, el '
' i la '
” Les etiquetes també utilitzen les classes Tailwind comentades anteriorment per dissenyar el seu contingut.

Configura la ruta de la plantilla HTML
A continuació, obriu el ' tailwind.config.js ” i afegiu els enllaços o el camí a la secció “contingut” del fitxer de plantilla HTML, és a dir, “index.html”:

contingut : [ './index.html' ]

Premeu ' Ctrl+S ” per desar els nous canvis.

Pas 6: executeu el codi HTML
Finalment, executeu el codi HTML 'index.html' al servidor en directe i vegeu la seva sortida:

Sortida

Com s'ha vist, la sortida mostra el contingut HTML amb estil amb l'ajuda de Tailwind CSS.

Conclusió

Tailwind CSS utilitza el ' tailwind.config.js ” fitxer de configuració per configurar les rutes de plantilla HTML creades. S'especifica el ' contingut ” que inclou el camí exacte de totes les plantilles HTML, els fitxers font que contenen noms de classe Tailwind i els components JavaScript. Escaneja el fitxer HTML especificat i després implementa Tailwind CSS al seu contingut. Aquesta publicació il·lustra el procediment complet per configurar camins de plantilles a Tailwind CSS.

Com configurar els camins de plantilla a Tailwind CSS