TailwindCSS - Trello Kanban

[00:00] In this video we're going to build a trello like kanban board. The end result won't look exactly like the trello board, but it will be close. We'll have horizontal scrolling, vertical scrolling, edit buttons appearing on card hover, and so on. Enjoy the video!

[00:12] The first thing I'm going to do is open my tailwind config file and remove the nonito font; we'll just use the default ones. Then I'll open the web routes file and add a new route. We'll do route, get, board, function, and we'll simply return an inertia view.

[00:40] Then I will go to resources/js/Pages/ and create a new component called Board.vue. We'll use script setup, and I'll add a template, and here we'll have a container to hold everything together, a header, and a main section.

[00:58] Let's go into browser to /board, and here it is. Now the container will be a vertical flex, so we'll do flex flex-col, and it will need to fill up the entire screen, so we'll do h-screen, and let's also add a background bg-blue-600. The main element will need to grow to fill all the available space, so we'll use flex-1, and then to prevent the header from shrinking we'll do shrink-0.

[01:31] Inside the header, we'll have the logo; let's say "kanboard", and the navigation with my boards, and a button that will become a drop-down at some point.

[01:50] Let's take the elements one by one and style them. For the header, we'll have flex and justify-between to push the elements to the side, bg-white, and let's add some padding px-4 py-3, the logo will be text-xl font-black, and let's say tracking-tight.

[02:01] The link will be text-sm font-medium, let's add some padding, and rounded-md hover:bg-gray-100, that looks right. Now, for the image we'll do h-9 w-9 inline, and then rounded-full. Let's add some left margin to the button, we'll do ml-3, and that's pretty much it.

[03:05] Inside main we'll have a container that will need to be a vertical flex, so we'll do flex flex-col, and we'll need to fill up all the space, so we'll do h-full. Now inside it, we'll have one section for the board title and the settings, so do div and say title and settings, and another one for the cards.

[03:29] Now the cards section should grow, so we'll do flex-1, and we'll need to prevent this from shrinking using shrink-0. Here we'll have an h1 for the title and the container for the settings button. Let's style the elements. We'll start with the container, we'll do flex justify-between item-center and let's add some padding.

[03:58] For the title, we'll do text-xl text-white font-bold, the button will have bg-white/10and then on hover we'll do bg-white/20. Let's add some padding, font-medium text-sm text-white rounded-md.

[04:34] Now, for the settings button, I want to add an icon; something like three dots. So I'll use heroicons which can be installed as a vue library. I'll open my terminal and say npm install @heroicons/vue.

[04:54] Let's search for the icon, I'll do "dot...", and I want this one right here. To use it, I can go inside my setup and say import {DotsHorizontalIcon} from @heroicons/vue/solid. Now I can grab this and use it as an element, and let's give it a w-5 h-5, and let's turn this into an inline-flex items-center and add the span so we can add some left margin.

[05:49] Let's move on to the cards. We'll have an inline-fle which will need to take all the available space, so we'll do h-full, and inside it we'll add our first card list. We'll have a container and then a section for the title and options, and another one to hold the card items. The card items will actually be a list, so let's do ul, li, and then we'll need another section to hold the button that we'll use to add more cards.

[06:26] Let's also add the title and options; so we'll do h3, let's say "backlog", and a button for the options; and let's style the items starting with the card list container. We'll do w-72 bg-gray-200, and this will be a vertical flex so we'll do flex flex-col rounded-md. For the title and options container we'll do flex items-center justify-between and let's add some padding. We'll do px-3 py-2; that looks good.

[06:54] Then for the title we'll do text-sm font-semibold text-gray-700, for the options we'll actually use the three dots icon, so let's grab this, put it here, and to style the button we'll do bg-gray-300 w-8 h-8 rounded-md and then to place the icon in the middle of the button we'll use grid place-content-center, and let's use the gray background on hover; here it is.

[07:58] Moving on to the card item, we'll wrap this within an anchor tag, and we'll do class text-sm and then here, we'll do bg-white. Let's add some padding, some shadow, rounded-md, and then border-b border-gray-300, also on hover we can do something like hover:bg-gray-50.

[08:35] Okay, here we should also have an edit button, so let's add it. I'll go here, and add button and I'll import the pencil icon from @heroicons, grab it, place it here, let's use w-5 h-5, and then to position the button we can do absolute top-0 right-0, and let's also add relative to the parent. Let's continue with w-8 h-8 bg-gray-50. Let's center the icon using grid place-content-center, let's change this to top-1 and right-1 to have some spacing, let's continue with rounded-md text-gray-600, and then on hover we'll do text-black and hover:bg-gray-200. Let's test it out, here it is; but then again the icon should only be visible when we hover the card, so now it should be hidden. We can do that using group-hover, but first I will add the group class to the card, and this button will initially be hidden and then we'll turn it into a grid on group hover, and here it is.

[10:22] Now, let's duplicate this card and add some margin between the items. I'll go here and say space-y-3 and let's also add some padding to the parent: we'll do px-3 and pb-3. Moving on, let's style the add card button, but before that, let's import another icon the plus icon. Grab it, go here, paste it in, h-5 w-5, and then wrap the add to cart text within a span to add some margin.

[11:09] The button will be flex items-center, let's add some padding text-sm font-medium text-gray-600 and hover will turn it into text-black and let's also change the background: we'll do hover:bg-gray-300 and rounded-md; let's make it with full and add some margin top. Here we'll do class mt-3; there we go.

[11:57] Now to prevent the list from stretching all the way down we can go to its parent and add items-start, and since we are here, let's also add some padding. Next up, let's make it so we have a really long list of card items, and we can use javascript for that. I'll go here and do v-for="item in Array.from({length: 100})", and there we go. As you can see this worked but it broke our layout. To start fixing it we can go to our main element and add overflow-hidden and we'll also add that to the card list container, and this fix it a bit but the list is still not scrollable.

[13:06] We could try adding overflow-y-scroll or overflow-y-auto but this still wouldn't work because there's nothing constraining the parent. So we need to go to the parent and say min or max, h-full. So this will constrain the parent and now our list is scrollable. However, I wouldn't want to scroll all the way down just so I can see the add to cart button, so let's add another container here and move this here and then this will become a flex and this will push all the way down. We'll also need overflow-hidden here and there we go.

[14:17] Next up, we'll do that loop again but this time on the horizontal axis such that we have more than one card list. We'll go here, where is it, here, and we'll do v-for="item in Array.from({length: 10})". Let's add some spacing using space-x-4 on the parent and if I try to scroll to the right, it doesn't work. That's because we have this overflow-hidden class. We should replace this with overflow-x-auto, and now it works.

[15:07] Finally, let's change this back to one, and add another list with an add list button. So I'll minimize this, and say div w-72, and inside it we'll have a button, we'll use the same plus icon, and we'll do w-5 h-5, and then span. This will be a flex item-center bg-white.

[16:13] Okay this looks nice, maybe...let's use "add another list" to have the same label as trello. Okay, let's go back here and let's add, let's say 7, and view this in a larger browser. Here it is; we have horizontal scroll, we have vertical scroll, we have an edit button, we have an options button, and we have an annoying thing which is this scroll bar right here. I would like it to appear more to the right. We can go here, and instead of applying the padding here, we can apply it there; and there we go. And we should also add it here on the add to cart container.

[17:12] And we are done. This is how you can build a trello like kanban board using TailwindCSS.