‫One of my favorite things when working
‫in Tailwind is spacing.
‫So using classes for margin and for petting
‫and also for all the other things in the box model.
‫So things like borders and display.
‫And so let's now explore these a little bit
‫as these are one of the most important things
‫that we use all the time in Tailwind.
‫Now, let's start
‫by actually including this create user form right here
‫into the homepage.
‫So here inside this div after the H one.
‫So create like this.
‫So create user and for some reason,
‫we have to do our manual import here again.
‫So create user,
‫and then features user and create user now, right?
‫So here we have this very basic form
‫but now we need some spacing around all of this.
‫So we need some spacing between the H one and the form
‫and probably also here between the beginning.
‫So between this div right here and the header.
‫So let's use some of tailwind's classes for that.
‫So right here in the H one
‫we want to now add some margin to the bottom.
‫And the way we do that is by writing MB.
‫And then here some number.
‫So let's start with four
‫and then I will show you what this actually mean
‫in a second.
‫And notice how the automatic glass sorting then
‫placed this margin here at the very beginning.
‫So this MB, all it does is to set margin bottom to one rem.
‫And so let's now come here
‫to our Tailwind docks and let's search for margin.
‫And so here we have all these different values
‫that we can use.
‫So this one actually takes some time to memorize
‫because there are many different options here.
‫But basically the M always stands for margin.
‫Then X means in the X direction,
‫so left and right,
‫the Y direction here is top and bottom.
‫And then we also have margin for the top,
‫the right the bottom, and the left.
‫So these are the most important ones that we really
‫need to know.
‫And then after that, we have these numbers here.
‫So zero is of course zero pixels.
‫Then we have 0.5.
‫And then from there we have some scale
‫that Tailwind came up with.
‫So we have one which is four pixels
‫then six pixels, which is this 1.5,
‫and then so on and so forth.
‫But it is not a linear scale
‫because for example here eight is already 32 pixels.
‫So this eight is not eight pixels.
‫All right.
‫So we have all of this year
‫you see its finishes at 96,
‫which is this Ute margin.
‫So this Ute value now, right?
‫We also have auto here, which is margin auto
‫that we use many times to center elements.
‫And yeah, if you want more information
‫you can as always read the documentation page right here.
‫So what I just explained works this way
‫for margin and also for padding.
‫So we also have like PB and then four.
‫But anyway here, let's increase this,
‫let's say to eight.
‫So this is then 32 pixels, and this looks a bit better.
‫And over time, you'll of course get a feeling
‫about which values you need in which situations now, right?
‫So now here, let's add some margin to the top.
‫And let's say in this entire div,
‫so let's say MT and then 10,
‫so not P, but T and beautiful.
‫And if we want to center this text here,
‫so the content in the form,
‫we can actually just move this center up here.
‫And yeah, that then centers everything.
‫Now, let's do the same here at the bottom as well.
‫And so we could do MB 10 as well.
‫So if we wanted 10, or we could do also let's say eight,
‫but if we want both of them to be 10,
‫then remember that we can also use this helper.
‫So MY, so in the Y direction.
‫So that gives then 10 pixels to the top and to the bottom
‫and not 10 pixels,
‫but really just this value of 10
‫which translates to actually 40 pixels now.
‫Okay, next up, let's go to the header and add a little bit
‫of padding inside this header.
‫So here we already have the class name.
‫And so let's just add some padding to the X direction.
‫Let's say four here.
‫And so that X direction is the left and the right
‫and then top and bottom, PY.
‫Now okay, nice.
‫And so writing this is actually a lot faster
‫than having to write out all of this here by hand, right?
‫So I really, really like these classes right here.
‫So for margin and for padding.
‫Now, let's also add a border right here.
‫So the border is also part of the CSS box model.
‫And so let's also talk about that right here.
‫So the way in which we add a border is in two steps.
‫First, we write border and enter direction
‫which again is B for bottom,
‫but it could also be top
‫or it could be left right or X and Y.
‫But here we just want it at the bottom.
‫And then we can again set a value for the width.
‫So this one, for example, would be two pixels
‫or we could do eight probably.
‫And I'm actually just making this up.
‫So after some experience, you know that
‫in some places you can add some values
‫and sometimes you cannot.
‫Now here we don't need anything actually
‫because by default if we just write border B
‫that will then be one pixel.
‫And then as a second step, we also need to define the color.
‫So that's border.
‫And then we write a color in or usual way.
‫So stone and then some color.
‫Let's just do something dark here to see.
‫And indeed, there it is.
‫So our classes got reorganized here again and again.
‫If we wanted a bigger border, we would do it like this.
‫And now let's make it a bit lighter so that we can really
‫only see it very faintly here.
‫So this is just a small detail,
‫just so I could show you how this border works.
‫And then to finish, let's as always also style
‫this card overview that is part of our layout.
‫So here we want some petting as well.
‫So let's do just petting and then four.
‫And so this will then apply it to all four sites
‫or actually of course not.
‫So this was just in the Y direction,
‫but just P four.
‫So just padding four will then put it everywhere.
‫So on all four sites now, right?
‫And now staying again on the topic of spacing.
‫Tailwind actually includes a very, very nice
‫and helpful class,
‫which allows us to add spacing
‫between elements in a very easy way.
‫So without, for example,
‫having to use any flex box tricks.
‫So the way that works, and let's say we wanted some space
‫between these elements here,
‫is that on the parent you simply use space,
‫then the direction.
‫So X for horizontal and Y for vertical,
‫and then the amount again.
‫And beautiful.
‫So here we created this nice space that we wanted
‫and let's see what this actually does.
‫So what CSS is actually written.
‫And so this one is a little bit more complex.
‫And so with this class, we can achieve this really
‫important thing that we need all the time just
‫by writing this simple class.
‫So by now, hopefully you are starting to
‫see all the advantages that Tailwind gives us.
‫So again, for me, the main advantage is
‫that we can write all
‫of this styling here without having to switch
‫between CSS and JSX or between these component files.
‫And also we don't have to come
‫up with all these class names
‫which is always a lot of work,
‫which might sound strange
‫but actually if you have a large application
‫then you need to come up with lots of class names
‫which will then create all sort of problems.
‫And again, here we can check out this amazing class
‫just type spacing here, or maybe space.
‫So space between.
‫This is actually the one that we are looking for.
‫And so here you can learn more about this
‫as always if you want.
‫And now just to finish
‫let's also talk about the display property
‫because debt is once again also part of the CSS box model.
‫So basically here for all of these
‫different display set to anything,
‫the class name is simply the property value.
‫So we have block flex inline
‫and the one that I'm interested in now is the hidden one.
‫So in this case, it's actually different from the value.
‫So display none is equivalent to the hidden class.
‫So what I want to do now here is to hide this user
‫on smaller screens.
‫So let's just come here
‫and let's use the hidden class,
‫and then it's gone.
‫Nice.
‫Now, notice how I just talked about smaller screens
‫which actually brings us to the topic
‫of responsive web design,
‫which is fundamental in Tailwind.
‫And so let's now move on
‫to the next video and start learning about that.