Rebuilding Sick Fits with Tailwind CSS

hey everyone in this video we're going to rebuild the ui for the sick fit app from the full stack advanced react and graphql course by westboss let's get into it alright so here's the website for the course in question advancedreact.com and if i scroll down a little bit you can see here a video of the app that's being built throughout this course this course has been recently refreshed and entirely re-recorded and you can see the stack that is being used here so in the front end it's using react and next.js specifically and the back end is going to be handled by keystone which is going to provide the graphql api as well as the admin ui where you can manage your content okay i've got the sig fits app running here locally on port 8000 so here's what it looks like and you can see we have a grid of products here and there's a total of 11 products now for the backend i have keystone running on the port 3000 here and you can see we have these 11 products here and here's the list of the product we've been putting up now this app here is going to be our reference point and if you wonder where it's coming from it's the app in the finished application directory from the westboss slash advanced react github repository so we're going to use this as our reference point for what we're building we're only going to build this products page we're not going to look at individual products listing and we're going to start from this almost completely empty page which is another nexjs app running on port 7777 let's take a look at the code for our starting point because i have a minimal amount of boilerplates to get us going since this is a nexus app let's look in the pages folder and the underscore app.js which is the app shell which is the component wrapping every page in our next app back in the tech stack listing you can see we're using apollo clients to communicate with the backend so we're gonna be able to do things like fetching data from the graphql api with queries i'm not going to cover how this works in this video but you can see we have an apollo provider here and it wraps our entire app inside of this you can see we have a header component which we're going to use to handle this section with the logo navigation and search and then we have our page component which is going to be what gets rendered on every page okay so let's look at this header component which comes from component slash header in here component header and you can see we have a list of links here that we're going to use for the navigation and for now just an h1 that says seek fits and then we have a single page index.js in the pages directory and there's a bit of boilerplate going here but if i scroll to the bottom essentially it just returns a paragraph tag saying product list if i go back in my keystone backend in the list of products and we click on the first one you can see we have fields for name description a photo which is an object with a source and an alt text and then we have a status and a price field and that's basically the fields that we're asking for here in this query down here in my page function you can see we use apollo's use query and we pass this query we've defined and it gives us three items a loading state an error and if everything goes well the data if loading is true we're just going to return a string of loading and if we got an error we're going to display that error if we get past these two conditions we should have our data down here so let's try it instead of returning a paragraph tag here i'll return an ordered list and inside of there i'll go data dot and a response came nested in the object called all products which is an array of products so we're going to map over this and for each product let's return an li let's quickly pass the key of product dot name and let's try it i'll put the product name here product that name and yep looks like it's working fine let's change product.name to product.description and now we got the product descriptions all right let's look at our tech stack one more time and you can see the sig fit apps is using style components for styling and this is where we're going to replace this with tailwind css now i want to be really clear this is not a video telling you you should not use style components and you're still in css instead star components is great i just thought that would be an interesting exercise to build this up with tailwind because of all the interesting skew and rotation and different design parts that we can find in the app things like the product titles here which are skewed and rotated the price the logo the little slants here on the navigation etc i'll quickly open my app in the preview here http localhost 7777 and first thing we're going to do is install tailwind from npm so i'll go npm install and we'll put this in dev dependencies and we'll install tailwind css but also post css which tell in css depends on since it is a post css plugin and finally we also add auto prefixer to add vendor prefixes to our generated css next we need to generate two config files one for tailwind and one for per css luckily it's super easy i can go npx tailwind css init to generate a tailwind config file and i'll pass the flag dash p to also request a post css config file and here we are we have these two files created so let's look at a tailwind config file and this is where we're going to come to customize the framework and add specific values in a minute and if you look at our post css config file you can see that it's chaining two post css plugins together the first one is tailwind css and the second one is auto prefixer to add vendor prefixes since next.js supports post css out of the box whenever we use a css file in this project it's going to run through tailwind and then auto prefixer so let's create a css file now to have sort of an entry point for our css i'll go in src and create a file that i'll put in css slash and we can call it whatever we want i'll call it tailwind.css in here i'll have three custom post css directives provided by tailwind at tailwind bass and i'll duplicate it a couple of times and this one will be components and the last one will be utilities now i'm sure many of you have seen these squigglies and wondering what's going on here so vs code thinks that it's not valid css syntax because it is post css so one thing we can do is change the language mode and i'll change this to post css which will fix it and i'll put the name of the post css language extension that i've used in the description of this video so these three tailwind directives represent the three tailwind layers the base layer is a css reset with normalized tailwind components is a small layer that contains one css class abstraction which is a container and you can add more if you want and then the bulk of tailwind comes in this utilities layer which is all these utility classes that we're going to compose together so we have a css entry point here and then we have a post css config that tells what post css plugin this css should run through the last thing we need to do is actually require and use the css somewhere so we'll go in our underscore app in our pages directory because this component is used for every page and up here i'll simply import the css import css slash tailwind dot css okay let's restart our app with npm run dev and i'll close this and close the sidebar and there you go you can see now our page has been aggressively reset the font sizes font weights spacing everything has been reset and normalized and that's our tailwind base layer in action here this is where global styles are applied directly to html elements to reset and make styles look consistent across browsers so a quick note i have this page here and also the reference app zoomed out to 75 because of the resolution i'm using for recording this video you can see here 75 too and that's why it looks a little bit smaller than what you can see here in this preview but since both pages have the same zoom level we're going to be able to make the ui's match okay so on the topic of global styles in the sig fits app using style components most of the styles are scoped inside the style component itself but there's also some global styles in this app and if i go to this advanced react finished app front-end component page.js component you can see that on here there are some global styles applied you can see there is a custom font here defined red nikon next and this font is available in our project in the public static folder so let's go and implement that font on our project so i'll copy this and i'll add this to my base layer because again it's global styles so i could add it just under here but i can also come here and go at layer base to specify i want to add some styles to this layer and inside of there i'll paste my font face declaration now if i come back in the github code here and i scroll down you can see that this redneck next font family is applied directly on the body element so copy this down here go body and paste it here and yep that works you can see now we have a different font on our project so i think we're ready to start implementing our header section which is going to be this navigation and search bar so let's go in our header component so instead of returning just an h1 we're going to wrap this in a header and move that in the middle and looks like our logo and navigation are grouped together side by side and then there's a separation and the search bar so maybe let's add a wrapping div here and we'll have a header inside of it and we'll also have a navigation so inside this nav i'm going to output an anchor tag for each link we could use a next link component but since we're not going to any other pages everything happens in the same page and they're kind of fake links we're going to just use an anchor tag so links dot map and for each link let's output an anchor tag and the href would be link link.target and the text will be link that name and it also needs a key of link that name okay just to see a bit clearer i'll add some margin bottom to our header so we can push all the product descriptions a bit below so i'll go class name and margin bottom in tailwind is m b for margin bottom and if i hit ctrl space you can see that i have all the auto completion suggestions so margin bottom zero is zero pixels one is 0.25 ram of 4 pixels etc so let's go mb8 which is 32 pixels or 2 rams and this is going to push everything down a little bit for us okay so let's start with our logo and look at the design we're going to try to break down what it looks like in different composable bits there's a red background the text is white it's uppercase it's slightly skewed on the side the font is fairly big and quite thick as well so let's try and see how we can compose tailwind css utilities together to achieve these combined styles since it's a link i'll quickly wrap this heading into an anchor tag and let's go apply some class names to our h1 so first let's make the background red i'll go bg dash red and you can see that we have shades available from 50 being almost white super light to 900 so none of them is going to match but let's start with bg red 600 okay and let's make the text white and maybe we'll add inline block as well so it doesn't use the whole width of the available space nice let's add some padding with p-2 to start with so now there's a little bit of padding around the text let's make the text uppercase uppercase the font was way bigger so let's try text excel to excel and let's try text for excel yeah that maybe it's a little bit too big but we'll see now let's go quickly on the wrapper and add some padding and a little separation at the bottom class name equals and go p-4 for padding level four and let's also add this border bottom here so for now i'll go border b and we have different widths i'll go with eight and border black so let's take a look at what we got and what the real logo looks like and you can see everything is a bit off the color is off the spacing is off the font size etc but we'll work on this so i'll open the dev tools for both windows for this one and this one and if i inspect the h1 here you can see that the background color hex code is ff000 and that seems to be the color repeated everywhere across the ui so since none of the default tailwind reds exactly matches this color let's go and add it in a config file all right so here in the tailwind config file you can see we have a theme object and then we can decide to extend this theme so i would add stuff in the extend key here if i want to add extra values to the default values of the theme and i can also override them completely if i go and add them directly inside the theme instead in this case let's leave the defaults alone and we're just going to extend it with our custom values so since i want to add a color i'll open the colors object and we're going to name this custom red color sick sick and the hex code for this was ff000 so now check this out by just adding one color in our tailwind config if i start typing the word sick here you can see that we've generated colors for background to via and from which are gradient colors ring colors for outline for focus outlines text color divide color border colors placeholder colors ring offset colors and all of these things have been generated because sterling iterates over these colors objects and generates lots of utilities for you so i can replace my bg red 600 here for our heading tag with bg sick and now if i compare both logos they have the exact same color if i look at the font size of the logo here you can see that it's 40 pixels now here in our design we've used the text for excel class which is 36 pixels and if we look 4 xl is 36 and 5 excel is 48 so we need something in between if we want to really match this design so once again i can come in my config file and extend this time the font size object and here i can add key value pairs the key is going to be the name of the class name it generates and the value well the value and it's totally up to you what you name it here but since we have four and five excel maybe it's in between we could say well let's go with 4.5 xl and this is going to be 40 pixel or since the font sizes are defined in rams i'll go with 2.5 ram 2.5 times 16 being 40. and if i save this you can see that now we have a 4.5 xl value which is equivalent to 40 pixels which is exactly what we want so now we have the color and the font size matching next let's take care of this little skew slanting of the logo if i inspect here you can see that there's a transform of skews minus seven degrees applied now tailwind does come with skew utilities so i'll first apply a toggle of transform which which is necessary to use before you apply any transform and i'll go skew x and and you can see the default values here are 0 1 2 3 6 and 12. oh minus these so wes was using -7 so let's go with minus six here which is the closest that we get and we should see a slant happening and you can see that's starting to look fairly close now so once again if you were precious about this minus seven value you could come here and open the skew object and add a minus seven value which would be minus seven degrees and since i'm already in here and i know we're going to use a different skew value somewhere else i'll also add minus 20 and add minus 20 duck and this -20 value is going to be used for these slanted separators here so how do you know about what values are available in this theme what each object is named and what values are there by default there's a few ways to do this you can look at the tailwind documentation website and each object in this theme will have its own page with the default values and how to customize the autocomplete intellisense also gives you a good idea of what values are available and if you want a single file that explicitly shows all the default values of the theme you can generate a full config file so let's do this we're actually not going to use this config file but just look at it as a reference so i'll go npx tailwind css init and i'll name this one demo tailwind full dot config.js and i will pass the flag dash full to say hey please make the full config that is explicitly defining the default theme so this file is not going to be used in our project unless we explicitly specify the path to this config file but let's take a look at it quickly so you can see now our theme object is fully fleshed out we have the screens object which is our responsive breakpoints and we haven't even talked about this but you'll see how you can apply responsive styles with tailwind we have a colors object with the default colors a spacing scale which generates utilities for margin padding height translate and a few other values etc you can see gradients background position box shadows and a lot and a lot of things in there so if you want a reference of what the default theme offers that's a good way to do it and you could use this for your project but i think it's a much better idea to have the default config file generated and then explicitly extend only what you want to change in that file so let's look at our logo it looks like we've actually nailed the padding internally to this logo inside of the red surface but we need a little bit more spacing around it so maybe here on the wrapper which is around the logo we can go p p-6 oh and i need to restart my server here okay so it's getting really close so let's work on the navigation now and we might come back to the logo after that so right now our navigation is under the logo but we probably want to have it side by side when the screen is large enough and otherwise have it under but centered so actually i'll switch to a responsive view of this preview which is now going to allow us to drag the sides and mimic that we have enough horizontal space by zooming out of the view so we're going to work on this wrapper here which contains the logo and the navigation and this is going to be our flex container so i'll add the class of flex but i want the flex direction to be column on a small screen so i'll go flex call flex direction column and i also want the elements to be centered so because we're in flex column mode i'll go items center for align items center so now what we want to do is when we have enough space maybe at the large or extra large break points we want to move these links on the side because right now it's always center aligned on top of each other so this next class name we're going to apply is going to target the extra-large breakpoint end up because this is a min with media query so i'll start a class with the name of the breakpoint xl followed by a column which is going to use a responsive variant of any class name that i'd applied so here i have flex call defined by default and from the extra large background i want to switch this to flex row all right i've closed the responsive preview here in vs code and we look at the responsive preview in the browser directly so it's a little bit easier okay let's just add some margin top to this nav element for some separation with the logo on the smaller screens so here in my nav i'll go class name empty let's go with mt4 but we actually do not want this margin top once we switch to the side by side view because now you can see that the alignment is off because of the margin top so again excel breakpoint we go empty 0 to cancel that out and now we should have our align items nicely set now we're gonna make a navigation a flex container itself to handle its positioning so here i'll go flex and at that break point where we are in the side by side we want to justify content and to push it to the right here so i can go xl justify end and that should move our navigation to the end oh let's also add a flex one class to make sure that the flex element takes the entire available space there you go okay let's add some spacing between each of these navigation links so down here in my anchor tag i'll add the class name and up to now we've just applied p dash that applies padding all around but we're gonna use p x dash which is going to be padding left and right only padding horizontal or x axis and let's go with uh let's go with px8 here see what it looks like what do we have here actually we have 30 pixels of padding horizontal here and the font size is 20 pixels px8 is actually 32 which is not bad at all again we could add 7.5 and add very specific values let's go with that for now and i'll change the text to text and how do we get close to 20 pixels well look it looks like text excel is 20 pixels so that's exactly what we want we'll also make that uppercase and looks pretty good so when i make the screen smaller you can see that we have a couple of problems the lynx text is collapsing here and there's not enough space available here so first thing let's add a flex shrink zero class to say that the elements should never shrink past the minimum width we're going to take this px8 class here and only apply it from the excel breakpoint and the default padding should be less so maybe bx 4. so that's a little bit better let's also make maybe the text a bit smaller so same deal this is going to be applied only for the excel breakpoint and let's go with text small for smaller breakpoints i'll grab this you don't have to move it but just for the sake of organization i'll put the extra latch breakpoint specific classes at the end and yeah now that works but we always have this problem where at some point it gets too small and you can see that it overflows on the side so let's make the flex container wrap here actually so here in my nav i'll go flex flex wrap so now it's going to wrap onto lines which is nice we probably want this to be aligned so in my navigation you can see that at the excel break point we go justify end and before this we want justify center justify center and that should now center line it nicely good so now this is starting to look good we have that navigation wrapping and eventually it jumps off we could probably add some in-between changes so maybe here on the lg break point we're gonna go with text lg and lg padding x let's go with six so now we should have three little iteration small text with small spacing medium text or actually large text with more spacing and finally jumping here nice okay let's tackle these little slanted separators next so they're currently implemented with a before element so tailwind out of the box doesn't support before and after pseudo elements but we can create this with an extra element which is going to be absolutely positioned so on my individual links here i'll add a class of relative and then before my leak name i'll add a span and this one will have a class name of absolute and we're going to go top zero left zero and let's give it a height and width and background color so we can see it so we'll go width 1 h full and bg gray 200 let's try this let me maybe make it a bit darker just so it's more obvious on the video so our separators are here but they're not expanding on the full height because our nav is actually not using the full height of the container so we're gonna have to change a couple of things here back in our main flex container which contains the logo and the navigation we're currently setting item center for align item center but on the extra large break point we want these align items to become stretched so it stretches out on the whole height available so excel items stretch so this exposes the next problem which is that we have applied padding on the flex container here we don't want to have some padding vertical so we'll remove it and maybe apply it as a margin on the logo instead up here instead of p 6 i will go p x 6 which will remove the vertical padding and now let's go on the heading tag itself and add some margin vertical with m y and we'll also use six and we want these to center a line on this vertical thing so we're gonna make each link which is now using the whole height a flex container and then use item center for align item center to vertically center it so i'll go down in my links here and go flex items center and that should vertically center our elements so let's try to make it look like this and very quickly a quick fix here we have added the skew minus seven but we actually haven't used it so let's change that to seven sorry about that so if i look at these separators here we can see that they have a width of two pixels and a height of full which we already have but currently we have applied w1 which is 0.25 ram which is 4 pixels so we kind of want half of that and luckily there's exactly that 0.5 which is 2 pixels and let's go with bg gray 200 which is closer to the real value here and now we can apply this transform with the transform toggle and minus skew x and remember that we added the value minus 20 for this specific occasion so let's do this all right let me increase just a little bit the margin top and bottom on this logo so up here i'll go m y and let's go with seven and if we look at this border bottom here you can see that it's actually ten pixels and we currently have eight so we could come here and for border width we could add a 10 which is 10 pixels and then here replace this border b8 with border b 10. let's look at it and yeah now it's starting to look very close and let's look one more time at westboss's global styles here and you can see that he redefines a black custom css property to 393.99 and we're going to add this color i'll go here and define black and this is actually going to redefine the existing black which is part of the tailwind config and we're going to go 393939 so here since we use border black we have now updated this color to be this exact dark gray black defined okay next let's add this little badge here next to the cart and here where we output the name of the link i'll add a little bit of logic i'll say if link that name equals my card so that's gonna be only the last one and use a ternary operator so if that's the case we're gonna have a little bit more markup so i'll go span class name flex and then inside of it we're gonna have a span with our link name and another span and inside of there we're going to handle the badge so we're going to go class name equals bg sick for the red color text white and let's go with the fixed height and width so h let's go nine w nine so it's a perfect square and rounded full you can see all these rounded corners options we're going to go with full so it's going to be a perfect circle and let's just add number one here to pretend there's one card item so it's not going to be ready yet but just let's look at what it is oh and before i can do this i need to have the other condition if it's not the case where we're just gonna have the link.name so you can see now on the last element i have a bullet with my card so it's all out of sorts the circle is a bit too big it's not vertically aligned so let's fix that up here in my flex container i'll add items center and i also add some spacing between the two elements with space dash x for the x axis and let's go with space x one so now the circle should be aligned and nicely separated and we might make it space x two and let's change the height to h7 width 7. that looks about right but now we want the text inside to be centered so i'm gonna also make this a flex container and go items center and justify center so now it's going to be perfectly placed in the middle and i can probably make the circle just a little bit bigger with 8 eight and eight and we keep going around on circles but if we look it's 30 by 30 and what we have used here is 32 by 32 so we could add in the config file another value for this but let's go with that so as you've noticed i'm not going for the exact specific values absolutely everywhere i think as long as you understand that you can go in the tailwind config file and customize the design system to be exactly the values that you want you can understand that you could replicate this ui pixel by pixel now we have a little bit too much spacing here because we've applied padding to the wrapper and also then to the link so we should undo this i can go padding left six so it's only gonna apply it here on the left and none on the right all right let's look at the hover state next currently nothing happens on a hover but if we look in the reference app when i hover over a link there's this nice little bloopy animation happening so there's a transition happening on hover and it looks like there's a custom easing curve and we're going to try implement that so again it's implemented with the after pseudo-element but we'll use our own element so let's trigger the hover state on the button just to see it you can see that we have a transform translate x by 50 and then a custom transition timing function i don't think we're going to use translate x here but we're going to transform the scale instead scaling from zero percent width to 100 width and we're going to apply this custom timing function so we want our little underlined squiggly thing to be positioned absolutely in reference to the actual link text so that thing here so we're gonna wrap this whole thing in another span and this span will have a class name of relative so now we can absolutely position something within that little span which is just the height of the text and not the full height like the anchor tag which is item stretched so let's try that we can probably go here before the closing of the span and create another span which is going to be our element so class name equals absolute this time the width is going to be full but the height is going to be let's go with h1 and the color is going to be bg sick so let's try that we're probably gonna have to change the positioning yeah so let's make it bottom zero nice and then left zero aha really good actually i think it might look a little bit better with minus bottom one which moves it by uh four pixels down and let's add some rounded corners here so let's go rounded uh let's go round it small just for a nice little so it's quite subtle but it looks quite nice okay so now what we want to do is that on hover we want to make it appear and we don't want to show it so let me show you first how to handle the hover state here so just like we did for responsive classes with xl for the extra large breakpoint we can target different states like hover or focus or active with a prefix so i'll go hover here and let's go bg and maybe green 300 so what should happen now is the underline should become green when we hover it but you'll probably see that there's a problem so that works but as you can see it only works when i hover the span itself not the whole link which is that whole height so we want to change the color of this span when we hover over the anchor tag the parent anchor tag and we can use something called group hover the group hover variant in tailwind to do that so i'll go all the way up here in my link and add a class of group and this group will mean that anything that's nested within this element can be targeted via the group dash hover variant so with this group hover it's going to listen to the hover state on the element with the class of group which is our anchor tag here and so now the background should change to green whenever i hover anywhere on the link yeah look at this beautiful so instead of changing the background color on a hover we want to change the scale and then add a transition so let me apply a transform class and let me show you this i could go scale x for the x axis 50 so if i go scale x 50 it should be half the width and yeah you can see now the links are half the width and if i go scale x 0 they are going to be completely squashed into nothingness so now they're completely gone and now on group hover i want the scale to be back to scale x 100 which is the default but you will see that it's not working and the reason is the group hover variant is not enabled by default on everything uh for some file size concerns and so you have to go and enable it in the config file group hover works on the most common things you do on changes like background color or text color but not here for the scale so i'm gonna go in my config file once again and if we go down there you can see that we have a variance key which also has an extend object so here i want to extend the scale key and i want to add a variant which is group hover so i've now added the group hover variant for scale transforms so if we go once again it should now work on hover great so now it transformed from 0 to 100 immediately without any transition so let's add a transition class i'll go transition and by default it's going to have a default easing curve and duration and all of that so we can have a look at what it looks like and yeah that looks nice already that's pretty nice but let's go and try and recreate this little bloop where it overshoots a little bit and then comes back to the full width so down here we have this cubic bezier curve here that we are going to copy and tellurine has easing utilities for transition timing functions so you have is linear in out and in out so we're going to add our custom one so let's go up here and after the border with transition timing function and let's call this one bloop and here we're going to paste our cubic bezier function to be an exact match so adding this transition timing function will generate an ease bloop which we're going to go and apply here is dash bloop let's go and it might be a little bit quick yeah you can see it's kind of jumpy because part of the easing duration is set for the initial slow start and slow finish so we're going to add a little bit of duration with duration and let's go with maybe 500 500 might be a little bit too slow but you'll get to appreciate that bloop and i think we want to go with 400 here let's look at that that's amazing ah i can actually add an underline if we look at the logo here it gets an underline wes has set the text decoration underlined for links by default and everything we're not gonna do this here but in that case for the logo i'll go and add this so let me go to the top and here on the link itself i'll go class name and on hover we want to go underline so now when we go and hover this we get this underline great so let's move on to the next element which is that search here so i'll scroll down and after our nav here and our div container which is a flex container for the nav n logo we're going to have another element which is just an input place holder we'll say search for an item so here it is and let's make it a bit bigger so we're going to go with class name width of full h of uh 16. yeah that's much better for now let's add some horizontal padding as well so px4 will do and we also add this border bottom which is actually you hear that so we're going to add this border bottom here which is actually the border bottom of the entire header element in my header i will add border b and border black so we have a black border button and let's compare with the reference app and yeah it's pretty close this here is actually not style as it really is in the sig fits app so i won't bother too much to match it okay so i think we can move on and handle now our grid here we'll skip this pagination for now because we don't have any pages this is just a single page in our rebuild but if we have time at the end we might go and build this ui quickly but i think we can now focus on this so just so the spacing feels right i'll just add an element that kind of feels like this so this whole element is 552 pixel by 62 so let's add like a colored div element as a placeholder for now okay so i can move out of my header and we're now going to go in our page index.js so we're actually going to add the main tag here and put everything in there since this is the main section of our page and up here we'll have our pagination so for now it's just going to be a div class name of pg gray 200. so we saw that the height was 62 pixels so what gets us close to this uh we're gonna go with h16 is 64 pixels and let's go with the max width container of excel 576 will work fine and we'll also add some rounded large and yeah okay that works but as you can see it's flush against the left and in the reference app we have this nice max width container which is exactly 1000 pixels wide you can see in the code file that we've looked at a couple of times here there is an inner style constant which is a max width container with margin left auto left and right auto and padding two rams and this width is defined here 1000 pixels so since we don't want a max width container on the header the main here is a perfect place to put it for now so we're gonna go class name equals max w and what do we have 5 xl is 10 24 pixels so we'll go with that and let's also go mx auto which is going to set margin left and right auto let's go px we're gonna go with six let me quickly add a visual debugging background of red 100 just so we can see the surface occupied and that's looking pretty good and you know what let's add a max width quickly and we'll call it 1000 and it's going to be 1000 divided by 16 62.5 62.5 ram so here instead of a max width 5xl we're gonna go with max width 1000 which is going to be just a little bit smaller there you go and the padding is actually two rams on this page container here so we can increase our px for all around eight because the html font size has been reset to 10 pixels it's actually 20 pixels here nice so now if we remove our background red i'm quickly going to go in my header and remove we had this margin bottom eight to create separation before but now we're going to handle this uh directly on this main section so let's scroll down to here and we're going to handle this grid now i'm gonna come here to my unordered list and i'm gonna tell the parent the ul that i want it to be display grid and i'm also going to specify that i want two grid columns with grid calls to so now if i inspect this you can see that this is a css grid we probably want to add a gap between each element so i can also add gap and let's go with something fairly big gap 16. and here we go now we have a really nice gap between each element so instead of just showing the product description we're going to go and grab the image the price the title description we have and start constructing these little cards so the first thing i'll do is add some classes on the li element which is the card itself the card main wrapper so i'll add a shadow shadow and we're going to go with extra large here let's take a look and again we can come here and grab this bs which i love the naming of box shadow and then in our config file i can add box shadow and we're gonna call it bs because why not and paste that so now i should have a shadow bs let's give it a try and there it is so it's all looking a little bland and plain at the moment so let's go grab the images to make it more interesting and i also add quickly a margin top on the top of our grid here with empty let's go with mt6 just to create some separation actually i go with empty even eight so images let's wrap this in a p tag because that's where it's going to go eventually and now i'll just add an image tag the source is going to be product dot photo that image that product that photo that image that public url transformed and the alt tag product that photo dot alt text and now all our images are coming in which is nice they all have different heights which is not what we want if you look at the reference app no matter what page you go to every image is nicely cropped to the same dimensions so if we inspect we can see that the images are 400 pixels in height so let's add some class names to our image and we'll go with h and something that gets us close to 400 actually 400 would be exactly h 125 rams so let's quickly go and add this to a config file spacing and i'll go 125 rem so now we can go with h1 which is exactly 400 pixels and now you can see it's not necessarily using the whole width or the whole height so fair enough i can go w full but now we're gonna have some distortion happening so let's find an image where it's quite obvious none of them is really obvious but the image are kind of distorted maybe this one looks a little bit smooched out i guess if the height was 20 it would be more obvious there you go see how it distorts the images and you can fix that with using object fit which is kind of gonna crop the image kind of like a background image cover the image is never going to be distorted it's gonna fill whatever space it needs without breaking the resolution the aspect ratio so i'm gonna go with object cover and now you can see that these images are nicely filling the entire space available so i'll change the height back to 100 and now we should have our nice cards always with the same height and width which is great okay let's add the rest of the data the price the title the buttons and then we're going to style all of this so here i'm going to go with the h2 tag for the title so product that title and before the image here i'm going to go with the let's go with the p tag and pro duct that price so let's look at it quickly and looks like i don't have my title so maybe i've done something wrong oh it's product that name this is why product.name so there you go we have the titles and you can see the price at the top but the price is not formatted nicely so now if you look at the top i have this format money function that is making it pretty formatted so i can wrap my product that price here in a format money function and now it's going to format the currency properly so we want this price to be up here on the top right corner slightly rotated and slightly off uh image so to do this i need to make the li container relative so i can absolutely position this within it so next to a shadow bs we're going to go with relative and then our p tag here can be absolute and instead of top and right zero we're gonna go minus top one and minus right one as you can see it's moving it by four pixels so it should put it to the top right slightly off and let's add a bg of sick sick text white just so we can see it a little bit better okay now if we inspect that here the font size is 30 pixels what else we have we have a rotation somewhere of three degrees cool so tailwind has that value out of the box we have a font weight of 600 padding of five pixels all around you can see the top and right is actually minus three pixels so we have minus four in hours and the next value so you have right zero which is zero we have writes pixel px which is one and then we have 0.5 which is two but then we jump at four so we could add a value for three or we could agree that it's okay for here to use that which i will make the call it is okay let's change the font size we said 30 pixels so text what do we have 3 xl is 30 pixel font is it bold bold is 700 so we can go semi bold which is 600 we had some padding of 5 pixels so p dash p 1.5 is going to be 6 pixels so again you can add a value but i think we're going to go with that you can also see that the line height here is set to one so that's why when i added six but six pixel padding it looks way more vertically uh so let's add the line height with leading none which is line height one and that should come much closer to yes so the last thing we want to do is to add a transform and rotate of three and look at this it's starting to look very similar to what we have that's very nice and it looks like our grill is slightly bigger so maybe i'll make the padding just a little bit smaller uh here yeah that looks really close now so let's tackle the title next so i'll move down here and our product that name is actually a page link so let's wrap that in the anchor tag okay so we're gonna compose some styles between the h2 and the anchor tag i'll add a class name here and i'll make the vgc and text white uppercase i think the text size is the same as the logo which is 4.5 xl leading let's go with leading uh snug okay nice and now let's add some styles to the parent to center it and make the transforms so here class name equals text center and transform minus skew i think it's minus q7 once again but there's also a rotation which i believe is just one degree so we gotta look at the wrapper it's h3 here but that's okay yes we have a rotate of minus one degrees so we can do this with minus rotate one oh apologies it's actually not uppercase and it's moved up by something so if we look here there's a transform probably or margin type there you go margin top minus three ram so we can apply that to here minus m for margin t for margin top let's go with eight probably yeah that looks about right very nice so we want to add some padding on the sides on our links so down there i can go px and i think two will work fine yeah very nice if i zoom over here you can see that we have a really nice text shadow inside on the letters now tailwind doesn't support text shadows out of the box you can extend tailwind by adding utilities or creating a plugin that brings new utilities here we'll just add some utilities one single utility for text shadow i will inspect this and find the text shadow is it on the h3 here text shadow so let me copy all this and i'm gonna go in my css file so here we have the three layers remember we've added a base layer and now we're going to add some utilities so at layer utilities and let's call that class text shadow and we're going to go text shadow that thing if you had a color called shadow like text red 600 makes the text red 600 so text shadow would maybe have a little clashing happening in our case we don't have a color or something that could clash called shadow so we should be good back in our element we'll add that class of text shadow so let's zoom in on this hoodie and i'm not sure if you can see it on the video but it's definitely there we have that nice text shadow and we can inspect here and you'll see the text shadow apply with the same values that we had here and it's actually looking very close we can now that we zoomed in i can see that i can increase the padding a little bit to px maybe three and the skew looks different was it only six oh it's five degrees here not seven all right so let's be precise and also add minus five because we don't have it out of the box and go here and add skew five and now it should be very close okay that's good enough for me considering that we are zoomed in add zoom out here too and now let's handle this paragraph here that has font size 15 padding 0 and 30. so in our product description here class name so we're going to go py and it's 15 pixels so we can go with let's go with 4 and px probably eight i guess yeah eight is 32. so let's go with that and that works quite well you can see the line height is quite different i think wes has a line height of 1.5 sets by default so if we look up here one more time you can see that the line height oh is set to two for the body element for everything does this mean that the line height here is two yep and we can use two rams here actually right another thing i've just thought of is if we zoom in here you might see that there's a slight border so the cards have a one pixel border around them so it's a border of one pixel solid so maybe let's just add that quickly here so border and the default border is gray 200 which is probably a bit too dark so i'll go border gray 100 and actually you almost can't see that one so i'll go back to border gray 200. it just composes better with the box shadow to give a little bit of separation so let's add these buttons here after our product description i'll have a div and we are going to use grid here so let's create three buttons quickly button one two three so the first one is saying edit and we'll add a little pencil icon next one says add to cart do we have a little cart icon emoji yes we do and the last one delete we can probably add a no emoji so we have our three buttons here uh they're not placed right but we're gonna fix this so class name grid and we want grid calls three and just like that it should use nicely the three columns when the text is a different length we have this problem we will fix it i can make this whole card a flex container with flex curl so it stacks vertically and then tell this paragraph section to always use the full height that it can with flex one so let's try this i'll go in my ally and i also add flex flex call so that should change nothing but now if i come down in my paragraph i can tell this paragraph to be flex one to grow as much as it can and now this paragraph is going to grow and take as much space as it can compared to the thing on the other side in the same row right that's perfect let's come in our buttons and this will have a border top let's make it border gray 300 which might be a bit too dark but you'll see it better while i work on it let's add some spacing on each of these buttons so all three buttons i'll add a class name of p 3 for padding nice and then to handle the separators here i could add some borders on each button but there is a much nicer way to handle it on the parent level with a divide utility so we want to divide the x axis you can also divide the y axis on vertical stacks and divide x by itself we'll apply gray 200 color and one pixel so let's look at it just like this and you can see the gray let me once again make it divide gray 300 so it's a little bit darker and here i could have a different width of two four so if i go divide x four you will have a border that is four pixels thick here but in our case we're very happy with the divide x which is just one pixel so we get these three buttons looking pretty good let's maybe quickly add a hover state so for my three buttons here on hover i'll go bg gray 100 just to make the background a little bit darker on hover very nice and this is looking pretty good um oh we don't have a underline on hover here so in here i'll just add hover underline and i've just noticed that when the text wraps on two lines the line height is just too big that you can see it's barely touching here so where we have our leading snug which is 1.375 we might go with leading tight which is 1.25 now wes has 1.3 there so again you could go and add that value and i think now it looks uh really nice like this so if we compare this to something that wraps on two lines on the reference app like here uh this is looking pretty damn close so here is 1.3 line height and we currently have 1.25 so it's slightly snuggier slightly more condensed okay so currently we have set our grid to be two columns wide at any break point and i'm pretty sure this is not going to work at small screens so let's have a look and you can see it gets all squished up so in my grid container here you can see that we set grid calls too for all breakpoints and i think we want to do this only for let's say the medium break point so let's have a look so it should be one column and then two columns so now we got one column and as we go it gets quite big before it jumps i think even that is just too narrow so let's switch to lg but now we're gonna have a big problem where the cards get way too wide before the switch yeah that looks good so here we're going to add the max width container and center it so it looks decent so the max width container is going to happen on the li the card itself not the container so i'm going to go max width let's go with lg and we also want to center these with mmx photo for margin left and right auto so now look at this we start with small and eventually it kind of maxes out at a certain width which is nice and then it jumps to two column and i just realized that when we remove the margin bottom on the header that we had as a placeholder we kind of lost the spacing here so instead of just adding margin top if i go back in my navigation um you can see here we have on the nav mt4 that we cancel out on extra large so i'm going to change this empty dash in both instances to m y so it applies it also to the bottom so y axis is top and bottom right so now that's looking decent yeah like that okay so next i think we can actually look at this pagination component now so i'll scroll back up here and you can see that we have a previous link then a text page two of three eleven items total and then the next so we won't actually build a real pagination that works with the backend like it does here but what we're going to do is have some hard coded text values but just recreate that ui so we got two links here and then two bits of text all right so let's come up here and add a bit of space and i'll just add the comment for products list and we're going to get rid of this and do our work here so let's start with the markup i'll have a div here wrapping everything and then i have a link that says what is it left arrow prev and one that says next but instead of the left arrow we have a right arrow and in between we have two paragraphs the first one says so like i said we're not using the actual data from the api which is hard coding these text values here and the second one says 11 items total so there's our starting point one thing to notice in the reference app you can see that if i'm on the page one the prev link gets disabled and i can't click on it and then they become both active and if i hit the last page this becomes disabled so since we have one single page we're going to actually disable prevent next on that page so currently i can hover on these links and click and it goes no way but you can see that the little hash has been added here so one thing i can do for both these links is add a class name of pointer events none so this is going to disable any events on this link like hover and click so you can see now nothing happens which is perfect let's also make these links text gray and we'll go with something like 400 it's probably a bit too light so 500. again if we wanted the perfect color we can go and add this i think it's called light gray variable that westboss has in the course yep light gray to have the exact gray but that looks pretty decent here so let's keep going next i'll set the parent element to be a flex wrapper so they go side by side so up here class name equals flex and let's also add a border to this uh container and as you can see now it goes the whole width so instead of flex we can use inline flex so it doesn't spin across the hole with in line flex perfect next let's add a bit of padding on each button so if we look here we have padding of 15 and 30. so let's add a class name attribute to both our p tags here class name and then i'll select this class name here and the next three one two three so i'll go with px and i think we want eight to be as close as 30 pixels as possible yeah let's go with eight and let's go with py-4 so it's not exactly the same values but that should get us really close without adding an extra value next let's add some margin top empty six on the actual container and we also add some writing corners with rounded i'll go lg so actually the margin top is a little bit too big so maybe empty four will do yeah that's pretty close and actually i'll make the padding horizontal on all four elements to probably seven so it looks a little bit closer yeah that's really good so let's add these separators and instead of adding border right and border left on the children element once again we can use our divide utility here divide x very nice and if we look at the font size is it it's 15 pixels so it's just a little bit smaller than the default value so if we apply it on the parent it will trickle down to all four children text sm is 14 pixels and text space is 16 so once again we could add value in between okay i want to do one more thing here is add an area disabled true label to both links since they are disabled true and you can see the space here is bigger here so okay so the the pagination itself applies some margin of two rams because the html font size has been reset to 10 pixels it's actually 20 pixels here so in here we have mt8 which is uh 32 pixels which is too big if we want 20 i think we can go mt5 okay let's look at how it looks on small screen and my guess is not great there's probably not enough space for it to show up yeah so we probably maybe can hide these two elements and just have the links on small screen so let's try that so for my two paragraphs here i will go and display them by default hidden so that will hide it at every screen size and then from let's say the md breakpoint we're gonna display in back to display block so now they should be hidden and then show up and we can probably show them actually on the sm break point already can we yeah that just works and the last thing we want to do is center align this thing until we hit so here we would like this to be center aligned until we reach these two column layouts where then it makes sense to having left align and it feels kind of odd because our column here is centered that it shoots off the sides alright so to do that i'll wrap my pagination into a little container there's possibly better ways to do it but this is the one i can think of right now as i record this and i will give it a class of text center so that will center it so that looks great but we want to undo this once we hit the two column setup which is the large break point i believe yeah you can see here lg criticals too so next to text center i will go lg text left so now we have a nice pagination that looks decent at all breakpoints so here's our website on mobile and in between and finally more in between and once it reaches the desktop view it all looks pretty good and here's in comparison the reference side and i think we're pretty close oh there's the pagination at the bottom here so we could copy this probably extract it to a component and then use it twice at the top and the bottom so let's do that quickly i'll grab this div here and cut it and we go to the bottom and go function pagination we'll return this like this uh i think the mt4 nut that we've added a wrapper might go on the top element and we might find out that we need different spacing for both so we might actually move it completely out of this pagination and apply it per case so i'll go here and now i'll use my pagination component and also after the ul here now we have the pagination at the top and pagination at the bottom and spacing wise i think it's uh yeah actually that works looks like our main container could have a little bit uh spacing on the bottom like you can see here so where does this come from does it come from the main okay so there's the margin bottom on the pagination and also there so in our case uh i'll go up in the main tag and maybe just add mb four to add a little bit of margin bottom and look at this that looks like the exact same value great all right i think this time this is the end of this video if you have any questions you can leave comments in the video you can reach to us on twitter github discussions there's plenty of ways to start a discussion and if you want to learn more about react about graphql about keystone be sure to check westboss's course full stack advanced react and graphql it's a really good course which is a great teacher there's a lot of fun in these videos i've learned a ton from west and i'm sure you can as well alright thank you so much for watching and see you in the next one

Channel: Tailwind Labs

Views: 46,983

Keywords:

Id: mK-ePxnfcJw

Length: 73min 15sec (4395 seconds)

Published: Thu Feb 25 2021