Rebuilding Discord w/ Tailwind CSS v1.0

what's up guys Andre here in today I need to recreate the UI for discord using tailwind CSS now in my browser we have the discord app open and we are in detail Mencia channel and in my other tab we have the recreated version we built using tailwind CSS now it's not exactly the same as you can see the colors are different I'm just using tailwind default colors here the fonts not the same and I didn't transfer every little thing over from this chord but after a first pass I think it's pretty good so yeah join me as we build this I'd like to do just one video so it's probably gonna be a really long one so grab a snack or grab a drink and join me as we do this also protip watch it at 1.5 X so you can save some time okay so I have a project here where I store all of my tailwind v1 examples and it is a Knox project just so I can easily generate static sites with it and host it on net life I so I already added this cord here and it goes to a blank page which is what we'll be working off of so since it's done unfortunately I'm not gonna do the installation of tailwind and if you're using next when you make a new Knox project it'll actually ask you if you want to use a tailwind project if you want his tail and free CSS framework and if you say yes it will install it for you so that's what I did and I upgraded to v1 because when I did it it was still using the old version or if you look at this repo it has examples for different types of projects and there's ones for next year and you can look at that or any other type of project you're working with okay let's begin so let's go into the discord app and take a look at this structure here so I usually start with the structure the layout and just lay that out accordingly and once I have that in place I'll just start to build out the different components so next example we have this channel sidebar we have this hashtag sidebar we have this top bar we have the actual chat section we have the chat with the input and we have a user section so a bunch of different components again I think the most important thing is getting the structure / layout done correctly so as you can see here each of these sections Scrolls independently you can't see this section right now but the chat and the users all have their own scroll box and initially when I did it I used fixed positioning for all of them and that worked out but fixed positioning if you know or if you don't know it takes the element out of the document flow very similar to how absolute positioning does it and if you're using that all over the place it feels a bit hacky nonetheless it does work if you want use fixed positioning that's totally fine you just have to account for different pairings and different margins because once you fix it it will like I said go out of the document flow so I was looking at something that Adam wasn't built on his stream and he built this side out using rotation and there's a sidebar here as well that's at the top bar and in this desktop mode you'll see that it's fixed as well so the layout is sort of similar to what we have in this chord and I looked at his code and to my surprise there were actually no elements that used to fix positioning so once I looked at it he was actually using flexbox in a flex call position so this way and he used a trick where he just used a height 100% on the whole thing and he gave the elements that needed to scroll over flow Y ro and that actually worked out and it's much cleaner than using fixed positioning all over the place so yeah let's keep that in mind so again let's take a look at the discord layout and to start let's forget about this section for now and let's just pretend like it's only this section and then we'll add that left section in after so just pretend it's like this and we'll start that way so we're gonna use flexbox and we're gonna do that flex call trick that I just described so it's gonna be this way so top to bottom and the first flex item is going to be this top bar and the second one will be the rest of it so let's start with that so back into our app just go into our code that's ahead flex here so class flex let's make it flex column so let's top to bottom and it's added the 2 flex items so the first one's gonna be the top bar and the second one will be just the rest stay at rest and it's give these colors so we can see what we're doing so it's to be G red 500 it's to be G blue 500 whoops class and let's see what we're working with here okay so I want this risk to span the whole browser so we can do flex one and that should do that and that didn't work we might have to put minimum age of screen so that's minimum viewport 100 viewport height height 100 viewport height is what that does okay so that's how we want it okay now let's take a look at this chord and we have these sections here so let's do this so for the top bar we have this and then we have the rest like this let's do that so for this section this will also be flex and then the first section will be what's in there tailwind CSS so this is their section right here and the next section will be this so I say tailwind CSS and next section will be let's just say rest of top bar and see that looks ok let's change the color of that peachie read 300 and see how that looks okay cool now we want this to be a certain width and we do not want that to change so I think the width I have here is a custom width which will add in a second of 56 and flex none just make sure it doesn't grow or shrink when we resize the browser okay so 56 seems to work do we have that you know Taylor config or is it the default see spacing okay so there is 56 cool and as you can see as we resize our browser it doesn't change cool now for the section underneath it's similar and we want to give it the same width but there's also this extra section on the right which is the user side blur so let's copy this first and then we'll add this in so we want to do flex as well and then the first section will be what's the first section the hashtags idler so hashtag sidebar and that will be with a 6 flex not as well and then the section after that will be the rest see if that works okay let's give it some colors say green 300 and then green 500 sorry BG and we want this rest to flex one as well so flex one okay cool so now we want to add this user sidebar in so we'll add that in here as a flex so this one here will be another flex container and then the items will be this as the first item and then the sidebars the second item so let's go and do that so let's make a flex and then the first item will be just play chat content and then the second item will be the user's sidebar okay see that looks okay and we also want to position this to the right obviously it's color at first actually excuse BG indigo 300 and then BG indigo 600 okay and we want this to be on the right so we can do justify content space between and that would be just to fight between okay cool and we want this to flex one remember this is a flex item of the parent we want this to flex one actually no we just want to flex one over here if I'm not mistaken some flex one okay cool and we want the sidebar to be the same size of this so this is with 56 unbeliev yeah same as what we have up here with 56 and it's also flexed knowing okay cool and now that's looking pretty close to this again ignore this for now we'll add that later in later on so we have these two sections we have this hashtag sidebar cool we have the chat contents and we have the user sidebar awesome so now let's work on scrolling so right now everything just Scrolls together depending on the element that has the highest height so for example if I add some more text in this hashtag sidebar everything will just scroll relative to that so where's my hashtag sidebar let's just add some lorem text here okay and now you see that scrollbar and Scrolls accordingly but we don't want that we want everything to scroll independently and like I said earlier on I originally used to fix positioning but then I discovered what Adam did and he uses flexbox and let's do that so as I set it up we're using flex and a direction is in column so top to bottom and that's part of what you have to do to get it to work like this but something else you have to do is give it a height of screen so all the stars is height 100% and that's not gonna change anything so far and now what we want to do is set the second flex item so in this case this to overflow why hidden so let's do that so this is the first flex item the top bar this is the second flex item so I said overflow I hidden for now and that's gonna remove the scroll bar and he can't scroll this anymore so to get the scroll bar back just for this section we can add overflow why auto just to this so just do the hashtag sidebar so right here overflow why auto that should do it and there we go the top is fixed and now this section Scrolls independently so yeah really cool and simple trick that I learned from Adams stream and he does it in this site here if you wanna take a look and definitely much cleaner than using fixed positioning everywhere so let's do the same for these sections over here so this and this just play chat contents so let's do overflow why auto and it's add a whole bunch of text in here say lorem 1200 okay there you go Scrolls independently and this remains fixed and still the same for a user sidebar so hey Laurel 200 and then let's give it some space here overflow why are there we go cool now what that also does is it allows us to have this section over here which always remains on the bottom which is similar to this so let me show you this actually it's the same as the section over here so this will always remain in the bottom and let's go ahead and do that then so we just want a section here that always remains on the bottom despite if you're scrolling or not so let's start with that start with the hashtag sidebar and what we want to do is make this a Flex container as well but have it in the Flex call direction so I'll top the bottom and then we'll do the first item will be all of the stuff here and then the second item will be the bottom sidebar and since we have with I mean since we have height 100% on the whole thing then it will always remain on the bottom so yeah let me just show you what I mean so this is a section for the sidebar we want this to be a Flex container as well we want to be flex call and we want justify between so the two items will have 2 flex items and then the first one will be everything up here and then the second one will be down here I hope that makes sense and then for this we're going to remove this and have this on the first flex item so let me just wrap all of this in a div I just cut that I have no div paste that in and we'll put the overflow Y hidden on this one not hidden overflow Y Otto on this one and then the second item will be the thing on the bottom so it's do BG gray 500 and bottom let's see if this works and there we go cool as you can see it always remains there because we have height 100% on the whole thing and we'll give it a proper height later on once we get to that but as you can see it is working as expected and it's do the same thing for this chat section and that's for this over here the chat always remains on the bottom okay so let's copy this chat section is here will remove this overflow while Otto okay we'll paste that in here and now we can set this as overflow why Otto and then we can paste all this stuff in there grab all of this okay got that and paste it in here cool and that should be the same now I should be able to scroll it still okay cool now if the second flex item will be in the section where we input our chat so that's the first one and this is the second one here there should close it so it should be like this chat input goes here let's give it a class BG gray 800 700 okay and there it is down there cool and as we scroll it stays independent of this bottom bar awesome okay now if you look at our layout it is pretty much like what we need except this section over here so we have all this top bar side bars and the bottom which is fixed to the bottom but we're using flexbox for that now let's add this left section here so everything we've done so far I want to keep this whole thing everything we done as another flex item so we're gonna use flex again like I said everything here is what we've done already this will be a flex item of another Flex container that we're gonna use so this would be the second flex item and the first one will be this sidebar here so I hope that makes sense it doesn't I will show you what I mean back to our code so how this whole thing works but we have to wrap it in another Flex container for that left sidebar to work so we'll do flex and we'll close this at the end cool then that and now this will still work because this is the only flex item okay so still works awesome now we want another one for the left sidebar and that is also a fixed width let's let's say 24 and let's just say logos because that's what the local logos go and see how that looks okay so let's just fix the width I think I have to do flex none so it doesn't grow or shrink that should make it larger okay and 24 is not the actual size I want the size I have in the finished project is 20 and I think that's a custom width if I'm not mistaken let's check here 20 you know it's not okay cool so 20 should work at that school but now if I add more stuff here say norm 100 no see what happens okay so now it is screwed up here the scrolling works how it did before and doesn't maintain what we did here so I need to fix this is pretty much do the same thing we did here and give it a height and make it flex call so same thing I did right here so I'm gonna grab all of this we don't even need the min age screen anymore I will add anyways and we'll add it here and now this can be wrapped in a div as the first flex item and hopefully that fixes it and it does cool as you can see it actually no didn't work and we just have to add overflow why Auto here and see if that fixes it and it does cool actually I think they should go on here if I'm not mistaken on this one I think okay cool so that did the trick and we can just put this back to logos because it's just gonna be a bunch of logos cool and one thing I forgot to mention is this cord is not responsive I mean it's fluid but if you resize the browser you can see that the chat display section is the only section that it's fluid and the way we've been working that's what we're that's what we've done here so yeah the only thing that fluid is the chat display session cool so yeah this is our layout again this was the most important thing now we start to fill in the different sections of different components in the discord site so let's go ahead and start ok let's start working on this sidebar over here so I'm gonna call it the channel sidebar and before I continue I just want to note that I'm gonna try to make a commit before each section that I do and I just made one for the layout that we just completed finish overall layout so in case anyone wants to check out the code and go back in time you can just check out their specific commit and you'll see what we have done up to that point and I've also added these icons for the rest of what we need and we need an intersection here okay so let's begin let's start with the color so as you can see there are approximately three shades of grey so the darkest one is here and get slightly lighter inning it's slightly lighter here - and I am just using tailwinds default colors so let's go with the darkest gray for this section so that would be BG gray 900 so let's do BG gray 900 for this one okay cool and for the text actually there is no Texas if it's all just icons okay let's go ahead and give it some padding here so I'm gonna do px 2 py to see if that give it some padding it does cool and let's go ahead and start adding some logos in here so I'm gonna make an unordered list you don't have to but that's what I have here on the center of the text and each item is gonna have an anchor tag and also an image and the image like I said I just added all the icons and they're in the static folder and you can just reference them at the root so B icon discards the first one and it's called discord and see if that renders cool and we want it to be a certain height and a width so I did 12 and rounded fall so it's a circle okay okay and I need to Center it too that worked okay that doesn't work I think we have to do it on the actual image okay cool okay so that's looking pretty close happy with that let's continue actually let's add a for this one there is a border on the bottom so let's add that on this Li border P border gray 700 and see how that looks okay cool now as you can see this is slightly longer than I want it to be it's actually shorter so what we can do is add another this title just specific for that border so let me just cut that li class equals that and then we can do we can do mx4 and give it a margin top see if this is okay so that's better go and I'm just gonna paste in these two and if you look closely I didn't do this left border to indicate what's active and some minor thing that I left out so let's just paste these and obviously the animation I didn't do it because that's too advanced for this initial layout so I'm gonna paste those in okay so I've pasted those in and for the rest of them these ones I used inline SVG s so let's go ahead and do one of them together and then I'll paste the rest in so mt3 similar to this the ones up here and gonna put this on its own line because there's gonna be a lot of classes on the anchor tag and SVG is gonna go inside the air attack but let's give the anchor tag some classes so similar to the image above with 12 by 12 so it's the same BG gray 800 text teal 500 because if you look at this cord then you can see the text here or before you hover over it it's steel let's make an inline block and round it full so I think this is gonna make a circle just put some text in there and yeah that's what doesn't make some circle cool and let me show you my process for doing SVG's or for looking up SVG's i've showed this in a few my other videos but I'll do one more here so for this icon it is a plus so let's look for a plus icon in icon jar which is one of my favorite apps I have all these icon sets in here just google them they're all free and I'm looking for the plus sign and I want a solid one so I think the one I used in my project was this one I believe IVA icons and there's one little circle but since we already made a circle ourselves then we'll just use the one without a circle we can copy as SVG inline code and usually what I would do is go to SVG oMG to optimize it and I'll do it here one time but for the rest of them I won't so I just paste it in and then you can just grab the optimized version so I copied that back into our code and then here paste it in okay and see if this renders anything and it does cool and that looks a bit too large for me so let's try to make it smaller see if it works okay so we have to leave it at 12 because that's the size of the circle okay I'm gonna change the icon amusing because the one before is a bit too large so I'm gonna take this one copy the inline code again you can do SVG oMG to optimize if you want and just see if this is a good size respect our code okay so this is a good size so I'm gonna add some classes here with this let's do class equals actually we don't do any classes most have to fill equals current color so if that works okay cool and now we can add a hover effect on this right now there's nothing but if we add offer on this so hover be gt500 and however text white over here that should add some basic hovering there we go cool and I think I forgot to paste in the view channel here so I'll add that and there's the view icon and in the paste a and the other ones here to save some time okay so I paste I did the other two in and I also change this one to match the other icon sets just so it has like the same stroke width and it looks more consistent so yeah I think that's it for the channel sidebar we can go ahead and make a comment here so I'll do that here say get add get commit discord finish channel sidebar cool okay let's continue with the top bar here so let's start off with the colors so in this section this was text gray 900 or PG gray 900 so this one will be 800 so let's start with that so where's that right here some believe it's this one so the G gray 800 so no it's not that when it's the other one it was just one VG gray a hundred and let's take the color off of this one and just put it specifically on the Flex item here and this one originally I put it this 700 and you can see that so let me make this full with a rest of top bar also be flex one I think echo but the difference between 700 and 800 was too much I mean looks fine now but later on it looks like it's - it looks like to me it was too much so I made a 750 here and all I did was take 800 and move it slightly to the left so it's slightly lighter and I'm gonna add that to my tailwind config right here and I already have it copied in my clipboard and I also copied in 850 which we'll use later on as well okay so now back toward this chord it changed 700 okay I did already 700 to 750 and now these two should work okay cool so let's start with this section over here and that's gonna be flex justify between so let's go ahead and add that in here so it's gonna be flex item center justify between and it's get some padding the x3 py 2 and the first item is this table in CSS and then the next one is gonna be the Chevron down which I will make a button and then Chevron goes in here SVG mean SVG and let's see if this works okay cool and it's just give it a some white text so this whole thing will be text white it's the whole thing wait not this one yeah this one cool and let me just paste in the SVG that's physically okay here okay I didn't see that looks okay looking pretty good awesome looks like it's slightly light a slightly darker but that's okay let's work on this section so the way I have it is again flexbox justify between and this will be the first flex item and this will be the second flex item but each one of these is a flex container as well and it will have this one in particular will have this one and then this one and then each one of these icons will be a flex item in this Flex container okay let's get started so for this one and this is going to be flex flex items center justify between and then this will be the left and this will be the right see if that works okay cool and let's give it some padding so I'm gonna do px4 here okay and let's start with this section over here so it's just these items here so I'm going to do flex and I'm gonna have three items one for this hashtag is for general and then another one for general discussion Hotel in CSS so that will be in here and this will be flex as well and items Center and then the first item will be this is the hashtag or the pound sign text to excel and then just add the hash symbol the next one is gonna be ml to [Music] detect small text white this one will be the name of the channel or name of the section of the channel and this one will be general discussion of tailwind CSS and this one will have a few classes warder ll padding-left of three margin after three there's a border gray 600 text extra small and text gray 400 okay and see how that looks it looks pretty good now let's work on the icons over here and let's go ahead and make this flex as well item Center and then these will all just be links so let's make an anchor tag or it could be buttons I'll just leave them as anchor tags let's give it a margin left of 4 so let's just put some 1 character in there just to see how it looks okay it looks pretty good and I'm just gonna paste in the icons here again it's the same process as what I showed you already just finding icons in the icon jar okay so I pasted it in the icons here this s is for search which will add in a second but this looks a bit too thin for me this top bar so let's go ahead and add a height on that and I believe which section is this and see what this is it's this one and if you add a H 12 or something well that that's a mite okay it does right okay that's cool so it's flex text white up here so right here let's do age 12 and that should add some height whoa so let's go ahead and add this form here as you can see it's just a basic search form with an icon there we'll do quickly so right here let's add a form and kind of set this to relative because we have to set the search icon to absolute it has to be relative to this form input type is text placeholder or equals search and class is rounded PG gray 900 text gray 200 it's really small text and get some padding okay see how that looks cool now we just have to add that search icon here so right underneath the input let me get a base band let's make it absolute right zero top zero and give it a margin right and then here is where the SVG goes which I'm just gonna paste in it spaced out in okay and I added some classes and some Heights on the SVG see how this looks okay looks pretty good we have to bump this down a bit so let's just give it some style equals top six six pixels I think is good there we go looks pretty good and now I'm gonna change the color of these to the correct color because there's actually a border bottom on these which you can't really see unless we change the color of this so I'll change this to be G gray 800 slash text sidebar hashtag sidebar this one will be BG gray 800 okay cool and this one will be BG Quay 750 so it's gonna you don't need this actually and it's gotta be displayed chat contents and this one will be DG Caray 750 okay cool and we don't need this one too and now we can see that there's no border there so let's add that so outside this one first so for general okay so I think it's this one no I think it's this one here so let's do border be border gray 900 see if that works okay cool and it's add the same to this one here I'll just grab this and it would be this one I think okay cool so yeah I think that pretty much does it for the top bar and yeah I'll go ahead and make a commit here so let's add it this chord finish top or cool okay let's continue with this hashtag side bar over here so let's get started as you can see some of them have titles and this one doesn't so the way I did it was each section here has a unordered list so this would be one on ordered list and this would be another one and so on and so forth so the first one doesn't have a title so this just goes straight into the UL just do that so still ul Li and ul will have some padding on it X 2 py 3 and the list item will have a class on it as well for the text px 2 over text grey 200 and hover PG gray 900 and this will have an anchor tag and this is gonna be flux container so flex center first one's gonna be let's make it a span text XL that's just going to be the hash tag and then the other one is what's this one just give it a margin left and this will be the actual name and see how that looks okay it looks pretty good and actually want the text to be smaller so we can put that here but here actually text SM okay and we can add another one for FAQ so let's do that just grab this duplicate it change it to FAQ okay cool and now we can just do one with the title and then I'll just paste it at the rest in so for titles I end the UL and then I just add a new section here and as you can see they're collapsible so I'll make it an anchor tag or you can make a button as well I guess I'll make it a button and it's gonna be flex flex item Center it's flex because there is a chevron before it so first flex item is a chevron and next one is a title so flex item Center let's give it a color as well and give it a hover 200 okay and this will just be the chevron which I will paste and I'm also going to copy the name of the title so there's two flex items one is the chevron and the other is the title and they have some glasses on here to make it look correct and yeah that's how it looks cool and here's two other states for the ones above which I didn't show it looks pretty good cool so yeah I'm gonna paste in and the rest because it's basically the same as you can see the selected one is might be pulled or semi bold or white and I don't have this icon here again it's just something else that I didn't do yeah I'll be back after I paste in the code okay so I paste it in a bunch of other menu items here and if you look at the real discord you'll see some of them are white and that indicates that there's been some activity in the chat so let's add a few those just have to change the color of some of them so I'll just go here and for example help let's do talks let's do chord F so that those one should be highlighted now we're not highlighted but have white and for the one that were currently on in this case general we need to give it a background as well so let's do that so for general let's do that so this will be 200 so be BG graves make it the same color as this that be 750 and I think rounded as well okay cool okay now let's work on this section here on the bottom which has information about myself and has a few icons here so I start with the color so it's not the same color as this but it's not the same color as this as well so I have an extra color in between these two so in our case this is 900 this is 800 so I made this one 850 so let's add that so where's that bottom right here let's make it 850 okay cool and let's give it some padding on the top and bottom so py4 and what color is it is a white yeah well we can just set the color in here so I'll just leave it just see if it gives it padding okay and it has to be a Flex container this one will be one flex item and then these three icons will be one this will also be a Flex container and then I have a tall be one and then my name will be the other so let's do that so Flex items Center justify between so let's just say left and right see if that works oh actually no that didn't work just fire between cool and I think the padding is too much I think it's one px 2 P Y 2 so change that change it to px 2 UI 2 or I can just do P 2 I like to separate X&Y ok and for the first one it's another Flex container so let's do that it's my avatar and my name and then my ID supposed to be flex as well and on to item Center first one will be an avatar so it is a link so we'll wrap it in an anchor tag or button most of these should actually be buttons I just I'm so used to using anchor tags they should just be anchor tags after actual links but that's fine image source again I have taken their already called avatar jpg mr. avatar and it's give it a class of with 8 height 8 and rounded full to make it a circle and that should do it for my avatar ok cool looking good and I'm gonna add this little online indicator it just indicates if you're online or away or sleep that's just another thing I didn't do so let's add another section here for my name and it's extra small text access it's also margin left in the first item it's white just my name and then when after that it's gonna be it's gonna be text gray 500 and I added another section to making even smaller text and I'll add that in a second 9 5 8 9 is my ID and there we go but we have to add text X X X s to my tail wing config and that would be under font size where its font size there we go so we just have to let me just copy this whole thing and add it here in our extents and this will extend this so we need 1 for x XS and I have it set to 0.5 I believe and now that should be smaller okay cool sorry x-axis there you go so it's that the one underneath smaller but this one is still XS cool and now for the right side we want to make that a flex container as well and just have a few icons flex I hope Center it's also set the color of them gray 500 and I'm just gonna do this and put a character in here and the other two have a class of ML 3 but not the first one though and see how that looks okay cool so I'm gonna paste in the icons the SVG icons in here okay so I paste it in those icons see how it looks it looks pretty good again I didn't do everything the same as you can see there is like a little cross the indicates mute I didn't add that but yeah that's our hashtags sidebar should be complete now and it looks pretty pretty good yeah let me make a commit here and then we'll move on to the next section so let's add stuff commit say discord finish hash tag sidebar okay cool okay so let's work on the chat section now now if you look at this court you'll see that there is a lot going on in the chat section here for example there's code there's different types of messages there's tagging people there's emojis there's upvotes and that's a lot of style so I'm just gonna do the most basic one and just repeat that so the most basic would just be this in Avatar the name and just a chat system in here our chat box in here so let's go ahead and do that so as you can see or maybe you can't see it there's a slight border on each chat section and I'm gonna say I'm just gonna do a border top for those ones and then every time we add one will be a border top on that and then this will just be flexbox this be one section and then the message and all the details will be do section so let's go ahead and do that so here's what the chat goes it's add some stuff here so I want to make it small and it set the default color to gray 400 okay so it'll be flex and you want to give it some margin on the top and bottom or sorry not too much left on the right top and bottom will be three I mean some padding as well and water top is here border gray 700 and the first item will be the Avatar it's put a negative and it's give it a class of flex none so it doesn't change size and then this will be an image and then it will be just do what we have in here maybe the finished product I'll add different images but for now I'm just gonna use this one image of myself and have to give it a class with ten high ten did full and that is all I think it's actually a link so let me wrap this in an anchor tag let's do that like that and let's see how that looks okay so that is our avatar you can see you might never will see it but there is a porter on the top and now we'd have to work on the actual chat section so it would be this next item let's give it a margin left of five and I'm going to separate it out into two dates one will be for this first section and then the next one will be for the actual message so let's do that and this is a link it's white text white however underlined and this is the user name and then the next one is the details of when that message was posted by the time whatever that's slightly smaller tax grey 600 give it margin left one we can say a date 2019 okay see how that looks cool looking pretty good and then the next session will just be the message that's that and then this will be the message and I'm gonna make this one multiple lines some of the comment I already used so awesome okay let's see how it looks and that looks pretty good now if I just add a whole bunch of them that will give me a good indication of that how that looks so I'm gonna delete all this stuff just remove all this cool and I am gonna duplicate these just to see if it looks right so let's make a whole bunch and then I'll paste in ones that have different content in them okay so we have an issue here so before we had text going all the way to the end so it looked right but now we don't so we do have some issues so let's fix this so it's not a difficult to fix just remember if you remember actually the whole wrapping flexbox flex container that we did earlier so the first flex item is just channel sidebar and the next one is this I think we if we just add flex one here this should fix it okay it does so let's just add flex one two this one which was the second flex item of the route flex container so look for that this is the root flex container this is the first flex item and this is the second one switch out of there flex one and that should fix it cool and this looks pretty good so yeah I'm just gonna paste in some different content in here just so it looks slightly better okay so I pasted some content in here and this is actual content from the discord chat so it looks like a real chat now we can move on to the chat input so where we actually chat so let's go ahead and do with that so that would be chat input goes here right here and I'm gonna make it flex item Center so it goes in the middle vertically and mx4 and the color is not right it's 5750 let's do that oh and it's also give it a height so I'm gonna give it a height right here I think I have it at 24 okay cool and now if you look at this it looks like one giant input but it's actually not there's a button here and there's a button here so that's what we'll do let's put the input in there first so just put the input in here so it's a flex container so let's do that and see how that looks and let's make it with full so I believe this has to be full let me just make it flex one I think and then the input can be fully I think let's see that works with full okay cool so let's style the input first so with full text I'm making a height of 10 px 2 py 2 PG gray 700 text great 200 focus outline:none okay see how it looks it looks pretty good and the text looks pretty good let's make it round it too okay but like I said there are buttons here and buttons here so let's add this one first and let's put it in another container actually it's just make it a button straight up and that's the SVG is gonna go inside so let's give it a class px 2 py 2 H of 10 so it's the same height as the container for the input box ug oops same same background color I don't did left actually yeah let's not make this rounded cuz I'm gonna make the button the buttons surrounding them around it so this one's left text gray 500 our text white border are so border on the right let's make that 600 okay and I'm just going to grab the plus SVG and paste it in and then hopefully this looks good okay and see how this looks and it looks pretty good so there's the icon this is the border right it's not exact if you look at this the border doesn't spend the entire height of the info box but that's okay that's the way I have it it's not exact but it's close enough for me and if you look here there's also a border on the top so let's add that just to separate this content from the input on the bottom so let's put it right here border the border grace 600 and see how it looks there we go looks pretty good okay and now let's just add the buttons on this side so as you can see there is one here and a button here and has emojis cool actually it's three buttons one button for each of these buttons here okay so after the input container let's put another container here give it some padding and the three buttons will go inside the container but its style this container first py 2 PG gray again same as the input container and now it's rounded on the right this flex item Center and height of 10 and let me just grab one of these buttons you know what I'm gonna grab all of them and it's just a bunch of buttons with SVG's in them same as above and see how that looks looks pretty good and I am pretty happy with that and this finishes the chat section so yeah it looks pretty let's resize the browser to make sure it still looks decent it does cool so yeah I'm gonna make a commit there let's do it ad commit discord finish section cool okay let's finish off the last section here which is the users sidebar so let's go ahead and look at our first I guess and it's similar to this hashtag sidebar with a title similar to that and just a bunch of users so let's quickly work on this and then we'll call it a day so let's change the color first so let's go to it users sidebar and the color is PG gray 800 okay and let's go ahead and give it some padding directly here so px 3 py 3 let's remove all their stuff for now ok and the first thing I want to do is just add when did I save that let me save it first okay first thing I wanna do is just add this title here so I'm gonna use an h3 for that make an uppercase tracking wide and just make it font semi bold small text gray 500 and give it a margin bottom and this one is core team just one see that looks just a section over here cool and similar to how I had unordered lists here for each of these sections I'm gonna do the same for the list of users so in this case it's only one and then for on lines 216 in this case so let's do that oops so we'll be a ul let's give the margin-bottom of six and then Li text gray 500px 2 and then let's just put everything in here hover text gray 200 / BG gray 750 and py 1 my - okay let's put the anchor tag in here and let's give it a class now flex my time so Center and the first flex item will be a another anchor tag this is the image and I'm just gonna put my image in there avatar jpg avatar let's give it a class with 8 height 8 rounded full so it's a circle and then the next item will be ml - and then this is just a name let's put atoms name in there ok did that work yeah looked like it worked cool and I'm just gonna paste in and you just copy the next heading in so exciting would be online so let's do that after this you will so that would be that h3 let me just change this - this - is actually longer than the - on the keyboard so I'm gonna paste change that see that looks looks pretty good and then we just have to paste in a bunch of users in here and that's what I'm gonna do okay so I paste it in a bunch of users and they're all just the same and there we go looks pretty good let's take a look at the original okay looks like there's more space here the original but that's pretty good and we have the hover action going on here and again there's other minor things I didn't do like the status indicator and the thing that indicates what you're playing what game you're playing or what program you have opened I'm not gonna do that so yeah it's make another commit here and then we'll look at the scroll bars - okay add new commits discord finish users sidebar okay and now let's quickly work on the scroll bars and let's make them dark because this light doesn't really go with the dark theme and it's see if we can fix that so I have this link from CSS tricks which shows you the current state of styling scroll bars and it's fairly recent and fairly updated and I just copied this basically what does this one not this one and if you look at the CSS there's only a few things going on just some pseudo selectors for WebKit scroll bar track WebKit scroll bar and the actual scroll bar so I'm just gonna grab some custom CSS here and I'm gonna paste it in my custom CSS so throughout this whole thing we don't have any custom CSS so that's pretty great but for scroll bars unfortunately we have to add some custom CSS so day one CSS and I'm gonna paste it in and for each one we need three three pseudo selectors and I've done them for sidebar users sidebar users this channel bar which is this and then what else do I have here sidebar users channel bar and the hash tag bar and the chat actually so this for actually one two three four so I should be twelve things here so chat hash tag bar sidebar users and channel bar and that's basically it we just have to add these classes to wherever we add overflow why auto so let's start with the chat actually so let's look for yeah-ha-ha and then we'll add sidebar which one it's called chat right yeah it's called we'll add the class chat to that and then you can see the scrollbar change so what am i doing I'm doing this and you can see here is where I have the overflow why auto so just add chat here with any luck this should work the closest okay so after a refresh it worked cool and as you can see I also made it a bit thinner because that's how it looks in here it's not exact but it's pretty close as long as it's not weed light scrollbar it looks much better so I'll do the same for this user sidebar why did I name it side by users or either side bar side by users so let's grab this let's go back to here let's go into core team core team and right here we can add side by users I'm gonna say that and I'm going to refresh and after a refresh it changed the sidebar and it's still the same for these two let me just resize my browser so you can see it I was just doing here okay so let's resize it down so we can see the scroll bars on these two sections and where they called one is called hash tag bar just look for that that would be this section where we have welcome so for welcome overflow why Auto right here right here actually let's do a shtick bar okay see if that worked cool after I refreshed it worked and it's finish it off with this channel sidebar what did I name that I named it the channel bar subscribe that so look for that up here so it's the discord icon where's that right here overflow wild side channels channel bar save and refresh cool so there you go we added the dark scroll bars and it looks much better note that this only works in webkit-based browsers and it doesn't work in non webkit-based browsers it'll just have a default scroll bar unfortunately so there you have it guys we've managed to recreate the discord UI using tailwind CSS a long video but I hope you start with me and I hope you learned something new please like comment and subscribe if you haven't already done so thanks for watching guys see you in the next one okay thanks bye [Music]

Channel: Andre Madarang

Views: 19,571

Rating: 4.9607072 out of 5

Keywords: tailwind css, tailwind css vue, tailwind css nuxt, tailwind css v1.0, tailwind css clone, tailwind css tutorial, tailwind css lesson, tailwind css nuxt purgecss, andre madarang, drehimself, tailwind css beginner, tailwind css 1.0, tailwind css discord, discord tailwind css, tailwind discord, discord tailwind, discord css, css discord, rebuild discord css, discord clone css, discord clone, tailwind css svg

Id: t54tuaoHVLo

Length: 77min 22sec (4642 seconds)

Published: Mon Jul 29 2019

Reddit Comments

[u/Braedv]

Just thought this guy had a very soothing voice. Enjoy! :)