Seguimos progresando con Tailwind CSS y Vue 3, pero en esta entrada, voy a centrarme en recursos en exclusiva para trabajar con Tailwind. Y es que, aunque es interesante conocer todas las clases y todo lo que puedes hacer, existen un montón de sitios que te pueden ayudar.
La idea fundamental de esta entrada es, aprender “copiando”, porque muchas veces, aprender solo leyendo la documentación es tedioso. Así que, nada mejor que visitar varios sitios para localizar lo que vamos buscando y proceder a la adaptación a lo que necesitamos.
Empezamos con ….
Tailwind Toolbox
Si necesitas iniciar un proyecto desde cero, en TailWind Toolbox tienes muchas cosas para empezar. Si necesitas una plantilla, dispones de un buen puñado de ellas, que te llevarán a distintos repositorios de GitHub. Si necesitas algún componente, otra opción es que el código está incluido dentro de la misma página donde te explica cómo es el componente, (por ejemplo, este ejemplo de carrusel).
También dispones de una serie Kits y de Generators, para que sea más facil crear tus componentes según tus necesidades gracias a estas herramientas.
Por último tienes también una serie de plugins oficiales de Tailwind CSS a tu disposición.
Tailwind Components
Una idea muy similar a la anterior, pero muy centrada en los componentes, es lo que puedes encontrar en Tailwind components, otro repositorio de componentes de la comunidad para su libre disposición. Están organizados por tipo, lo que facilita la localización de lo que buscas.
Por ejemplo, si necesitas un componente para hacer Login, aquí puedes encontrar varios. Y en concreto, este login form es el que voy a utilizar en la siguiente entrada.
Tailblocks: una de bloques
Si tras las dos visitas a las páginas anteriores, aún no has encontrado nada, otra buena opción es pasar por tailblocks, que son también componentes listos para utilizar, y casi todo su código está localizado en GitHub.
Una de colores con Tailwind Ink
Si lo que necesitas en Tailwind CSS es trabajar con una plantilla de colores, una buena solución es pasarte por Tailwind.ink, que de deja preparado el código a incluir. Es sin duda un genial recurso para disponer de los colores a tu gusto y necesidad, de una forma rápida y cómoda.
Tailwind templates
Si necesitas plantillas para iniciarte, en lugar de hacerlo tú de cero, otra buena alternativa es tailwindtemplates.io, que dispone de otra buena variedad de componentes.
Otros recursos para aprender Tailwind CSS
Si estas empezando, una busna opción para practicar es hacerlo desde el play: https://play.tailwindcss.com/. Para que practiques y veas lo que construyes en tiempo real.
Y si quieres estar a la última de lo que sucede con Tailwind, te puedes suscribir a una newsletter.
Mi experiencia con Tailwind CSS y los recursos
A día de hoy, abril de 2021, he trabajado más bien poco con Tailwind CSS, y el motivo fundamental es porque voy paso a paso aprendiendo desde Vue 2 a Vue 3, y aún no está disponible Vuetify para trabajar con la versión 3. Es decir, que he utilizado Tailwind CSS un poco forzado por la situación.
He visto varios video tutoriales para iniciarse con Tailwind, necesarios para conocer la filosofía y poder ponerla en práctica, al menos en lo más básico. Evidentemente, tener fluidez en el front-end co Tailwind necesita de tiempo, y yo me he centrado más en aprender Vue 3 que en Tailwind, así que he tirado mucho de componentes de las páginas de recursos que he mostrado en esta entrada para el desarrollo de los ejemplos con los que he trabajado.
Debo admitir que trabajar en el front-end no es lo que más me gusta, porque no soy diseñador gráfico (ni pretendo serlo) y es una labor que me cuesta bastante, y en ese aspecto, Vuetify lo hace más sencillo porque viene mucho predefinido. Por contra, Tailwind CSS hila más fino y te permite ajustarte perfectamente a lo que necesitas, porque hay clases para todo.
De todas formas, me ha resultado cómodo trabajar con los componentes y plantillas predefinidos que he ido encontrando, lo que ha facilitado que mi evolución con Vue 3 siga siendo buena, cómo bien lees.
Y hasta aquí he llegado! buen día!