En la entrada anterior, completamos un simple ejemplo con Vue 3 y Composition API, siempre a partir de una plantilla que preparamos para iniciar la nueva versión de Vue. Cómo no lo pusimos bonito, ahora probamos Tailwind CSS, el framework de utilidades CSS.
Por qué probamos Tailwind CSS
Pues básicamente porque Vuetify no está soportada por Vue 3, y aunque cada vez me cuesta más aprender frameworks, creo que este merece la pena.
Sinceramente, cada día me cuesta más trabajo aprender frameworks nuevos porque cada cierto tiempo, sale uno nuevo, coge fama, dura varios meses, y aparece otro nuevo. Los diseñadores van cambiando, van creando tendencias, …. y uno cada día se vuelve más cómodo, en parte porque Vuetify dispone de mucho de lo que necesito.
En el blog hemos probado con unos cuantos frameworks de CSS a lo largo de nuestra trayectoria. El más famoso siempre ha sido Bootstrap, pero también probamos PureCSS (esto fue por 2014), por supuesto Vuetify, y ahora Tailwind CSS.
A diferencia de Vuetify que tiene muchos componentes predefinidos, Tailwind requiere que conozcas muchas “clases” para dejar las cosas perfectas, ya que no es tan trivial cómo en otros frameworks. Para lo bueno y lo malo, por supuesto!
Quizás, ese es el mejor punto a su favor: que tiene mucho preparado. Lo peor: que no es evidente, es decir, que hacer una cosa es posible que requiera de incluir varias clases.
Instalamos Tailwind CSS desde CDN
Cómo seguimos sin usar node, vamos a usar la instalación desde CDN, lo que requiere solo que incluyas el acceso al CSS:
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
Cómo puedes leer en las instrucciones al instalar desde CDN, no tendrás la posibilidad de hacer varias personalizaciones, pero que yo creo que son para cuando ya tienes experiencia y necesitas explotar características muy avanzadas de Tailwind.
Tailwind y Visual Studio Code
Cómo todo framework que se precie, tiene que venir acompañado por buenas herramientas y buena documentación. Lo segundo, es indudable que lo tiene, y lo primero también.
Es altamente aconsejable, en caso de usar Visual Studio Code instalar la extensión de Tailwind.
Sin duda, una buena ayuda!
También vendrá muy bien pasar por TailwindComponents para disponer de muchas cosas ya preparadas.
La filosofía de Tailwind
Antes de empezar, lo mejor es comprender la filosofía del proyecto que es distinta a otros frameworks, donde con una clase se aplica muchas cosas y estilar los componentes al final siempre requiere de personalización de CSS.
Y es que Tailwind dispone de una serie de “utilidades” que, para imprimir estilo a los componentes, hace uso de dichas clases predeterminadas, reduciendo la necesidad de personalización de CSS. En definitiva, otro punto de vista.
Evidentemente, el primer pensamiento ante esto es: pero ¿estamos volviendo atrás? Si, y no. Sí, porque es aprender muchas cosas, y no porque está todo muy bien organizado.
- No necesitas inventar nombres de clases nuevos, porque casi no necesitas escribir código CSS
- Tu CSS está limitado, y no crecerá mucho.
Vue 3 List con TailwindCSS
El código completo del ejemplo lo teneis disponible en GitHub. Una vez preparado con Tailwind en el index.htm, vamos a preparar el formulario para agregar un nuevo elemento a la lista. Queda tal que así:
El código del template del componente queda tal que así:
<form @submit.prevent="enviar" class="m-4 flex">
<label class="block">
<input v-model.lazy="tarea"
class="rounded-l-lg p-4 border-t mr-0 border-b border-l text-green-800 border-green-200 bg-green-100"/>
<button type="submit" class="px-8 rounded-r-lg bg-green-600 text-gray-100 font-bold p-4 border-green-800 border-t border-b border-r">Add</button>
</label>
</form>Lo siguiente será preparar el título, ya en el componente principal:
<h1 class="sm:text-3xl text-2xl font-medium text-center title-font text-green-900 mb-4">{{title}}</h1>Y el resultado, hasta el momento:
Y por último, damos estilo a los elementos:
Adicionalmente, hemos incorporado un botón para eliminar de la lista, y así hemos modificado el componente, quedando el código tal que así:
const template = `
<div>
<h1 class="sm:text-3xl text-2xl font-medium text-center title-font text-green-900 mb-4">{{title}}</h1>
<ul v-for="(i, index) in lists" key="index" class="list-inside">
<li class="rounded-t relative -mb-px block border p-4 border-blue mb-4 bg-green-100">
<button @click="remove(index)" class="flex-no-shrink bg-white p-2 ml-2 border-2 rounded text-red border-red hover:text-red
hover:bg-red">x</button>
{{ i }}
</li>
</ul>
<addNew @nuevo="nuevo"></addNew>
</div>
`;En la siguiente entrada, intentaré explicar más detalles sobre TailwindCSS, pero habrás notado que para realizar la correcta visualización de algún elemento, es necesario trabajar con múltiples clases.
El ejemplo concluye tal que así:
Hay mucho donde elegir, y mucho que aprender, y todo esto, sin incluir casi absolutamente nada de Javascript!
Happy coding!
PD: He comentado lo que odio los to-do? 🙂