Uso de Tailwind CSS
De principio puede parecer más complicado y engorroso utilizar Tailwind para nuestros proyectos porque requiere de una serie de pasos de configuración, pero con la practica veras que estos pasos son casi nada en comparación con los beneficios y el tiempo que nos ahorra en futuro. Aqui te llevaremos de la mano paso a paso para poder tener tu configuración lista y ponerte a estilizar de una manera diferente.
Primero instalamos las dependencias
Luego inicializamos nuestro proyecto de Tailwind
Despues creamos un archivo llamado postcss.config.js
En él escribimos la siguiente configuración
Y agregamos estas lineas a nuestro archivo de estilos
Solo nos falta configurar un script en nuestro package.json para hacer el compilado de los etilos
Y por utlimo lo corremos y agregamos este archivo resultante a nuestro html
Ahora podemos ver que se han aplicado los cambios en nuestro proyecto, si quisieramos más personalizacion podemos en nuestro archivo de configuración de tailwind.config.js editar los estilos por defecto que nos agrega Tailwind. En mi caso agregare una fuente y un color.
Este archivo es opcional pero de mucha ayuda, ahora nos toca pasar a utilizar el verdadero potencial de Tailwind pero eso será editanto las clases de nuestro HTML.
Recursos:
Esta Cheat Sheet de Tailwind es un Must en tus archivos guardados.
El proyecto final lo pueden encontrar en este repo de github.