Build a Card with Tailwind + Vue [NO COMPONENT LIBRARY 😅]
ฝัง
- เผยแพร่เมื่อ 23 ก.ย. 2024
- I use Tailwind component libraries a lot! So I thought I would see how difficult it was to build a card component using Tailwind CSS and no component library. I built the Tailwind card component in Vue.js but the principles are the same for any framework or technology that is capable of using Tailwind!
To get to the same starting point as me, you will need to install a new Vue project. I did this in the standard way, using npm. I then installed Tailwind into my Vue.js project using the instructions for Vite on the Tailwind website. You will then need to create a new component named "Card" and import it into your App.vue file. Once you have done this you are at the exact same starting point as I am in this video!
From the starting point I started building my card component in the Card.vue file. I did this by first adding the HTML markup for the card and then fleshing it out with an image, a title, some content and a button. I then used Tailwind CSS classes to style each part of the card. Next I made the card reusable by defining props on the card. To demonstrate this I created a v-for loop in my App.vue file and looped over an array of cards, creating a grid.
If you can't be bothered to create your own card component using Tailwind, there are plenty of Tailwind component libraries that have pre built cards you can use. I personally like Tailkit (tailkit.com/?a...) because it has a ridiculous amount of components. Obviously if you think you are better than a professional designer then design your own components 🙂
If anyone is actually reading this description, let me know by leaving a secret code in the comments to confuse other viewers. Thanks.
Alpha bravo seven four zero 🕵
I was thinking of buying a ui kit. Which is better tailwind ui or flowbite? Which would you recommend assuming you have used/bought both? Or is there some other ui kit you recommend.
I've not used flowbite so can't comment on that. Tailwind UI is great, Tailkit also great (check my link in description 😉) - those 2 are the standouts from what I have personally used and I have the paid versions of both.
What are you planning on using it with? React, Vue, HTML or something else? If you were planning on using it for HTML components i would go for Tailkit because their HTML components come with the required Alpine.js javascript. With Tailwind UI you need to add your own Alpine.js (or other javascript) to the HTML components. This isn't a huge undertaking but it is a bit annoying
@@codingoblin i mostly use react with nextjs so probably tailwind ui. Thanks for the reply ☺️
Tailwind UI will be great for you - they also have website templates built with nuxtjs 😀