Learn Tailwind CSS by making a Cheatsheet | (30 Key CSS Properties)

Key Takeaways

tailwind css is it just hype is it cool is it useful is it fast let's find out i'm going to look at 30 css properties and walk through exactly how to perform them in tailwind css and by watching this video you'll be able to learn along the way without moving a finger let's learn tell when css cool so let's pop open television and get uh some installation instructions so um let's see we'll do code here empty template let me go ahead and clear out the scaffolding here just delete that use my code snippet to start up a new component get rid of sass and let's see how we're doing all right um [Music] cheat sheet cool so let's go ahead and just throw in some introductory styles in here just to give it something um whatever okay all right great so now we need to get tell when installed let's go to their um installation guide for review and let's get these items installed so let's do yarn add tell one css post css prefixer cool and let's run npx tab one css init and let's see what these commands do so it looks like the dash f will give us the full configuration file and dash p will create a post css i'm just going to go ahead and use both and we'll see what we end up with here okay um just kind of following along the guide here next we'll open up the tailwind file don't config so it looks like and use tell when it creates this configuration file for you to edit and you can see all their defaults in here so that's pretty cool um column spacing um next step it looks like i need to set up the i need to let tallwind know what files to activate tailwind for so that's what the content key value is so that looks good and what else now we need a index file let's go ahead and do that i'll drop it in the assets folder and copy this in here and then we're going to drop it in um we're going to load the css file and the main ts file so that the view application knows knows about tell when so okay great so that's installed and it looks like that should be it so let's go ahead and see if everything's looking good um no utility classes i guess we'll see if that's an issue but okay so that looks good let's go ahead and try to do something with tailwind so yeah let's just go ahead and copy this into our header cool so interesting okay so i have a list here of items that i want to get through let me go ahead and just copy these in just create an empty full empty file here of the 30 items i want to cover so these things i consider you know kind of html or css fundamentals so i consider these 30 items to be css fundamentals and i want to cover them today so let's go ahead and just start from the top um so i want to create this cheat sheet and i want an easy way to do that so what i think i'll do here is create a view component that allows me to quickly iterate through these items and learn css and also share what i've learned okay okay so i think this is good basically what i created here was an example uh component and i'll just fill in the slots here so we'll have the label we'll have the css class name um and then we'll have an example of the output of using the actual css class from tell one so i think this will be the format i like this it's simple it's clear and concise so let's go ahead and start knocking these out so let's see i'll do a checkbox here for all these so let me quickly convert these to check boxes and let's just kind of knock them out one by one so first things first we have color so intel when css how the heck do we handle colors so uh text color specifically let's just look for a text color okay interesting so it looks like this is the keyword let's just get it in here and try this so the first item we'll use color and let's throw a couple examples in here just to see if this works so let's do text slate 300 and we'll do uh red to red 500 and let's do green to the green 400. cool and so then in our example code here um let me let's see we'll do three items here and let's see how that looks okay cool oh interesting we can change the color and opacity at the same time let's do that so we do a text i assume they have blue text blue 700 slash um 50 so that gives us 50 opacity colored okay let's see let's see i don't think that worked why is that oh no that worked um it's just not obvious so let me just bump that up we'll do uh nine all right drop it down two okay so it's ten percent cool so let me update cool so that's colors um interesting okay let's go ahead and check that off move on to background color search hockey all right background color so looks like it's basically the same thing right except you use the keyword bg instead of text so let's um let's see create a couple examples here i guess one is fine so we'll do uh bg let's use 500 okay let's see what that looks like 500 this doesn't appear to be doing anything does it just not have a height yeah okay um so i need to learn how to handle heights um so we're kind of skipping around here but that's okay i just need height 100 so let me just search for 100 it looks like i use h4 for that so let me just throw it full on this and let's see okay nothing's still okay it's probably just because it doesn't have any content so okay so i'm just gonna throw some contour down here and that does the trick so that's how we get background color um this div has background color cool and okay so i'm going to keep moving along i can add more examples later i just want to make sure i can get through all the entire lists here in a decent amount of time so let's go ahead and check that off and move on to text size all right how do we handle uh font size in telling css okay looks like text dash small bass large and then it moves on to excels with a number prefix so let's go ahead and just try this out we'll do a text small we'll do a text large [Music] or let me try text base and you can see github copilot is guessing all these for me but let's skip some so we'll do text large and then we'll do a text 5xl cool all right let's check out the font size cool yeah makes sense it's simple clean nothing too confusing at all um i am curious if there's some way to okay never mind all right so let's just keep moving along here that's text size so how do we align text that's that's interesting a line uh text line okay pretty simple so text dash what you would expect so let's go ahead and knock that out let me close my styling down here correct text alignment and we'll do a left press enter in the right yep cool yeah so get up co-pilot's helping us out here which is always nice and let's go ahead and check out the results here so great yep align left align center aligned right so makes complete sense let's keep rolling [Music] okay so now we have width and height let me see if copilot's just gonna keep on knocking this out for me um okay so um i don't want to do this let's do specific examples so how do i set a specific width all right okay so looks like it's just unit mapped and then we have percentages and then we go for the full okay we could go screen here as well i'm gonna full so let's do a couple examples so let's do i'm going to what width 52 and let me let me go ahead and mirror these i'll do with 52 and high 52 i'm sure full width full height and yeah this format and um let's do a fraction so let's do um uh a third let's do one third one third and yeah let's check that out so to test this i'm going to go ahead and create a let's see how do i do this i guess i'll create a parent div and i'll use css to style its width and height exactly apparently so we'll do a height um you know 300 pixels it'll do 300 300 and we'll do a border around this so we can see this okay and i'll copy this for each example so i'll have 2 and then let's add children in here with yes that that exactly um cool yeah so get up co-pilot again is just kind of filling this in excuse me for me which is fantastic um let me go ahead and add well first let me save um but let's add borders around the children to make it really clear what's happening and we'll do that with the um yeah that's fine and i just want the border all right so great so this is the width height 52 this is the 100 width and height and this is the 33 width and height so that's cool totally makes sense not too much else to see there all right padding and margin so imagine these are going to be kind of similar so how do we handle padding in telling css okay interesting all right so it looks we have general padding so let me create an example for that so p dash 12 which is going to be general padding and then we have p x which i imagine is left and right and then we're gonna do p y which i imagine is top and bottom um and we'll do what we'll do four for that and then we have looks like top right bottom left okay so let's just do a a we'll do a left so pl and we'll make that six so we'll just do four examples there and let's see if we can get these in here so uh let's see what let's use a p tag p 12. uh yeah pp 12. text with padding and then we'll dupe this and update the classes so how does that look cool okay yeah and we can open up the css inspector the element inspector and see here this is padding applied all around this is padding just on the left and right and this is padding top bottom and we have padding just on the left so that makes complete sense i'm going to go ahead and just copy this because i'm assuming that um margin is just going to be with the m instead of the p so let's see if that's true i'll just replace here and we'll do another one right here and the margin so let's see how that looks and i just want to make sure it is actually margin yep so we have margin here margin left right margin top bottom margin left so it looks like that is exactly how that works so this padding and margin awesome so this is pretty clear pretty concise i mean it's even if it was just about writing like using the style attribute these class names are shorter and i know it's a lot more than that i mean just the whole configuration aspect of tell when css which makes this these class names even more powerful the fact that you can customize what each of these mean but already you can start to see the impact that tell when css can have on your code base right i mean you can just swap you could change any of these any of these values really okay so that's cool let's go ahead and continue so that's padding and margin okay so let's move on to spacing and by spacing i specifically mean um i was checking out their documentation and they have a way to separate items separate space between items in the list so let me show you exactly what i mean by that so i just type in spacing here so we get space between yeah space between exactly so this is space between trial elements within a container so you can see here there's horizontal space and then there's vertical space here and it looks like it's just space x space y and then dash whatever the unit is however much spacing you want so that's pretty clear um okay so let's check that out let's go ahead and copy another wind component and spacing i'm going to call this child spacing um and we'll use space dash yeah we'll use 6 and then let's do a 12. so i'll need a this is going to be the y parent i will do space y parent i'll do space x parent and then i'll just create a couple items uh here so space y won't require anything special i'll just use a p tag and say this item is spaced let's y-axis and then i'll throw a couple items in there and let me just see how this works so um i'll need to put this class i assume on the parent so let's do space y6 and let's look look at this so yeah so so great so it looks like that automatically created spacing on the children elements specifically the elements that aren't first or last which is really nice um if you've worked with any list you always have to specify that you want to exclude the first and the last when you're adding bottom padding or at least the last so this is cool so that worked really well let's go ahead and do x spacing let's see the next spacing i assume i'll have to use a flexbox um so let me just go ahead and add this manually i know that there's a probably a simple you know let me just go ahead and try it right i assume flex is just flex now it's a display flex and let me say space uh x6 right i assume that's how this works yeah so yeah that looks it looks like that worked perfectly so we have spacing on the x-axis between these items cool great so that's that now let's get into visibility so how do i show and hide items okay that's pretty simple visible or not visible so it'll be kind of useless to have the invisible item but we'll do it anyway so visibility visible and invisible and we'll just hello we'll just have two items uh we'll use p tags visible p tag i'll do the invisible key tag and all we'll do here is add the class and let's see how that looks so visible and then i assume i mean is it even going to show up here it is okay so and invisible so it's just visibility between the css visibility attributes so cool next let's move on to uh border and what type of border is this okay so it's border and then we'll do border radius afterwards so it's just border so how does border work in table and css so let's look i assume we want that border width okay so looks it's looks like it's using the same naming format for the top bottom left right tb lr which is great and x and y right wait is there a y yeah there is okay great so all sides i assume it's just border dash unit so we'll do that border dash 12 and let's go ahead and do an example of order i will do left and do 6 well 12 is a lot let's drop this down to 4 and two and is this all i need to well it looks like i need to specify the color as well so let's go ahead and do that so we'll do div um div order 4 and border sky 500 div has a border okay so i'll add the l changes to and let's see what that looks like okay so we have a border here and then a border just on the left so that makes complete sense very simple okay so let's border let's move on to border radius what does that look like okay so it looks like i just use rounded and then a and then i use their size convention so small nothing medium large xl and then it goes up from there and the side unit can be added to the middle there so to place wait how does this work exactly because this is saying okay so right is top top right and bottom right bottom i assume is bottom left and bottom right and then i assume somewhere yeah tl top left tr top right radius so okay so that all makes sense so let's do a couple of these so let's say i will just do the general rounded we'll do a rounded um top we'll do a rounded oh i need a unit here right yeah so i'll do um medium there and then i'll do a 3xl here let's see let's go rounded bottom left 5xl are there five excels here no there's not three i'll do a two okay so let's see what that looks like and i'm going to go ahead and put these in a div that has some padding so if i remember padding was just uh p dash will do just six and great yeah gotta get a co-pilot doing some work for me that's always great cool and let's see what that looks like okay so there's nothing there because i assume i need to add the previous attributes border and then the border color so border width and border color so i'll just say border cool and then let me go ahead and throw a border color in here as well we'll say border dash teal 500. cool and let's add some spacing between these items so i'm going to go ahead and use the vertical spacing i'll say space dash y dash let's do 8 nice okay so we can see rounded on all four and i'll be more specific in the output here has a border radius on all sides and then we have the border radius on the top on the top left and top right and then border radius on the bottom left cool so that's border radius [Music] sorry about the plane noise out there let's move on to shadow so what is shadow all about drop shadow uh this is a filter instead of just box shadow i just want to look for box shadow here so um try that again box shadow here we go okay so it's just shadow and then their sizing unit so let's go ahead and say we do a shadow small and a sure yeah we'll do all these do large and then in excel and it looks like that's it oh let's go ahead and replace one of these into a shadow enter that can be useful okay so let's create divs with shadow small large and inner and i assume we'll just use some default dark color let's create some content so shadow small shadow large shadow enter cool and again i'm going to add some spacing to all these i'm gonna put these in a parent div and use the um yep space y [Music] cool so we can just kind of see those shadows and then i'm actually gonna add some margin to the last item actually it's using shadow enter so that's fine now can i increase shadow inner hmm it doesn't look like any but like i can increase shadow enter [Music] let me just try if i add shadow large and shadow in there no does not work can i add a unit to shadow enter also just not work okay so it looks like there's only one shadow in there which isn't ideal but i guess you can always customize this okay so that's box shadow [Music] all right opacity these cool days are starting to stack up lots of wind um opacity so how do we handle opacity cool pretty much exactly what you'd expect 0 to 100 or probably not 0 to 100 but it has incremental units of the gap of five so pretty straightforward let's go ahead and do opacity we'll do a 25 50 75 100 perfect and i imagine copilot can do this for me automatically let's move that some spacing let's go ahead and see what that looks like cool exactly what you'd expect go past 25 50 75 100. cursor pointer so this is super common having to change your cursor to pointer for whatever reason uh you're hovering a button or a link that you want to click um probably best to just put this in some default somewhere but just in case you want it in a specific spot you can use whatever we're going to learn here so cursor cool yeah pretty much exactly what you'd expect this is kind of a nice thing about these class names it's kind of what you'd expect it's easy to memorize so let's go ahead and do cursor pointer and let's just do another cursor for fun we'll do cursor yeah of course we're not allowed and can we use some buttons here just go ahead and try some buttons pointer button the cursor button cannot click cursor not allowed so let's see what that looks like and we'll throw some spacing on these two we'll do a div dot space um y8 this spacing is turning out to be really useful okay so the buttons have no styling so let's go ahead and just quickly create some with what we've learned so far so we'll do um let's add a border so border this is the border width so we do border four and let's see what does that do for us okay cool um and then let's get um let's do a color so do uh blue 500 cool and can we get some spacing these buttons are actually stacked left to right so let me do let me switch the y to x so we get some yeah cool okay so this is a button with a cursor and this is a button you cannot click so that's cool so there's cursor corner on some buttons what's next transition okay yeah so transitions are important when you want to do simple animations let's go ahead and create another win component for transitions so let's see how does tone css handle transitions so we have all and then it looks like we can specify uh properties so that makes sense but how do we handle the other command so delay looks like so let's look at the time and then hover so on the hover state trigger this class oh this is delay i guess i'm not going to use delay that's fine but i will use duration i assume okay interesting so let's do transition [Music] do oh i can put the time on there too is that how that works i'm not going to listen to github copilot i'm just going to follow the docs so transition all and i'll throw an and on there for another property that we're going to be using together which will be duration we'll do over two seconds so a longer one and then the hover so i'll do and hover um what i'm going to do background color it's probably the simplest so bg dash [Music] blue yeah 800. uh we'll do we'll do 400. um and we'll make it opaque so okay so let's just try this so let's go ahead and use another button button with a transition for the background color a yeah just transitions fine okay and so go ahead and just throw a simple border on here that's how that's how this works right order let me just quickly look up border again you can use this okay yeah that is how that works okay so border four and let me set a default background so i'll do blue and we'll do the blue 200 and then we'll set these properties up so transition all let me do transition so background i assume we'll do transitional whatever uh duration two seconds and then the trigger will be hover 20 milliseconds uh bg blue dash 450 so let's see if this works here i think that duration worked properly let me take off the opacity let me just make it more intense you see that's not happening over two seconds is that how the duration works oh i'm probably not using a unit yeah i'm not using a proper unit so they only have up to a thousand so let me switch that back that's kind of um interesting slash annoying but it makes sense because these are just class names that reference something that's static these aren't actually dynamic class names at all um so let me try this so this is a full second of a transition so yeah so that works perfectly interesting and let me just throw that base on there as well to make it super clear what's happening and maybe i take the ands out so that it can be copyable you know okay and let me just find the rest of those yeah let's just get rid of all these cool okay okay great so that's how transitions work now we're looking into flex okay so we're about halfway there let's keep rolling thanks for sticking with me here guys um all right so flex how do we flex let's flex on them let's see let's create another wing component let's close on my current winds and we're flexing how do we flex super important flex boxes are used all the time okay so and i want display flex i don't want to flex just like flex okay so it's just flex as i guess i already kind of discovered right i use flex somewhere yeah okay flex um so normally paragraph tags will flow top to bottom with flex they'll flow left to right so let's just create a couple p tags and of course let me add a div with the flex class cool and we'll add some spacing because you should always reuse what you're learning we'll do flex 12. great nice yeah cool this is really turning into a full cheat sheet cool okay um what's next oh cursor pointer that doesn't look right let's clean that up okay okay so that's flex let's do some flex wrapping and i'm just going to copy what i have here flex wrap so this is how do we do flex wrap okay literally just flex wrap so this is flex and flex wrap and let's just paste a bunch more items and see if they wrap hmm not exactly i think i have to specify flex unit which we saw can do flex one plugs two uh let me just look at the docs instead of guessing i will bet if i specify widths on these this should work so let me specify some widths we'll do class equals let's see oh wait i don't have a wrap on here what am i doing let me just put flex wrap on there we go yeah so that worked perfectly so maintained and maintained its uh right padding i guess what are they using for the spacing here is that margin or padding space well i'm using space x which is probably wrong oh no no no no space x is right how does that end up is margin left okay so it is margin it does come out as margin okay that makes sense that makes sense you wouldn't want to change the padding okay cool so all those items are flexed uh that looks great although it's kind of weird to use space x here because you get this so let me actually change this i'm not going to use space okay it looks like we're gonna get to flex gap so i won't use that either but i'm just gonna throw some uh right padding so what's that pr six on each one of these items yeah cool it's great and maybe i want margin there maybe padding whatever uh that's flex grab all right flex apart so i'm just gonna copy this again so flex apart so this is flex uh justify content display or justify content um what is it what's the property display apart or something i'll show you so we're doing flex hey why did i uppercase that okay just flex and here we're going to do flex so let's look that up that's justify content justify between that's that's the one i'm looking for so i'll just delete these until we only have two elements it's flexed with space between and remove flex wrap from this and just use justify between go yep so you can see and make sure i add this here so justify between so the items are separated and they're at the opposite end so this is pretty typical when you're creating like nav bars for instance where you have your logo on the top left and then you'll have nav on the top right your navigation items on the top right something like that tons of cases where this is the styling you would want so there's flex apart and flex between so flex with justify content space between go ahead and just copy this looks between oh i actually typed that out wrong so this is um set apart oh that's right space between now let's do a a round yeah let's do it around so apart and between are basically the same so let me change this to around flex around so justify around yeah so just make sure that the items are spaced evenly but they also have even space around the item so you can see that happening here let me go ahead and add let me shorten this and let's remove this padding cool yeah so you can see there's even spacing and to recover i mean the rest of the flexes are here so we have space evenly space center of course um okay so that's fine so we can skip that now and now we'll go to flex gap so let's see that's a gap is there a flux gap it's called gap i guess okay utilities for controlling gutters between grid and flexbox items perfect so again it's kind of the same class name and config convention as we've been using it's the name and then the unit or the name uh position and unit so here's x here's y and i assume we'll have okay so yeah just x and y oh interesting so this is a column gap and a row gap as well so you can specify px hmm that's a kind of an odd default i wonder why that's there this like px px seems kind of out of place you can just use the unit anyway let's test out some flex gaps so i'm just going to copy this last one again this is flex gap and i'm just going to do a let's do a couple of these so we'll do um a gap five then we'll do a gap x so this will be column x8 and the gap y eight so these will all need use caps and this will be flex and we'll just say gap five i think right and go ahead and increase let me double the number of items in these so that we get some wrapping i might need flex wrap on these we'll see eight and then we'll do a y eight as well see how does that look oh it looks very messy um let me put these all in another container and add some space x to 12. just really get these separated i'm sorry i mean space y there we go and yeah let's go ahead and put flex wrap on the first one see if that helps yeah so i want flex wrap on these so we get both the x and the y and let me increase the number of items in each container so that the changes are clear so here we have a gap on the x and y axis gap five here we just have a gap x and here we have just a gap y so you can see there's no space in between each item so that's cool fairly simple okay so we are skipping containers i do not understand containers um they are not making sense currently so i'm going to circle back and take care of that and look at that later let's look at columns all right so okay so this just controls the number of columns that an element so this seems pretty straightforward let's go ahead and okay let's do uh columns three okay we can use gap with the columns as well okay yeah we'll just do a columns let's do a columns three and see what that looks like so let's see um let's use i wonder if there's some image that i can just grab from somewhere you know let's just grab their image and let's grab let's just make a bunch of these so let's copy and paste tons of these and let's see what this columns gets us all right so as you'd expect we have a couple columns and i'm going to add a gap here so we'll do gap five get some space in between each item interestingly we did not get y-axis gap there i wonder why i wonder if i specify will it add that no so it's just not giving me a gap there interesting okay we'll get five grab ten okay so that's columns it looks like it only works with i would say that it works with gap up here [Music] no just gap x i guess over here [Music] oh interesting so i can modify the columns on hover i just want to try this hover two wow okay all right that's cool i guess so yeah it looks like only gap x works yeah let's specify the gap here okay all right so that's a basic idea of columns makes sense okay css grid so this is an important one hopefully they have a simple example i can look at so [Music] yeah display grid okay yeah this is super straightforward their documentation is really fantastic great work to all the engineers that worked on there the toe one css documentation is fantastic so this is grid and we're just going to do grid create calls we'll do four columns and we'll do two rows and let's just get a bunch of items in here so p tag is in grid io let's call it great item here what is that oh wait wait that's not what i'm about to do just p tag [Music] let's see great item cool and then we'll just create a bunch of these and let's throw it in a grid grid calls four grid rows two see what that looks like [Music] okay looks like nothing because it did not add the grid class cool so as expected we got the 4x2 and you know actually i want to let me use this image in the previous example um well i wonder if i can just throw that in there randomly yeah [Music] so as you'd expect just kind of shows up uh with the proper grid alignment so i can change these and the entire grid will just update so really clean simple way to use flexgrid i'm sure there are other spacing properties in here that can be used but i think that covers the main idea cool let me just convert these [Music] maybe maybe use the image for this as well right okay yeah so they don't have rows so this is just not a thing which makes sense i guess uh responsive yeah how do they handle responsive content so these break points and then we can adjust based on the width we're at okay every utility class in the framework which means you can literally change anything at a given break point okay that's cool [Music] okay so i guess we'll just create a random example and let's let's let's use this grid as an example this is kind of interesting so i'll copy the grid or you know something even more common the grid is nice but it's basically using columns let's use columns uh so it'll be three columns when it hits the midpoint otherwise it'll be one column so this is pretty typical right you'll have a mobile view that you need to shrink down to but once you hit like a desktop size you just want three columns always so uh i assume it's just md colon columns three and i'll keep the gap on there that's fine and then just columns right columns 1 in all other cases i think that's what that's saying let's see [Music] okay yeah so and let's change the responsive and then so now i'm going to shrink yeah okay great yeah that worked perfectly right so now that i've shrunken down to a mobile size it's a single column but when i get to the mid size [Music] we're now using three columns all the way up so from every screen size upward so yeah that's a great way to make things responsive and we can also do something like um i don't know we can add that border radius or something let's do something kind of silly let's add let's add border radius to the images uh when they're on the medium view so um how does that work is that just radius how did that work good thing i have this cheat sheet here [Music] brown did okay okay so i'll use um rounded none i assume and then when the screen is medium or larger i'll use rounded excel let's see how it looks all right so i did not get rounded oh i did it okay let's look at the wrong example cool so right now they're all rounded can i increase that into xl there we go three excel nice one no three xl rounded and now when i shrink down we just get cornered okay so that's yeah that's that's a pretty quick way to add responsive design okay so that is responsive okay now let's do some more basic fundamental type things so uh absolute position so how do we handle absolute positioning with tell one css [Music] so [Music] we'll do it here the other way so that reads like you would write it it's just an absolute [Music] [Music] absolutely positioning elements [Music] okay looks like i literally just typed absolutely [Music] i use the offsets so i'll take an element we'll have a i assume relative is just relative so we'll say we have a relative div first and we'll set a size here so let's use um width 52 height 52 but let's use 24. i'll go ahead and just throw uh whatever border around it so border uh four so we can see that and then we'll create an absolutely positioned item and we'll say we'll do a write 10. three ten that's ten yeah we can do ten so do write ten and i'll do a bottom five uh absolute div and i'll go ahead and add a border to this div as well and border red 500 amber that's how that looks okay very interesting so let's let's increase the size here this is a little too small i'll use half the container size here uh does that not work oh but half of the height is basically nothing um okay right so let me go back to 52 here i'll i'll use 52 5252 which is cleaner okay okay great so we can see that the div is positioned let me add this so that's absolute it's right 10 bottom five makes complete sense cool [Music] okay and fixed position um this is kind of a weird one no i guess it's not because it'll be contained let's let's just try it position fixed um so i assume it's largely the same so i'll do a fixed and then i'll just do a yeah we'll do the bottom right again so um now we'll do these zero do we have zeros here yeah we do okay great um fixed zero bottom zero yeah okay see so now we're gonna get that stuck um permanently uh it's gonna kind of mess things up so i'm gonna actually uh let's see how do i handle this just gonna create a simple conditional here of a conditional class and i don't need to have a border on this item anymore we'll just go here and i don't really need height keep the relative cool yeah so that turns this on and off and you can see this difference position absolute and let's move this to the top move to the top right cool and let's make this larger so it's more obvious that it's there so i'll say width 52. 52 cool and i'll go and bubble the text size too since hey we know tailwind now so three lg or xl i guess cool and let's make this look like a button just add a class here we'll do a border and we'll do some padding six and why do i have 100 width on this button it's interesting so i'll just change that with six okay a little larger twelve i'll do margin instead there we go and we'll do um was it text center cool there's a little simple button um let's do the pointer so let's say uh cursor pointer yeah it's all starting to kind of come together here which is nice great so now we have the absolute position div right and top so cool so that's that's great uh zn excuse me z index cool yeah so as you would expect z dash some unit so okay pretty simple let's cook up an example here so we'll do z one and we'll just go up to three so let's do three examples three layers and how do we want to do these layers we can use relative again and then we can do div absolute and then we'll do a z1 and then we'll just increment this z2 z3 and then let's add some width uh with let's do 42 542 and let's add some content this z is one two three and you can see they're all stacking on each other right there i don't think these units are actually working it's kind of weird that the width and heights like you need to know these exact numbers [Music] which i guess will just come with time but like 42 doesn't work i need to use a 40 here nope 40 doesn't work either like is this this happening [Music] oh no it is happening it's just positioned absolute so it doesn't look like it's happening now let me bump up this parent container do with 24 high 24 [Music] and we'll just add borders to make it really clear so save border yeah so great so yeah so now those are coming in um great so these are let's do a 24. cool and then we'll offset these right so uh and we'll add bg colors so it's super clear so bg blue 500 and we'll do a red and a green with the green on top and then we'll offset these a little right so left ten top ten so you see the glue sticking out there and then i'll repeat and just add ten cool um let's see so the green's on top so you want to move these around there we go so these 20 as a unit yeah that's the one thing well there are a couple things i'm saying that might not be great but memorizing these unit numbers i want to do some magic trick to it like they increment by a specific amount or it increases by a specific amount but like here like the gap is um you know 24 32 40 so looks like we're just going up by eight up until this point and it just like jumps i guess i guess it doubles i'm sure there's some way to set an exact pixel um but whatever okay so that's z index [Music] alright so moving on here let's jump in the full screen mode let's look at preset themes and custom theme settings so i want to look at ways to customize the entire tailwind css theme right so we looked at this object here in the beginning this tellwhen dot config.js file and this you know basically contains the presets for all the tell one classes so they have this object here this key value pair called presets and the idea is that you can pass in an existing tailwind configuration file so i'm doing that right now so i'm going to make an indydevdan.tailwind.js file and this will allow me to you know plug in my own styles and you know this is really cool because you can reuse them across your projects um or you know put it out there for the rest of the world to use so okay so let's jump in here and add a theme at the themes key value pair colors key value pair and let's modify our blue 500 so the idea here is that i'll just change my blue 500 which i've used across the cheat sheet to a to just like a solid green color so i'm looking at that right now um [Music] so yeah i've used this blue across the site and i'm going to add a had my blue 700 and my blue 200 as well cool and then i'm going to import my presets file yep just gonna require it just as the ducks say and throw my foul in there okay looks like i misspelled classic okay so looks like my blues are not updating to greens so let's see what's going on here okay so i'm jumping in a little bit i noticed that the object that colors takes um you actually give a key value pair of blue and then you just specify the uh the integer value inside that object so let's make that update restart the server and still nothing um so i'm gonna do some digging here okay so i learned that you need to extend so the extend will overwrite pre-existing um tell when css configurations and as you can see all of our blues have turned to greens so the issue there was that i needed to nest these items in the extend key key value pair to override the previous uh tailwind config so that's how you can set up your own preset and override existing styles now let's jump into uh configuration right so you probably won't always want your own preset so you you can always just hop into the tailwind configuration file um and change things right so like let's change um this background color this orange or amber background color um so i'm in the tailwind config file and i'm literally just going to spread the existing colors and then override the 500 right um and let's change this to a like a yellow or something just like a solid yellow so we can blindly see the change cool that's great so that worked so you can see just right there really quickly i completely overrode an existing value and if you if you were using tailwind across your entire site that value would update everywhere so this is really cool i mean the power of tailwind is becoming really clear to me um you know the reusability is really there the customizability is there you know this has kind of already been done with you know sass and css variables and stuff like that but i think this is a better way uh it's in my mind it's faster it's more concise but so i i like tolent um i'm going to use it in some of my projects and see if there are any serious bumps i run into i'm curious what do you guys think about tell when css is it useful has it helped you in your development drop a comment down below i'm interested to see how it's worked for you feel free to check out the cheat sheet we created link in the description i hope you enjoyed this video if you got value out of it definitely like and subscribe i'll see you guys in the next one