Ionic Capacitor con Tailwind
Tailwind es un marco de css que ha ganado bastante popularidad por su gran infinidad y facilidad de personalización, siendo usado por muchos para optimizar tiempos en sus desarrollos. Tailwind no intenta quitar de camino a los desarrolladores que trabajan directamente con el css y que hacen cosas grandiosas, es una alternativa para poder realizar diseños grandiosos también ahorrándonos gran tiempo en el desarrollo y enfocarnos en la funcionalidad al tener a tailwind de nuestro lado.
Después de buscar en internet la forma en integrar Ionic con Tailwind he encontrado una de las formas que me parecen mas correctas y quiero compartirlas así que empecemos.
La configuración actual de Ionic instalada para este ejemplo es la versión 6.13.1 y angular cli 11.1.4.
Creamos un nuevo proyecto siguiendo la doc oficial de Ionic en esta configuración usaremos Angular como framework.
ionic start myApp tabs --capacitor
cd myApp
Habilitamos Capacitor
ionic integrations enable capacitor
Hasta el momento se ha creado el proyecto normal de Ionic
Instalando Tailwind a nuestro proyecto
Para instalar Tailwind usaremos el siguiente comando que nos facilitara la vida ya que es un agregado a las bondades de angular para facilitar su instalación pero al usarlo directamente con ionic tendremos que hacer unos cuantos ajustes para aprobecharlo al máximo.
ng add @ngneat/tailwind
Seleccionamos class
y por último las opciones a usar en mi caso he seleccionado todas.
Configurando Tailwind con ionic
Ahora han pasado cosas interesantes en nuestro proyecto se han agregado un par de archivos en especial que son tailwind.config.js y webpack.config.js los cuales tendrán la configuración de tailwind para poder usar en nuestro proyecto.
Pero también se han modificado nuestros archivos de css en este caso variables.css
estos 3 imports que se ven en la linea 1,2 y 3 debemos moverlos a global scss a mi consideración una mera mas limpia de mantener nuestro css.
Bien en nuestro global css se movieron los archivos tailwind y he comentado el css utils opcional de ionic ya que usaremos el tailwind para personalizar nuestro proyecto mas que el de ionic pero he dejado algunos css que no interfieren con tailwind que son los basic css pero para que estos pueden subsistir debemos quitar el primer caracter que aparece antes del arroba dejando solo el arroba tal y como aparecen en la imagen.
Por ultimo la configuración de nuestro archivo angular json debió actualizarse en una parte del build al haber instalado tailwind así que solo veámoslo en que parte para asegurar que se tiene igual.
Listo ya tenemos instalado tailwind, ahora levantemos el proyecto y hagamos cosas grandiosas con este gran marco de css tailwind, realmente no necesitas mas documentación para usarlo que su pagina oficial tailwindcss.com el cual viene con una gran cantidad de documentación que te ayudara en tus procesos de maquetación.
Por ultimo comparto parte del proyecto con el que actualmente estoy probando tailwind.
