Esta publicación demuestra el procedimiento para configurar las rutas de plantilla en Tailwind CSS.
¿Cómo configurar rutas de plantilla en Tailwind CSS?
El ' tailwind.config.js El archivo de configuración se utiliza para configurar las rutas de plantilla en las que el usuario desea incrustar el Tailwind CSS. No está presente de forma predeterminada, sin embargo, se puede crear en el proyecto utilizando el administrador de paquetes 'npm'.
Esta sección lleva a cabo algunos pasos esenciales para configurar las rutas de las plantillas en el archivo “tailwind.config.js”.
Nota : Para implementar “Tailwind CSS”, primero instale el “ Nodo.js ” aplicación en su sistema a través del enlace provisto “ https://nodejs.org/en ” para ejecutar los comandos.
Paso 1: Instalar 'TailwindCSS'
Primero, cree un nuevo proyecto llamado 'Proyecto1' y ábralo en el editor de código. Ahora, abra la nueva terminal e instale el 'Tailwind CSS' con la ayuda del siguiente comando:
npm install -D tailwindcss
En el comando anterior, “ npm ” es el administrador de paquetes del nodo que instala “TailwindCSS”, de la siguiente manera:
Aquí, el resultado muestra que 'Tailwind CSS' y sus paquetes se descargaron correctamente.
Paso 2: Cree el archivo de configuración de Tailwind
A continuación, cree el archivo de configuración Tailwind CSS “ tailwind.config.js ” para ampliar su funcionalidad, como especificar las rutas de la plantilla HTML, las clases definidas por el usuario y muchas otras mediante este comando:
El resultado muestra que se ha creado el archivo de configuración especificado. Ahora, eche un vistazo a la “ tailwind.config.js ' archivo:
Paso 3: agregue las directivas Tailwind al archivo CSS principal
Ahora, para agregar una funcionalidad especial al proyecto Tailwind creado, agregue las siguientes tres directivas de viento de cola preexistentes en el principal ' estilo.css ' archivo:
@componentes de viento de cola;
utilidades @tailwind;
En el bloque de código anterior:
- base : Es la primera capa de 'Tailwind CSS' que modifica el estilo de la página web de forma predeterminada, como el color de fondo, el color del texto o la familia de fuentes.
- componentes : Esta segunda capa está disponible dentro de la clase 'contenedor' que agrega el ancho según el tamaño del navegador. En su sección, el usuario puede agregar sus propios componentes externos creados.
- utilidades : Es la tercera capa que suma casi todas las clases de estilo, como sombras, colores, adición, flexión y muchas otras clases.
Estas directivas se pueden ver en la siguiente ventana:
Paso 4: construye el CSS
Ahora, cree el CSS con la herramienta Tailwind CLI ejecutando el siguiente comando. Escaneará todos los archivos de plantilla y construirá el CSS en el ' dist/salida.css ' archivo:
Se puede observar que el comando anterior se ejecuta con éxito. Ahora, la estructura de archivos del 'proyecto1' se ve así:
Paso 5: cree una plantilla HTML y configure su ruta
Cree la plantilla HTML en la que el usuario desea incrustar el “Tailwind CSS” y luego configure su ruta en el “ tailwind.config.js ”. Primero echemos un vistazo a la siguiente plantilla HTML ' índice.html ”:
< enlace href = '/dist/output.css' real = 'hoja de estilo' >
< / cabeza >
< cuerpo >
< h2 clase = 'texto-centro fuente-texto en negrita-blanco bg-naranja-500' >¡Bienvenido a Linuxhint!< / h2 >< hermano >
< h3 clase = 'text-center font-negrita texto-azul-600 bg-rosa-400' >Primer Tutorial: Tailwind CSS Framework.< / h3 >< hermano >
< pag clase = 'texto-centro texto-verde-500' >Tailwind CSS es un marco CSS bien conocido que ayuda a configurar las clases CSS predefinidas para estilo tus elementos HTML.< / pag >
< / cuerpo >
En las líneas de código anteriores:
- La sección 'cabeza' utiliza el '
” etiqueta para vincular el archivo CSS creado/compilado “ /dist/output.css ” con el archivo HTML existente “ índice.html ”. - La sección 'cuerpo' primero especifica el ' ” etiqueta que define el primer subtítulo usando la clase Tailwind “ Texto alineado ” para ajustar su alineación en el “centro”, “ Peso de fuente ” para poner en “negrita” el texto, “ Color de texto ” para agregar el color especificado, y el “ Color de fondo ” para aplicar el color de fondo dado, respectivamente.
- A continuación, el “ ' y el ' Las etiquetas ” también usan las clases Tailwind mencionadas anteriormente para diseñar su contenido.
Configurar la ruta de la plantilla HTML
A continuación, abra el “ tailwind.config.js ” y agregue los enlaces o la ruta en la sección “contenido” del archivo de plantilla HTML, es decir, “index.html”:
Prensa ' Control+S ” para guardar los nuevos cambios.
Paso 6: Ejecute el código HTML
Por último, ejecute el código HTML 'index.html' en el servidor en vivo y vea su resultado:
Producción
Como se ve, la salida muestra el contenido HTML con estilo con la ayuda de Tailwind CSS.
Conclusión
Tailwind CSS utiliza el ' tailwind.config.js ” archivo de configuración para configurar las rutas de la plantilla HTML creada. Especifica el “ contenido ” que incluye la ruta exacta de todas las plantillas HTML, los archivos de origen que contienen los nombres de clase de Tailwind y los componentes de JavaScript. Escanea el archivo HTML especificado y luego implementa Tailwind CSS en su contenido. Esta publicación ilustró el procedimiento completo para configurar rutas de plantilla en Tailwind CSS.