In the previous post, we completed a simple example with Vue 3 and Composition API, always starting from a template that we prepared to start the new version of Vue. How we didn’t make it pretty, now we try Tailwind CSS, the CSS utilities framework.
Why I am testing Tailwind CSS
The quick answer is because Vuetify is not ready for Vue 3 yet, and although it is increasingly difficult for me to learn frameworks, I think this one is worth it.
Honestly, every day I find it harder to learn new frameworks because every so often, a new one comes out, takes on fame, lasts for several months, and a new one appears. Designers are changing, they are creating trends, … and each day it becomes more comfortable, partly because Vuetify has much of what I need.
In this blog I have tried several CSS frameworks de CSS. One of the most famous is Bootstrap, but I also wrote about PureCSS (around 2014), and of course Vuetify, and now Tailwind CSS.
Unlike Vuetify which has many predefined components, Tailwind requires you to know many “classes” to get things perfect, since it is not as trivial as in other frameworks. For the good and the bad, of course!
Perhaps, that is the best point in his favor: that he has a lot in store. The worst: that it is not obvious, that is, that doing one thing may require including several classes.
Install Tailwind CSS from CDN
Let’s keep on working without using Node, and let’s use the CDN installation , so, you only need to include this line in the HTML file:
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
How can you read in the instructions when installing from CDN, you will not have the possibility to make several customizations, but I think they are for when you already have experience and need to exploit very advanced features of Tailwind.
Tailwind and Visual Studio Code
Like any self-respecting framework, it has to be accompanied by good tools and good documentation. The second, it is undoubted that it has, and the first also.
In case you use Visual Studio Code, it is good to know that you can install the Tailwind extension.
With no doubt, a good help!!
Also, and as a recommendation, you can visit TailwindComponents where you have lots of things ready to use.
The philosophy of Tailwind
Before starting, it is best to understand the philosophy of the project, which is different from other frameworks, where many things are applied with a class and styling the components at the end always requires CSS customization.
And it is that Tailwind has a series of “utilities” that, to print style to the components, makes use of these default classes, reducing the need for CSS customization. In short, another point of view.
Obviously, the first thought before this is: but are we going back? Yes and no. Yes, because it is learning many things, and not because everything is very well organized.
- You don’t need to make up new class names, because you hardly need to write CSS code
- Your CSS is limited, and it won’t grow much.
Vue 3 List with TailwindCSS
The full code is available on GitHub. Once prepared with Tailwind in the index.htm, we are going to prepare the form to add a new item to the list. It looks like this
The code of template in the component looks like this:
<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>Next, let’s prepare the title, in the main component:
<h1 class="sm:text-3xl text-2xl font-medium text-center title-font text-green-900 mb-4">{{title}}</h1>And it looks like this:
to end with, let’s apply some styles to the elements:
Additionally, we have incorporated a button to delete from the list, and thus we have modified the component, leaving the code with this lines:
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 other entrance, I will try to explain more details about TailwindCSS, but as you may guess, for the right visualization of elements, you need to include several classes.
The example finishes looks like this:
Too much to choose, and a lot to learn, everything without almost no Javascript code!
Happy coding!
PD: didn’t I comment that i really hate to-do apps? 🙂