Transcript for:
Tailwind CSS Framework by Guillaume

in this course Guillaume will teach you how to use the Tailwind CSS framework to create web applications faster and easier Guillaume has been a front-end developer for 10 years and he has created many courses on udemy and his own YouTube channel hello everybody and welcome to this course about Tailwind CSS my name is Guillaume and today I'm going to introduce you to this amazing CSS framework made to create design for front-end application I'm going to use nexgs during this course however you don't need to know anything about next to follow every step of the course it's the same for CSS you don't necessarily need to know CSS to follow this course however it's recommended to have some bases by the end of this entire demonstration you will be able to use Tailwind CSS to create your own custom design system here is the program of our course we are going to learn how to deal with color at first because Tailwind CSS is providing to us a full set of colors that are very useful then we are going to see how to customize your design because yes with tear in CSS what is amazing is that there is a powerful engine of customization that helps you to customize everything then we are going to look at the typography how to deal with text size and text fonts those spaces and sizes of merging and padding we are going to deal with flags and grids to create columns for instance or just to create containers then we are going to look at the layouts and the layouts it's something really important when we do front-end application sometimes we want to switch our Styles this is what we are going to see then we are going to look at the borders the effects filters animation and transition if you did CSS before you should be familiar with these Concepts and of course we will need to take a look at the core concept of telwyn because if you want to work with Tailwind CSS I think this is my personal opinion you need to understand the core concept to use it efficiently finally we will finish by create our own design system we will create together some buttons some select elements entirely with Tailwind of course we will not miss to see how we can implement the famous dark mode Let's Start right now to follow this course I created a next gs14 application but you can also follow this course with vue.gs as well yes and any other front-end framework that you want that you like and use also Tailwind it's not a problem you can install Tailwind everywhere you want to do front end or either you want to do an HTML using an HTML file it's also working when we go on 10win css.com WE quickly understand that terrain CSS is providing to us already CSS written so basically here we got the classes that we apply to an HTML file or UI element whatever and we see that the design is dynamically updated so basically the Tailwind CSS core team already write all the CSS we need and that we use most of the time to create element so we don't waste time on on writing CSS it's already here so why not use it so there are several ways to install Tailwind so you can use the CLI provided by Tailwind itself it's the tool that helps you to install everything but me I'm going to use one of the framework guides here with nexgs as you see here there is well kit angular Phoenix solid GS Gatsby whatever it will work for you then we got also the CDN if you want to use it for instance in a single HTML file or for an email template or a plugin whatever you can use also Tailwind by importing the script so I'm going to go on the framework guide click on next GS even though I know that it's not really complete now because I'm using Nexus 14 and I will have to Loop through my app folder so I'm going to be here and what I'm going to use is directly the installation here that we got npm install minus the Tailwind CSS I'm going to stop all of this but CSS Auto prefixer it's really important then I'm going to get back here and I need to init my Tailwind CSS files because terrain CSS comes with configuration file the force of Tailwind is that you can customize everything before pre-processing your CSS final style sheet what does it mean it means that here in my tailwind.config.js I can do a lot of configuration on colors spacing typography font family whatever that will help me to on the Fly rebuild my CSS library and get my own customization available inside Tailwind so I'm gonna get back there and in order to do so I need to specify to Tailwind where to look at and where to get the files and to update them and pause them and see where are the classes that they can you can use I'm going to get back on tailwind config.js and we see here that my content array is empty I need to put here pages and components because if you are using nexgs 12 or the version before the the last version which is the Nexus 13. you have the pages folder that contains tons of files with extension GS typescript gs6 TS6 and components also that contains also files with extension and basically their Tailwind has to know that he has to look at this however here in Nexus 13 we have an Hub folder we want to look at so I need to add this up there here in the documentation it says Nexus 13 V10 plus project but the documentation at the time I'm doing this video is not updated so we need to say look at the app folder which is here I need to do is to go on my global.css file and add Tailwind with the at decorator tell win I will call telwyn and say please bring me something and here it's base then we import components and utilities we need all those elements to make Tailwind Works inside our app so in global.css I removed the previous code that I have when I generate my next gs13 app and I had my Tailwind there all done there I got an example I'm going to copy paste this piece of gs6 there and instead of a I'm going to just copy paste this LOL now I'm going to type yarn Dev I'm going to make my application running I'm going to get back and then when I update I'm supposed to have Tailwind CSS loaded it is working and if I want to check if Tailwind has been imported I go to my source tab in my console on localhost here I can go to next static which is here which is the build of my app I go to CSS and when I click on app.global.css we see that I got Tailwind CSS running one of the main core concept of terrine CSS is utility classes basically with HTML what should we do and using a traditional approach for an element you will first write HTML and from parent to Children you will Target these HTML element with classes then what you will do you will write CSS and dcss will be related to your HTML element so you will write one time CSS for one element with tearing CSS we get the same result way faster with a lighter code base because we are using utility classes utility classes its classes already provided by Tailwind CSS to give the same result but without writing any CSS if you want to use flexbox padding Max width margin background color border radius with eight Flags whatever you can relate to the Tailwind CSS documentation and just add your classes this way so you will ask me the question Guam why not to use inline style instead of having those classes well telwyn CSS has many advantages over inline Style first you have a predefined design system provided by Tailwind which means that from the start if you don't want to create a design system you can easily use the pre-existing design system then with tear in CSS you can focus on responsive design from the start so I give you an example you are creating your application and you are adding your classes for the desktop Tab and mobile you can do it with responsive design at the same time because Tailwind is providing to you breakpoint prefixes and those breakpoint prefixes are simply media queries here we see that we've got a width by default and we want to change this width by default when we reach the breakpoint prefix medium which is 768 pixel I can just add the modifier MD on front of it and I will change the size when I will be on Min width 768 pixels okay and you can do the same with large x large etc etc so terrain CSS is very useful to work with responsive design immediately from the start so you don't lose your time writing first the CSS for desktop then writing the CSS for responsive I was talking about modifiers but modifiers also work for hover focus and all other elements that you can have in CSS let's give an example here I get a button and when I pass my mouse on it we see that the color is changing okay it this is because I use the LTT classes with a modifier hover and with the modifier over I can say change your color it's also working with focus and active and it's also working with elements like last hold and even okay here we've got the the example we can just change the behavior on when we want to Target the first last element etc etc it's also working with before and after sudo element yes Tailwind work with pseudo element and we can also Target for instance the placeholder if you want to put them in italic the list markers that's an example or the Highlight text here I want to change the color of my highlight text I can do it with Tailwind simply with the modifier selection the responsive breakpoints help us to work with that because you can stack you can stack actually the modifiers and the utility classes which is very useful but another topic where terrain CSS is amazing it's it's dark mode with terrances you can add what we call the prefers color schema you can have several um different color schema to your Tailwind team and you can use of course the dark mode here we've got an example we can say that in dark mode I want to change a color background and I just had a dock on top of it okay and that's amazing because Tailwind CSS really hacked this thing of having a dark mode into your application or website personally I use it all the time however the real Force for me of Terror in CSS it's its customization system we tell you in CSS you can customize all of it all your framework actually you can customize your team through a tailwind.config.js file because Tailwind is like an engine that will understand what sizes what colors what font family what borders you want to use and it will build on the fly on its basis classes the class that you need let me give you an example on your tailwind.config.js you will have a team object which will contain the screen size or the breakpoints that we saw before but also the colors the font family and if you want to keep the basis of terrain and right on top of it you can use extend and in extend just rewrite what you just want to write again but if you want to create your own team which is cool is that with the colors you can say hey if there is no blue color add this blue color and this is the code of the color and the engine of Tailwind will dynamically create for you the background the text color the borders everything that is related to colors and then you will just have later to type text blue BG blue border blue etc etc how amazing is this and since I've I have started to use tailwind and use its customization system I cannot work without of course you can go way deeper into the customization because with Tailwind CSS you can just reuse your style so here we've got an example here we are targeting the layer base after importing tailwind and we can apply with The Decorator add and apply the directive we can say hey I want to create a class but I want that this class is using an existing Tailwind class you can do it with apply okay you can go deeper by creating also your component directly and using the directive and function theme this directive and function team is helping you to Target directly the basis of tailwind and say hey I want the reference of the colors and in the colors I want the white color and that's sometimes very very useful it helps you actually to add your custom utilities and it helps you to add your custom classes most of the time you see that you are using the same classes and stuff and you would like to gather them into some class it's possible with apply but also you could create a class with apply and calling all the base that you need from Tailwind plus adding your own CSS so you can stack the base of Tailwind plus your custom element and your Custom Design if you want to go deeper into the customization of Tailwind you have also the option of writing plugins in JavaScript that will help you to basically change your base or change your component and utilities provided by Tailwind all right here we've got a quick example on how I can change all the H1 of my base my components there and utilities down there that's an example on how far you can go to write CSS with tailwind and how far you can customize it let's start by the colors Tailwind CSS give us a big palette since the beginning so we can start with these colors already provided by tailwind and which is cool here it's that we've got for instance this slate color there and we've got different gradients okay and it's the same for every color down there so let's say that we would like to use for instance this green color there okay what I can do is back in my app and I'm going to get back in the piece of code I just paste okay I got here do some classes okay here text minus free Excel actually it's a class related to the size then we've got font bold it's really easy to understand it's a class related to the wave of the actual um string then we got underline let's remove all of this okay and let's start by an empty class for this uh piece of string so there we get back to the app and we've got hello world just written in here so I'm going I think I'm going to zoom in there we go LOL and let's say that we want to apply this green color Well normally what we would do is we would create a CSS class called dot green and we would put the code color the X color there inside our class but what we can do with Tailwind because it's already written for us we can go here and type text text means that we call the variable text which is inside telwyn and it is waiting for an action to be done so we are going to put a minus or Dash and then here what we can do is put the color we want so I'm going to type green I'm using the intellisense extension of vs code so basically it's really important if you want to use tailoring CSS in vs code please use intellisense extension so you type intellisense there and I'm going to open this down there here I got Tailwind CSS intellisense telwyn CSS intellisense extension help us to auto complete to linked to correct our terwin CSS code written inside our vs code so here I got nothing that is showing because text green doesn't mean anything for Tailwind which means that here I gotta put another information to tell him which kind of color I want to use do I want to use the 50 the 100 the 200 the 300 the 400 the 500 which one do I need to use so what I'm going to do I'm gonna need to use the 600. so I'm going to get back on my app and put a text green minus 600 sorry it copied the code and here look intellisense understood that I want to use the text green 600 and so it shows to me this little square there with the color so I'm going to get back in there and when I update the color has been applied and let's just let's just inspect this element and look what is in our console so I'm going to move because here you don't see it I'm just in front of it here we've got the color there with something really weird for real beginners the RGB code with the variable TW text opacity what is that text green 600 is a CSS class that comes from app.globals App underscore Global CSS and if I click on it look at it I'm back inside my Tailwind CSS main file it's full of content and at the end of this content a new class has been created text green 600 which is really cool because if you understand well back in there in the color palette we got several classes there that exist that are provided by Green but actually we got only 600 so it means that Tailwind only create and picks the code it needs to run it doesn't have every color if you don't use them it's just adding the color you need and we can make the test there by creating for instance let's create a div let's create another title but with a different color and here for instance I think we got yellow and there we go we see that we get yellow and when I get back I'm going to close this I update and look at this down there we've got text yellow 600 that has been aided and that's what is really cool with Tailwind Tailwind is going to create the classes it only needs which means at the end you will not have a big CSS file that you don't use or you only use 10 percent you will use 100 that is provided in here and all the main stuff that you really need so this was for the text color but let's say that we want to put a background which is amazing with Tailwind it's that it always worked the same way instead of having text green 600 let's say that we want to have for instance BG green 600 which means bg4 background and then we are going to put a text white there because we want to have a text White BG this entry here is telling to my H1 to apply a background of what green 600 and I'm gonna get back there I'm going to update and look at that there we go we've got our background how amazing is that it's really easy to understand and that's what I like about Terror in CSS is that you can really switch from some classes that you will use for the colors the text the grid that we will see later really easily because once you understand this Tailwind CSS is really easy to handle let's say now that instead of having this background green we want to have a border and it really happens often so I'm going to remove all of this and if I type border and I get back and I update there we go we see that we got a border and this random border has been applied directly from Tailwind so let's say that this border we want it to be thicker what we can do is put a dash and we are not going to use 50 or 100 or whatever we are just going to use the size of the pixel so here let's say that we want to have six pixels if I type border 6 when I update it doesn't apply why so let's go let's go to the documentation and let's type border and let's look at the border and which is cool with the Tailwind documentation it's that down there we've got the classes that are provided directly by Tailwind and we have some sizes already made there so I can only use 0 2 4 8 or just one and if I want to use other borders if I don't want to have border that takes all I can use minus error we're going to see that just after minus L for left minus bottom B4 bottom etc etc so I'm going to get back there and put a minus four get back and when I update there we go I got my border there but remember we want our border to be green so I'm going to get back there and type border green and look at that intellisense is grabbing all the colors that we've got so I'm going to type colors there all the colors that we've got here directly inside my vs code so I'm going to type 600 I'm going to save and I'm going to update and the Border green has been applied okay that's cool but let's see now how can we deal with custom colors so I'm going to go on Google there and I'm going to type Color Picker and I'm going to take a random green okay let's say that I want to have this particular green there and I got the code down there on the X how can I do to say to tell when to use this color what I can do is customizing my color so I'm going to click here on using customize color and here we see that we have to go on tailwind.config.js file so I'm going to get back there and I go to terwin.config.js file and this is where all the customization magic happens so what I can do is enter my team so I got a team that is open and I already got extended okay X10 sorry so X10 here will be used later to improve the actual model but if I want to put a new color there what I can do is let's say that here I got my view GS oh I'm on next but I'm going to use let's say that I'm going to add a new color so I'm going to type colors there and I'm going to type my view GS green color okay and here what I can do is putting directly my color on there and I'm going don't need to do that actually there we go now I got Vue GS as a color available and when I get back to my app this is what happens I don't got the old colors anymore why because I overwrite the colors from the team there so I overwrite my colors and there are two solutions to that I can either re-import the colors from the Tailwind the main Tailwind not modules that I already got otherwise I need to put those colors into extent because X10 is the option to say okay I keep the original Tailwind library but I want to add this this on top of it so I can take colors there go to extend and put my colors inside of it instead of having on the top of team and when I get back I got my colors back so what I can do here directly is to go inside my app folder there and go to my page and instead of having this this text yellow 600 I'm going to put text viewgs and here look intellisense and understood that we want this green color and when I update I got my own color so this is how it works to get the customization colors that we need and of course inside this vgs we could do the same as Tailwind we could say that 100 is this color okay but we could say for instance that 932 is the uh is another color let's say uh yes there we go let's say it's this one and when I will use that there I can do text viewgs 100 with this color and also I can use the other color with my own key that I created inside my extend there on the official documentation of Tailwind on the customization side we see that we can configure the customization we can also customize the content our teams do screens the colors the spacing we can add plugins and presets and if we start by the main file of telwyn which is tailwind.config.js we see down there that we can configure the colors the font family but also those facing the Border radius etc etc means yes classes is referred to CSS and this CSS is actually generated on the fly so on the tailwind.config.js file you can write as keys of these objects you can write classes and those classes will irritate from the value of this key and sometimes this value Can Be Strings numbers or objects or array as we see down here on font family we have a font that is added which is graphic and then we've got some serif so we see that some serif would be the second argument of font family basically here font family saw with graphic and saucerif will make for us a fun family semicolon graphic sensitive okay nothing really special there but which is cool is that you can also customize the spacing so the spacing with tearing CSS and it's a very important concept help us to deal with the padding the merging the with the eight etc etc so we see there that immediately we can say that the spacing that we are looking for can be defined there as pixels Ram or any other unit here we've got the example of a team that specify the size of for instance our screens I want to put a certain size on the sentence okay so I'm going to put text Dash to say that I want this text to be text LG or what happens if I put another size here we see that my code editor already corrected me we got two different sizes and there is a conflict what I can do with Tailwind is that I can say that I want to have text SM but when I'm on LG so when I'm on a large screen semicolon I want to have text LG okay so here text is SM will be applied to all the sizes of the screen that are lower to LG and if I go to my tailwind.config.js I can add the example that I have there on my team so I'm going to take this screens okay on my team and I'm going to add it and I'm going to save Tailwind CSS understand that all those size have a limit a media query limit of this value every time to make a big difference on that what I'm gonna do is to expand the size so I'm going to have text 6X and here I'm going to put text free excels and so there's a moment when I'm going to switch and there we go I'm going to get back there and I'm going to move again and look here up there you get the size okay of the screen the current screen so we see that I'm moving the size and when I pass the limit which is 976 okay 176 we see that my text is changing this is because LG has been defined there as 976. let's give another example now let's say that on MD I'm going to put an alternative and here I want to have a text LG and let's say that on small I'm going to have a text base okay I'm going to save this I'm going to pass step by step to all those sizes I'm going to get back and I'm going to get back there and please have a look in here on the size and when I lower the size okay little by little I'm going to pass from a size to another one and look here it's really easy to see we change the size dynamically it's also working for colors it's also working for font family and this is something really useful instead of having JavaScript function that help us to change classes attribute whatever we can use steroine for that here on the documentation we see that the behavior can change there when we specify a width and of course those width are provided by terwin but you can change them customize them if you want to or if you need to it's exactly the same for spacing on spacing here you can specify that some elements there can have a specific spacing all right and those numbers specific numbers that are used so if I go here and I put my spacing sorry object there with this this spacing would be applied to all classes that are calling as an argument do spacing here we got two sentences and we want to put some space under the first sentence when I go to my page I apply a margin bottom of one to understand how to add margin padding and spaces please refer to the video spaces in my tailwind.config.js I said that the spacing one die that I applied here as an argument of the class is 8 pixel but just for the example let's put 100 pixel and let's get back to our application and updating and here we see that now the spacing with one is of 100 pixel so you can build your entire system of spacing with tailwind and this is really amazing because tearing is by nature providing uh already made spacing grid but actually if you have a different vision and if the design system that has been given to you by a graphic designer for instance is different from Tailwind actually you can build a new design system directly there with your own spacing way deeper into the customization possibilities with Tailwind you can create what we call plugins and plugins it's some kind of helpers that helps you to create style sheets with JavaScript so it can be useful in many many situations if you want to create some elements such as utilities such as components match component add-base add variants let's say that you want to go way deeper into the work of a front-end developer and create really really specific design you would need to create what we call a plugin to our arbitrary values well its values that you can directly inject into the CSS class that you get there so let's take an example let's take this background color there which is not part of my customization file okay I just put that and we see that intellisense already recognized the color okay and when I save and I get back to the app there we go my color has been applied so this arbitrary values are values that you use not necessarily everywhere but you set up directly inside the current CSS class there and that's what is cool with Tailwind we can also build on the Fly Like This without registering all the values that we want to customize inside tailwind.config.js we can build our design system like this directly in line what we call inline style directly into the HTML using 10 win CSS is amazing because it provides to us a lot of classes already written CSS that we can use but do we really need to never write CSS sometimes we do we need to write CSS Tailwind is providing to us a directive call layer so when I go to my global.css file and I'm going to close all of this to be clear there we go we can apply layer okay layer is a directive that help us to write CSS for a certain scope up there we uh we imported actually Tailwind already so layer here is available there and down there we see that layer okay can add style to Tailwind base component and utilities and remember base component and utilities are on the top they are imported and I can overwrite here on by typing layer base see that I want to have background color yes and let's put for instance lime all right if I get back to my app what's gonna happen I go here I update and there we go we've got the color uh that it has been applied there instead of writing this I can use apply apply the directive help me to call actually to call do classes that are provided by Tailwind so here we see that I have an apply text to excel but let's say that we want to do apply BG and let's say BG uh let's put a gray slate there we go and I'm going to say like this I'm going to get back there and remove this class that I had previously removing it and there we go I get back I update and what's gonna happen is that I have my background in Gray so what happened here is that I can call as much as I want 10 win classes so I can call text white for instance and there we go so here at the beginning of a project I should go to taiwin.config.js adding all my classes spaces typography and when I want to do really custom CSS I can go back on my global.css and apply my class there for soft Tailwind for me it's using this apply directive what we can do we can chain actually we can chain the classes there so we earn visibility time and our code is more clear more easy to understand and I'm going to do a text LG so I think text LG yeah text LG and font bold all right so when I get back there we go my steel has been applied another function that I should mention here is that you can use multiple CSS files and by that you can mention them in your post CSS import if you don't want to write CSS you can focus on writing plugins so as I told you plugins are JavaScript functions basically that will help you to write CSS by JavaScript you can find it here on writing plugins on the official documentation we can see that we have several elements that can help us to change the font or text inside our application of course the team core of Tailwind thought about everything concerning typography in my next GS application I have different uh type of tag elements there I have an H1 for the first title I have an H2 an H3 and then I have several paragraph and the first thing that we can notice is that Tailwind CSS doesn't apply the regular styling of the title with the tag the tags H1 H2 H3 those titles were supposed to be in bold and with a higher font size and here with Tailwind it's totally recessed so basically what we would need to do is to change at first the size and how can we change the size with Tailwind I using text minus or Dash and the size we want to have so let's try let's apply those classes and let's see what's going to happen so I'm going to take the first class text excess that gives the font size of 0.75 Ram so 12 pixel I'm going to take it I'm going to get back there and down there we see that I've already created a class called not okay we will see that later but I'm going to add text excess okay and my code editor in intellisense already changed the order of the class so now I add text success on this little note back into my application when I update we see that the size of the last paragraph changed and it changed for a smaller size so when I inspect and I go there we see that the font size is now 0.75 RM so Tailwind is providing to us many different font sizes class that we can use and let's go gradiently so here I'm going to get back add my class name there which is text small which is supposed to be bigger than the text excess I'm going to update and there we go and for the regular font size of terwin we add text base there so I'm going to take a base yes text base there this way there we go and there we go so we've got now the regular paragraph that stays on the same size the first three titles still stay at a certain font size so here we can one ram but if I go there we see that let's go and computed that the font size is still 16 pixels so what I can do is to use text LG but basically by experience on Tailwind to use the size of uh some titles we will use text Excel so I'm going to get a bigger size and on the text free there I will add my text Excel there and we see that the title is bigger and when I go here I look at it I'm on 20 pixel uh on top of excel we can add a number okay there is no text x6o with Tailwind you will have to add a number on front of the Excel there and it goes to nine so let's take the latest and see what is the size of of 9 XL and we will see will be big and let's say that here it's going to be text to excel so we've got three titles here and those titles having different sizes so 9 XL and there's a gap between the two and the nine there so I'm going to get back update and suddenly we have this big title there so you understand that there's a limit and actually I'm going to get back on 100 we understand that there's a bigger limit that has been crossed between the first title and the second title there all right so basically you would not have this kind of Gap in terms of design because it's too much what you need to do is trying to stay in the same in the same range of the sizes okay and there we go when we update there we go that's we have so for the font sizes it's very interesting okay we see here that we can change the font size as we want and of course we can customize our font sizing so let's try to configure to customize our font size so I gotta go on team and I'm gonna add font size so back in my tailwind.config.js I'm going to type font size and open an object and what do I have I have a text base which is there and right now text base is one REM one ram it corresponds to 16 pixel so let's say that I don't want to have 16 pixels but instead 18 pixel okay so I'm saving this term to base 18 pixels here I got a text base which is there I'm going to unzoom a little bit and right now it's supposed to be 16 pixels okay I'm going to put it at 18 pixels all right so I'm going to save this I'm going to zoom again there we go and updating and what's happening there my title lost their sizes and just my paragraph there has been updated so as you see if you try to change the the font size is by default in the team there you will remove the other sizes so you will have to manually there manually change every size you are using so let's take for instance text we've got SM okay so SM is there and I'm going to say that SM would be 15 pixel and Xs would be 12 pixels okay there we go I'm going to get back and we see that it changed all right and we can do the same for the values on the top also so if you don't want to overwrite those font sizes what you can do is taking them and put them into your extend extend will keep of course the initial configuration and we just want to write on top of Tailwind so when I update you see here that what only changed it's the value I used so here we got 18 pixels there instead of 16. all right that's great but what about the font family if I want to use certain font family to Tradewind CSS is offering to us the option to customize our phones okay but also Tailwind CSS provide to us basic font classes that if you are on different devices you want to keep your font secure but what if I want to import my own font and let's go on Google phones and let's say that I want to import a special font so here I got a phone selected enter if you want to look for a font of course you can go click here and take any font and add it to your review there what if I want to import this font enter I can go here so I'm going to put that there I'm going to click here and import my fonts okay I'm going to copy paste this get back and go to myglobal.css is always to import always your font there on the top then what I'm going to do getting back there I'm going to copy paste the the CSS rule to specify the font feminine that I want to use and remember there we still have our layer base which is used to act on layers that we use inside tailwind and on my HTML what I can do is simply apply my font enter and when I get back and I update and I'm going to look at it okay what's going to happen here I got enter as a font so this is how you use custom font with Tailwind CSS if you want to have smoothing on phones you can use also the class and digitalize and sub pixel and digitalize it gives something you see maybe we have to zoom to see the difference we see that our phones are a bit thicker or thinner it depends on the class you are using about font styling it's exactly the same you have classes for italic not italic okay you have also text decoration there with underline overline so if I go here and I get back on my first title let's say that I want it to be italic I can type italic and when I update there we go we'll get the title in italic if I want it underline I can type underline and suddenly I get an underline I can have a line through also which is a useful when you create some kind of to-do list that when you click it's passed on the Statue is done so you can put a line through like this otherwise you can have also an over line so as you see down there we get an example but we can just put it in there we've got an over line there I don't know why we would use that but it can be useful also and which is really cool with that text decoration it's that with Tailwind CSS you can act on the color the thickness the style of this underline so if we go there we see that we've got some examples you can change the color of the underline and that's really cool so here I'm going to change the color just to show it to you let's say that we want our underline to be red so I'm going to get back there and put underline and text decoration red 800 okay I got a red red 800. so 800 is maybe too much what I'm gonna put is 500 and there we go we're gonna have yeah it's better and this is how you can change your color this is really cool but you can also change the style and I find it really really funny if you want to have a double uh decoration you can use decoration double so here I'm going to get back decoration double I update and suddenly I got two lines I can use dotted also so dotted it will put dots instead of a regular light and the one that I like a lot it's wave and wave I found it really really nice so yeah decoration wavy sorry I put wave but it's wavy there we go I'm going to update we've got a wavy decoration and by the time if you wanted to do some kind of wave like this most of the people will use the pseudo element after and put some kind of image we take in CSS it's really easy you just have to put those classes what you can do also is work on the decoration thickness so if you want to have a very pronounced underline let's take I'm going to take decoration eight I'm going to get back there and put decoration eight look at that I get something really big and the problem is that it takes a lot of size and that's not what we want so we can work also on the offset and I think I'm going to get back there and just put a decoration one because it's too much there we go and let's say that I want to put a offset so I have to use underline offset 8 and what's gonna happen is that it's going to create space between the line of my text and the top of the underline so as you see here I again I use a very big value but if I can use the underlying offset 4 I got something that look nicer and just let's take that and put it in instead on a description I think it's better so here we got a regular paragraph and I'm going to put it there because most of the time those are the lines we will use them inside paragraph there we go we see that here the G is almost touching the underline and that's not what we want so we can augment the offset so when I update ah we don't have five I think yes eight there we go so I can I have to put a eight instead of a four yeah we got something really bigger and the thing is that here what we would like to have is a higher underline okay a higher underline so what I need to do is to go actually under line eight and with Tailwind CSS we can deal with line eight so as you see here we got a leading class with a number three four five that um make our line 8 bigger and at the end you get also classes regular classes that shows that you can use several sizes that are what we call regular sizes of line eight those regular sizes they are based on the number 1 1.2 1.3 okay and it's a regular element to um size actually the eight uh here the light leading three four five six they are based on Ram or pixels so I don't think it's really useful it's I it's preferably for me to use those leaning there so I'm going to use leading normal on my paragraph okay I'm going to get back there leading no more updating and here we see it doesn't change because basically the line a that I already have there I'm going to go on the style and I'm going to show it to you this way I'm going to go there the the line 8 that I have already is not very accessible okay so where is it leading normal we got it in here let's just check together which is the line eight we would have to get so I got a line a there and if I put one we see that my line is on the top of the next paragraph and we don't want that if we put two it's better but suddenly I understand that my offset is too big I have to get back on my offset so I'm going to put four and maybe yeah it's better so suddenly we see that we get spaced brief between that and that's better and what is the lending leading glues leading glues is the line eight two okay so I'm going to update and put my leading loose there I'm going to save get back and there we go I got something bigger the problem is that later on a real paragraph it will put a lot of eight so the best thing is always to stay on normal or preferably on snug instead of having a a there I'm going to put a with lowercase and get back and here we see that my a is lowercase the basic reflex that you could have is to use capitalize it's too capitalized all your text and that's a problem because it will capitalize not only the first letter here but the first letter of every word of the sentence so if I get here and I put my capitalize class there and I update we see that air of regular and P of paragraph have been capitalized that could be a problem so if you want to capitalize a whole text you can do it otherwise you would have to create some kind of middleware to Middle refer for the string to a function that will take the string and just capitalize the first letter with a span otherwise the other thing is that if you want to lower case what you can do is using lowercase so I'm going to remove all of this because you you will not read very well if I put lowercase what's going to happen is that even if I put a bigger a I will have a lowercase on every sharp character of the sentence and the last one that I like a lot because Normal case it's just a normal case is the uppercase let's say that you want to have all the sentence on uppercase there we go it puts all the sentence on uppercase let's talk about the text overflow now sometimes we want to shorten okay we want to shorten the text we have and we often create functions to do it with a substring basically here we can use truncate so I don't have a very good example there but I'm going to just put a paragraph with a long sentence so this is a long sentence with a lot of words to explain that truncate will truncate my sentence all right I could have put a low Ram ipsum but I think it's better to do what we see is that my text is going to the line automatically there and if I put the class truncate okay class name truncate all right what's gonna happen is that basically on the end of my HTML element it will not go to the line it will not wrap that's what we call wrap what's going to happen there is that truncate it's going to create a white space with Nora which means that we don't want our sentence to break and the overflow will be hidden okay so here it's not very nice but let's say that we would have a div with a style width of 200 pixels and I'm going to put that between between yes as a string and there we go we got here the truncate that works at the end of our div and if I go here and I look at it before the end of my div of 200 pixels it's substring actually it's substring yes my sentence and just cut it to do truncate okay for truncate but ellipses ellipses here happens when you have a big text and a big word and you want your big word to be truncate you can use the class text ellipses for the clip it's different it will not wrap your word your wrong word but it will just cut it just take it on overflow Eden when you add overflow Eden to text clip text overflow help us to deal with words why white space help us to deal with words spaces and if you want to wrap or not your lines basically white space normal makes that it will have a normal behavior no wrap will help us to not wrap our text so here we've got an example we got a long sentence and it doesn't wrap so I'm going to get back there and remove this style here that I got and remove also these things so I'm going to type class name and then I'm going to use white space wrap okay the class that we have sorry white space no wrap so I got my text which is there I'm going to use white space no wrap and I'm going to update and we see that my text doesn't wrap and I can have another flow here to scroll from the left to the right okay it doesn't wrap so it goes out of your screen or your limits depending on what spaces and what limits you define but yeah white space no wrap is used for that also what you get is to use white space pre it's to preserve new lining spaces within an element so sometimes you have spaces or lines that you want to keep you use white space pre and also what you can do you can use white space pre-line which means that you will get every time you get a space a line there you get pre-wrap you get a lot of other options that you can use there yeah basically a white space pre-wrap and no wrap are the most used let's finish by the world break in terrain CSS you can deal with world breaking with those four classes there so let's say that you have a very long word and you don't want to break it you can use break normal it won't break your word so let's try to use this example that we get there so I'm going to remove that and there we go let's put a very long word just there and let's take the word of uh the word used by the Tailwind CSS documentation so we got it here and basically what what's happening is that my word is going to the line and disappear there okay so we if we want that we just let it like this or use break normal but if we want to break the words if they are too big we can use break words so I'm going to add this class there break words and when I update automatically my big words went to the line because I really zoomed but if I move my screen this way and I arrive to the word and here the word have no other escape from the size look it will go to the line directly so to do that you use the break word class okay otherwise if you want to break all the words you can use break all that we got there so I'm going to get back and use break all and break all will just fit to the content so there we see that the the big word that we get stayed on the first line and automatically automatically broke so I go there and look at this and it's going to move line by line because I have to break all class let's start with padding in termin CSS we got classes that help us to deal with padding and those classes starts by P P for padding then we've got a minus and we've got a number exactly with the sizes we saw before the number is representing actually the size you want to select and here we got some example of P minus 0 which represents a padding of zero but before we talk about padding it's better to give a definition padding induces the space inside an element between this element and its border and it's really important to understand the difference between padding and merging padding concern space inside the element while margin concerns space outside the element so if you want to put some space inside an element you are going to use padding and Taiwan CSS provide to us many classes that we can use to create padding but sometimes you want to put padding only on the left only on the right on top or on the bottom with Tailwind CSS we can deal with that because it provides classes for top right bottom or left and here I'm going to zoom a bit here we got example when you want to put a padding top you use pt0 when you want to use padding right you use pr0 PB for bottom PL etc etc so I got my app that is running there and I just got a hello there and what I'm gonna do I'm going to use a new class and I'm going to put a background okay this background will be BG red and I don't think that BG red will work because I will have to put of course the weight of the color and when I update there we go I got my element here that is in red I'm going to put text white and a bit of bolt on the font and when I update there we go I got my text there so if I want to put padding inside this red line there what I just have to do is to type P minus and here let's try with P minus one and what this class is going to do is to add some space everywhere everywhere inside my red box and when I pass my mouse on it and here on the on the selector that we get there we see that we have padding inside the red box so we see that one correspond to four so let's get back in the official documentation and let's go down to P1 and we see here that we've got the description P run correspond to 4 pixel if I get to another number like let's say that P4 for instance and I update look at that now we got more space okay so all of this is a question on what space do you want to put on all your box this way all right so now let's see that so we got 16 pixels right now everywhere and if you pass your mouse there you see that inside my red box I got this orange Square okay yeah actually this orange big border which represent the padding sorry and I have this uh inside this part that is not concerned by the padding which contains yellow let's say that now I just want to have okay padding only on the left what I would do is to put here I've just after the p and B for the minus l l for left it's really easy to understand and when I get back and I update we see that now my padding has been added only only here on the left it would be the same for the right for the right I would put a air P air 4 and here we're not going to see a big difference there but if I put my mouse there we see that we got on the top if you see it on the top right this little square orange that shows that we get 16 pixels of padding now for the top it's the same it's a t okay so I'm going to update and there we go I got four uh actually Four it's the unit but it's 16 pixel I get 6 pixel on the top and B okay B for button and there we go I got also here 16 pixel on the bottom for the margin it's going to work exactly the same we will have just instead n then we will have a t for top B for bottom etc etc now let's say that we want to have just the padding on top and bottom and not on left and right what we're going to use is y a y for the axis y simply so when I'm going to update we see there that I got just the padding on top and padding on the bottom for not vertical but horizontal I'm going to use x and when I update there I got my padding on the left and on the right it's really easy to understand all right it's really really easy and here on the official documentation you get of course all the sizes that are available and those sizes of padding we will see it later in this lesson we will be able to change them of course we will be able to customize them now that we saw the padding we have to see the margin and for the margin it's exactly the same the only difference is that actually it's going to be an m on the top of it on the on the start of it sorry so if I put M4 there what I'm going to have is a space outside and of course outside of my box I'm not into a background red 500 I think I put yes I don't got the color background red 500 so I put actually and here we gonna see it again as you see merging around my box so let's just get down there and let's create a new div and actually what we're gonna do is to put this box there so box okay box with margin all right and I'm going to save this then down there I'm going to just to put to see different box with padding okay and one is going to be blue the box with margin and the padding will be red so I'm going to update and there we go we see the difference the margin it's outside of your box and the padding is there and of course it's exactly the same so if I want to put a margin on top and on bottom only and not on the on the left on the right I put y otherwise I put X so I'm going to update I got X there okay and of course you I just want to have margin on the bottom which happens often with titles I put okay n b or otherwise I could put empty M air M left etc etc let's take a an example right now let's say that instead of having a div we would have an H1 so this is my title okay and down there I will have a paragraph This is my paragraph all right so there I would remove this m I would remove this background because it's useless and exactly the same for the text right just gonna let my font bolt okay so I go down here we see that I got a title and I'm going maybe to put a bit of eight on this title so text to excel what I would like to have is more space okay between those two elements even if the line eight is already enough okay I already have an enough line eight but if I want to put some space what I could use is padding but padding here and let's take that on a padding bottom we would have a four value we will add four in terms of unit there we go the thing is that here I'm putting space inside as green inside my title and we you can do it but it will be better if instead of a padding inside we would put instead a margin bottom of four okay margin it's better because you push from the outside so for whatever reason you would like to have your entire title on the eight like this and yeah there we go but here we see that we we got space outside but it's too much we got too much space so this is another thing with spacing you got to be careful because sometimes you're gonna use some values and you will see that your design is disproportionate which means that all the sizes are not really coherent they there will be no logic if you use two different sizes everywhere for a lot of elements also you can use negative values so here we've got an example and I'm just going to copy paste this example because we got we got it in in here or right so I got those two elements there I got one square which is up there and then I got this other uh div down there and what I can do also is using negative Okay negative values and actually we're gonna change the color because here it's going to be more clear let's say that we get a blue one and down there we got a red one if I want it to be inside of it what I can do is to play on the sizes okay so here I would do minus in top of the the value I want to put either padding or merging and here I'm going to put margin and let's say that I want it to be on the top so on top I want to have a margin negative top and when I get back and I update suddenly my div which is supposed to be just after the first div is entering the first div because I used a negative margin so sometimes you may need to have negative value you can use these minus before the classes that you are going to use to move this element when we talk about spacing of course we talk also about space between elements and with Tailwind we can use also classes related to space between here we've got some uh boxes so I created two boxes with a special eight and a special width and as you see it's exactly exactly like margin and padding telwyn is providing to us sizes on wave and eight so basically when I go down there in sizing we see that when I type w0 it gives a width of w0 pixel when we talk about sizing of course we talk about with an eight and exactly like we saw on padding and margin you can give sizes 8 with two elements when I go on with on the official documentation I see that Tailwind is providing to us several classes that works on exactly the same model as the merging and padding and what I created already is with 16 816 BG red 500 box and I created another one just down there and here we've got two squares those two squares are created by those width and as you see as you see I put width 16 which correspond to 64 pixels and those values are Basics values provided by Tailwind here down there we see that we can have also several values that goes up differently from the number that you are going to path those are called fixed width but what you have also is percentage with and basically those percentage width they work with flex if you want to know more please refer to my video using Flex with Tailwind so what I can do I get those two boxes there and if I type class name and here I'm going to put flex those two box will come next to each other okay and let's say that I want to give them a width and I want to give them a wave that will take alph of the screen and instead of having 16 there what I can say to them please take half of it one slash two and when I update there we go we see that my two divs okay are taking 50 each of the space of the the current uh div on flex but actually I could have different behavior let's take for example this one let's say uh that on five colons I would have here two on Five and down there of course the latest would have what three columns because the difference between two and five here is three so I would have here a lower column than this one so let's say that here is going to be a sidebar and here it's with main content which happens most of the time back into my application when I update there we go I got a sidebar which is very big because it's two of five columns actually what I would need to have is instead let's say one of five colon but what's gonna happen here is that we are missing a column there so don't make the mistake okay here to miss one space because they win will wait for another one here we are supposed to have four on five and now let's see when we move our content as you see on the responsive side we have colons that are adapting themselves so sometimes that can be a problem because in the sidebar you will have content and this content will maybe overflow let's talk now about d8 it's exactly the same so Tailwind is providing to us basic 8 that we can use and most of the time it's really useful so here we already used a height of 16 okay but look we can have other eight that we can use that are proportionally bigger or not of course we have with an 8 but we also have Min width so you can play with Min width you get several classes that can be applied to the content so sometimes you would like to have a mean width of the content so here let's say that we would have a mean with Min content so what I would do there instead of having this I would have mean with me there we go and we see that the sidebar took the size actually of its co-locating div so here if I lower the size size of d8 actually sorry of my main content what is going to happen is that my sidebar is going to stick to the 8th of my content so you use for that mean with Min which says that he wants to irritate from the mean content of its parent element it's exactly the same for Max width the main difference is that on Max width you have several other classes okay that just says that we want to have for instance Max with full so the big content there will take only okay the maximum width of the current browser so let's take an example and let's say that here our main content we want to put a margin there and maybe this margin we're going to give it a big margin okay 72 so I'm going to save and when I update we see that I got a big margin and if I remove my with foot and I just put my Flex there and I save okay let's take an example we have our sidebar and our main content there and let's say that we want to put a Max width and this one is going to be here we've got some example Excel LG MD whatever I'm going to put Excel and here so the name what we're going to see is that my content okay has been reduced to excel otherwise other classes that we can use is Max with mean Max with the current attribute of CSS with Max with Min content Max content feed content otherwise we see down there that we have also classes with actually media queries and on different screens that we can have here we've got our sidebar main content and we've got this big white uh background there and let's say that we would like to have actually the sidebar okay on the on on the full eight actually and the main content the same what we could use is min 8 screen which will refer actually to 100 VH so let's say that we are going to take Min H screen okay and we want to put it just on the sidebar what I can do so I'm going to remove this mean age screen okay we'll say that actually we want to take the full 8 for the sidebar and sometimes you will need to do that but of course what we could do also is to actually just put that on the parent so when I put that on the parent here we don't see any difference because I got a hate on my main content there so I'm going to remove this get back and there we go now all the children of my parents and God mean eight screen are full screen by default and it's also working of course if you want to apply mean 8 with Min content Max content fit content on Min 8 mean exactly with the max value one of the most interesting characteristic of spacing and sizing inside tell when CSS comes now it's about space between elements what you would do if you would like to have space between sidebar and Main content is basically putting margin or the padding it depends on how you would do it actually you are not obliged tearing CSS is providing to us space between classes that help us to create space between elements and it's doing it in a smart way when we go down we get an example here we can use space minus X it reminds you the horizontal spacing that we can do with padding and margin and for as a value so if I do if I do that on my actual app I should write up there next to flex space minus X and let's put four and let's see what is going to happen to our children's sidebar and Main content actually we got space that has been created and it has been created in a smart way which means that it's going to be equally uh put between the two sides all right and that's the beauty of it with flex you use space between so we've got other example just try to use space Y8 here as an example so now we worked horizontally we want to work vertically so if I put space y 4 we have only this one that is apply and why do we have only this one which is apply it's because main content is supposed to be the second element so if I put a flex color there and I want my two element being on top of each other we've got a different Behavior but we see that space has been put in here so you will ask to me what is the difference between margin and or padding and this space actually it's margin here and what is the difference visually there is no difference however you don't want to have margin but a margin top everywhere all the time especially between elements like these columns and Main content Etc so with flex you are using space between to create spaces between elements about the customization it's really easy to understand on my next GS application I got several titles and those titles have different margin class there on the bottom and it's going to order of matters for three two one there and I see that my mp4 is at one REM and let's say that I would like to actually lower this size and what I can do is to go on my tailwind.config.js and in X10 I can create a margin entrance so here I'm going to remove this font size I'm going to put the margin and let's say that now what I want to have is that mb4 okay mb4 would be actually 20 pixels so I'm going to save get back and when I update we see that we clearly see that the size of my margin changed and here we've got 20 pixels instead of one REM you would do exactly the same for every size and you see that it's also working for arbitrary values that we can put between brackets so here on every of my size I would lower the value every time so here it's going to be 18 pixels for actually free okay then for 2 it would be 16 and for one it would be by D4 14. so when I get back there and I update after the update we can check that every size of the margin there will be applied from my Tailwind configuration and you can also do it for all the extended sizing classes of course retailing CSS we can deal with flex Flex is a CSS property that helps us to put elements next to each other or to pick the order of the element that we want to show we can also work with columns rows etc etc to display the elements in the order that we want so basically on terwin CSS and here I get my app running what I'm going to do is I'm going to use the classes to trigger a specific order on my div so I got a parental div up there and what I want to do I want to create a first div that will be actually my main content all right and what I want to have also is a div that is going to be my sidebar so I got those two divs inside a parent okay and let's say that this one we are going to call it parent okay and those two one are children all right so when I get back to my app I got those two div on top of each other they are like a colon okay they are not in a row they are like a color and what I would like to have is basically to have this sidebar next to the main content because I want to have my sidebar on the side so what I can do is to use the property Flex with the property Flex provided by Tailwind CSS I'm adding to the parents a display Flex on the CSS so when I get back we see now that my main content and my sidebar are now on the same row and if I open my console and I look at these elements all right I got Flex there and what I got is this purple um rectangle all along there that shows that on the same rule you're align every element on the width that is automatically assigned or on the width that you picked up previously and if I look there on the um on the cssr so I'm going to move again uh we have there the display Flex that has been applied now I want to add a header I get back and what I'm gonna do on the top I'm going to create a new class a new div sorry with inside Adder and when I get back the thing is that now I got a new div and in this new div here I'm on my parents and what a parent did a parent has a display Flex so it put every div that he has inside of him and he put them inside the same Rule and this is not what we want actually what we want is to have the header on the first row then the main content and the sidebar on the second rule because we want our header to be on the top of these two elements main content and sidebar so what I can do is to remove my Flex there but instead what I'm going to have is a sidebar on the bottom almost like a footer and that's not what I want what I can do is to wrap those two elements into another div okay I can wrap my main content and my sidebar in a flex there any Flex element and I got exactly what I want suddenly I got my main content and my sidebar on a row and I got my header on another row so this is how you can organize your application with flex property and there's a lot of other elements we will see that we can use if I go on Flex Direction I see that I got several ways of displaying my Flex divs so here I got a first way which is flex Rule and it applies a flex Direction row to my element so there I already got my two elements next to each other okay and if I had my Flex rule in here Flex rule nothing will change because main content inside bar with flex I are already on the same row all right but if I look there I get also a flex call and flex curl actually this is like if I didn't have any flex and what's gonna happen it's it's going to create a colon there so instead of having this I can let flex and here I can let for instance a flex row yes there we go let's say that inside my sidebar okay I would have another div which is a sidebar and down there I would have a menu all right what I have in this complex in this complex element a sidebar and a menu basically on Flex color without Flex so my parent there doesn't get any Flex I got naturally a flex call but sometimes you would need to specify that you want to have a flex call so basically what you're going to do is exactly the same you're going to type first flex then you're gonna add Flex call because you want okay not on your sidebar everything would be a colon all right so there we go we've got it let's get back to flex Direction and we see that we can invert we can reverse the uh the direction and this is why we are in Flex Direction so I'm going to copy paste Flex rule reverse and I'm going to go there on the parent actually not the parent there but the children that is parent of main content and this sidebar so I'm going to add here next to this Flex row reverse and let's look what is going to happen when I get back what I have is my two elements that have been reversed main content is supposed to be the first div and finally it's a sidebar and menu that appear as first it's because I've used Flex row reverse okay and now let's see if we remove the flex row that we put before and the flex that is here and I save and I get back what happened is that nothing happens anymore nothing happens anymore I got my Flex rule reverse but on my CSS down there we can see that I got here a problem and this problem says that we have to put another property to say what display do you want to use so let's just try there it talks about display block and if I put display block nothing happens nothing happens because Flex Direction actually needs to get Flex as a property so what you got to do is always to specify Flex before you use a flex class after let's remove this reverse properties that we've got for now and let's get back on our main element so here I get to remove also my Flex and there we go this is supposed to be my application with a main content and a sidebar menu but what I want to have is basically I won't have space I want to have a big main content and to do that what I can do is to use flex grow flexgro help us to make a a div where we had the property Flex at a certain size and if we look at the example down there we've got group that we can use on the colon we want to grow and we've got also we see Flex none on other columns so I need to add grow not to my parent but to my main content because this is my main content that I want to be grow so I'm going to get back and there we go we see that my main content take all the space and next my content where I added Flex known take the size he had to take let's talk now about Flex basis so we can deal with column size this way so what I'm going to do I'm going to get back to my uh main content that I'm going to add a class name and I'm going to add basis and here I want to have three of four of the size of the screen and down there my class name of course I want to have of course one on four so I'm going to save get back update and now there we go we see that main content is going to take three of four of the row size and one on four for the sidebar and if I go down it's exactly the same it is working the same way but at the moment do content of the sidebar will stick to the size that we applied with flex bases so there's a lot of example you can also use the basis with a certain size already determined by Tailwind it's really useful and of course you can work also on the hover and focus with that so basically we would need that to apply some sizes to some elements and if I would have another sidebar so let's say that we're gonna go there and put another sidebar what I would do here is that actually it would not work okay it will not work exactly the way we want to work what we would do instead is to put two on Fourth okay so if I put two on four I got here one colon here main content will take two on four and this one one on four and it can go up to 12 so if we put 12 to every value there I would say that here I would have a 2 and here I would have for instance A6 and 6 plus 2 it's 8 it misses four so I can put four at there when I get back and I update there we go we have a size of four applied here a size of six applying here and the size of two applied here on 12. so bases help us basically to deal with the original size of every div on a row and actually I want to invert I want to put first my side mount then my main content then I'm going to add to my sidebar a width so I'm going to add the width let's say 32 okay and what I want to have there I want to have a width full of my main content so I'm going to get back there updating and there we go I got my sidebar and my main content and what I want to do actually is that when I'm going to just go down like this I want my main content to come under my sidebar there all right so to be more clear I'm going to add some color I'm going to add a BG red 600 to my main content okay so when I update there we go I get the red part and then I'm going to add a BG Sky of 500 to my sidebar all right there we go so we've got these two elements there and what I want to do I want to change the flex properties when I arrive on a certain size so how could I do this how could I do this let's get back to the documentation and let's get back to the flex zero Direction so when I get back on there here we see that what I can do is to add for instance let's add these Flex Flex column and on MD Flex rule I go there and on my parent I had Flex Flex call what's happening is that I'm on a roll but if I go down suddenly I have a mobile Behavior okay I got a mobile behavior and my sidebar doesn't take the whole Space so I can do actually exactly the same I can put my medium on the size of the sidebar so basically here what we've got is that Myspace is automatically fulfilled okay so this is how we can work actually with flex Direction depending on the screen size that you have so on a mobile you would have a different behavior and Tailwind is very useful for that okay terwin is very easy to deal with for instance you have got also the flex wrap properties that helps you to basically wrap or not your content let's take this example there so I'm going to copy paste this and get back I'm going to go directly on this row so basically I'm going to remove what I did okay I'm going to put this there we go and I'm going to put class name so I got my elements there okay one two three and let's say that I want them all of them to be so basically we work with what we've learned with full or grow and what's going to happen is that it's not taking all the size because I have to specify a wasteful and there we go so I got my elements there so I got my three columns there and we see that they don't wrap wrap it means that you want the element to go automatically on a new row at the line actually and if I had several other elements okay so four or five there we go we see that we stay on a rule we stay on the same rule on the opposite what we can use is wrap so we used flex no wrap until now now I'm going to use flex wrap and what is going to happen is that every every column is on wistful so they all go to the line because they take all the space but instead of having a wistful let's say that they have a property of 32 okay and with 32 we see that automatically we go to the line because we added a flex wrap property so with wrap you can go directly to the line and of course exactly like Flex column you get Flex wrap reverse if you want to invert and you can of course use them with the media queries properties let's talk about now the justify content property sometimes you have elements like this and you want to justify them in a specific place and very often you want to justify them in the center as we see there what we can do is to use justify Center so there I came back I have my sidebar and my main content with no property okay so let's say that up there on the flex parent I want to specify that they justify on the center I want to have my sidebar and my main content div on the center okay I don't want to have them on the left I don't want to have them on the right I want to have them on the center so I'm going to save I'm going to update and there we go we see that I got my content now on the center actually this is not really what I want to have what I want to have actually is to have a justify start start it means on the beginning of the row so on the left start is for the left so basically I have the initial state so I can remove basically this justify all right but let's say that now I want to justify on the right so now I need to specify I need to specify that I want to justify and this one is going to be end and is for the right and when I save okay and I update suddenly my content is on the right so you use justify content all right you use justify content to specify where you want this element to be but there is another one which is interesting it's Justified between so space between with space between and justify between actually you can say that you want that there is equal space between elements and so if I type justify between here and I save okay we see that my sidebar okay is on the left and my main content is on the right why because those two columns they got actually they got actually the same size I mean they are automatically on the content size and we want they created space between it okay justify between created space between those two elements and sometimes it's very useful we want to create an equal space between elements if I had a new colon let's say another sidebar okay another sidebar what is going to happen is that there will be equal space between those three elements so when I get back there we go finally you get Space evenly and let's look at the definition of space evenly use justify evenly to justify item along the container's main axis such that there is an equal space amount around each item evenly and there we go there is an equal space created between all these elements for flexbox we use also align items we saw that on a row we want to deal with the space between elements and how to order them but actually now on the vertical how we do actually on the vertical we use align items so here I got align items and here I got a justify evenly so let's say that on my main content I will add an H1 so main content and P here I'm going to add some lorem ipsum so I'm going to type lorem ipsum there we go so I get some text there and there we go we see that actually what's happening is that all the content is aligned on the top so when there is text on the sidebar it starts on the top okay and Main content starts on the top and another sidebar starts on the top and here it's wrapping so here what I could do with flex property is to actually okay use item start and we got the same example there one two three everything is aligned on the top so I use item start to align on the top but here it makes no sense because it's already by default I lean on the top let's say that now we want to align everything on the center so if I put items Center instead of start and suddenly we see that sidebar is on the center and another sidebar on the on the right is also on the center everything is aligned on the center and it is based on the size of the highest content Division and the highest content division there it's actually this one we see that we have 96 pixels of 8 and the sidebar is 24 so it calculates actually how to align in the center those two elements and it's the same for the other one there on the right for the sidebar we are 48 it calculates automatically to align on the center of course you understand now that to align on the end we can put e times n and when I update so now on the bottom we've got everything aligned with item end another example may be a bit more tricky we can copy paste this it's the Baseline so the Baseline it's based based on the line that starts inside your div so I'm going to copy paste this I'm going to get back and for now we've got this example what I'm going to do is to just remove all of this and put the official example and instead of class I'm going to add class name and there we go okay so when I update there we see that I get some elements and to put more um space I'm going to add a BG Sky 500 to the first one then I'm going to add a BG red 500 to this one and I'm going to add a BG green 500 to the third one so I got some padding that is applied and I got e-time Baseline there put as a class on my div so when I get back and I update we see that what's happening with item Baseline is that we align everything on actually basically do content and the Baseline of the content it's one two three but our divs they have padding so they have a different hate or different they can have also a different width but here they have a different eight we see that even they have a different eight and they don't start on the first line here on the top or on the center or on the bottom What's Happening Here with item Baseline we based all our div on the Baseline tailoring CSS is providing to us grids and with grades we can create columns exactly like Flex but in another way actually when designers are developing the templates most of the time they are using grids to separate elements from each other on flexbox we have the possibility to put elements next to each other however grids help us to create Dynamic leader columns we need so down there we've got an example okay of grids that we can create let's say that we have a list of element and we want to display them next to each other this way what we can use is grid so back in my application there I'm going to create actually a grid there and what I'm gonna do I'm going to remove this title and there we go so down there I'm going to type grid okay and then I'm going to type grid calls and there I need to put a number and basically uh on those grids you get maximum 12 columns okay so what we want to have we want to have a maximum four columns there so I'm going to Type 4 and there we go so now what I can do is directly to say Okay I want to have for instance a First Column with an element all right so first element then I want to have this colon actually I want it to be um let's give it a background okay so I'm going to say that I want to have BG Sky 500 all right and I want to have some padding so I'm going to put PX um well actually we don't need to put a padding there we go yeah let's let's put the padding okay we're gonna put padding six okay and we want to be a little bit rounded okay so I'm going to put yes rounded LG there we go and let's say that now I want to have a second element which will be and actually it's not element it's supposed to be columns okay columns there we go and now if I get back to my app there what I have is those two colon next to each other all right but we said before there with grid codes that we want to have a four uh actually Four columns and right now we only have two so let's put a third column okay so third column so I put an S but I should remove it actually there we go and Forest colon there we go now we've got our four columns there and exactly like we see in the template there we've got the four column at the same level and what is cool um with um this grid is that as you see here I got several size that I can put up to 12 okay and if I want to have space between the colon what I can do is to add a class called Gap so here I can type Gap and if I put one you will see that a little space will be between the element so let's imagine that we would like to create a blog with articles next next to each other would be amazing to deal with these with the colors okay so let's put a gap four instead and there we go so we've got four columns there all right we've got four columns and actually let's try to put a fifth column so instead of having this I'm going to just put one okay then I'm going to put two I'm going to put three then I'm going to put four and then I'm going to put five and let's say that we're gonna have a six also what is going to happen well this is what is magical with grids is that as you see it's wrapping automatically on the line so we go on the line and we continue to create as much columns as we want but actually we stay on this base of four now let's try to put a base of three if I go on the base of three and I update now I got three columns all right I got now three columns and if I put for instance 2 what I'm gonna have is two columns okay so you understood now that we can deal with columns this way with the number we want and actually there are plenty of options one two three four five six and there we go this is how it works of course now I'm on a desktop but if I lower the size what's gonna happen well actually my grids are going to stay the same so what I want to do is to say that on a certain size I want to have four so I put LG onto on on the beginning of my class well what I can do also is to say hey when I'm on a tab I want to pass to the grid calls 2. I want them to be on two on the size two so now what I'm gonna do actually is to reduce the size and what's gonna happen is that suddenly we see that my element are taking the place I want to so basically it's going to take two columns and there we go it's working and if I go lower we even see that actually now because I didn't provide any class so I'm supposed to have this yeah before LG there we go I didn't provide any class okay for the calls so it's going on the top of each other okay so that's really cool um great with columns I'm using them all the time um it's very very useful to create templates with that however sometimes we need to deal with actually the size of our columns and of course Tailwind thought about this problem with grids by using the call span okay class so as you see here we can deal with the size of our colon inside the grid and we've got a lot of elements we can deal with so what I'm proposing you to do is actually okay actually to get back on our model there and let's put instead of four we're gonna put three and there we go and let's say that what we want to have actually is to have a bigger colon okay for one element so let's say that we want this four to take the two sides of the the on third actually to take the first two columns what we can do is to use call span 2 for instance here and because here we see that we have three columns we are saying two uh the the this column to take actually two sizes so it's the number four and what I'm gonna do is to go on the number four and I'm going to add my class there so I'm going to type call span okay and here I'm going to put two I'm gonna say that I want the this fourth column to take the two columns so I'm going to update and look at that and there we go uh first colon and we can change the color to see it clearly I'm going to do BG red 500 okay I need to update as we see now we've got this element that is taking two columns and if I put a call span free and I update my colon is suddenly taking the three colors okay it's like a row suddenly because I took the maximum which is specified up there I want to use grid cores free what's happening if I'm putting a 4 for instance so I'm going to update well actually if you put four it's not gonna work because the maximum that you can have is the parent class definition that we have here and let's take for instance a 12 and we will see that it will be actually the same problem it's creating something that we don't want to happen okay it's dirty actually what we want to do if we want to have 12 it it's to put 12 on the parent so when I get back and I update there we go we see that this colon is actually taking 12 colons there and that's what we supposed to do because we wrote the code in in this way but on the first row now we see that there's only three columns actually on the 12 we could have had so it's not necessarily a very good example and a very well designed but there we go that's what you can do with the grid calls and we if we update that we will have empty spaces sometimes in your Design This is what you want to happen this is how it can work and of course if we go down what we can see is that we can move some elements to say you have to start there or you have to start there it's working with core start and call end so what I'm proposing you to to do is to take this example okay exactly the example that we had there and I'm going to get back I'm going to remove this okay so there I'm going to put my example and instead of having this I'm going to put again my BG Sky 500 and instead of class I'm going to have class name all right if I get back to my example so I'm going to add a bit of more space like I did before so I'm going to have a padding six there we go and what I want to add also is a rounded LG so I'm going to put rounded LG to add some a bit of design there we go so we see that we have a First Column zero one and we will need to take four space four space on six so basically it's supposed to start actually at one here it's supposed to be the First Column but we specify with cold start that we want it to start on the second column and the second column is supposed to start here because we're supposed to have six colors before okay so if I put call start free what's gonna happen is that my element is going to start on the third column all right and if we go further what we could say is to say well actually here my second column there I wanted to start on one okay but I will need to stop on free and as we see it's taking actually do it first took colon It's stopping on free if I put a 4 call n four what's gonna happen is that now my colon is going to end on four so if you want to deal with design actually what you can do is to use call start and call hand depending on the size of the colon you already Define before talking about the size of the colon sometimes we want the size to be automatically display on its content and sometimes we don't want necessary to have a specific size of the grid in short we don't want to use this system of 12 colon what you can do is to use actually Auto call Max all right so basically here I got an example I got my grid and I got a grid flow call that we are going to see just after and what's happening there is that I didn't specify any size in my columns but I specify that I want them to deal with the content they have okay so basically grid calls Max gives a result like this we still have the grid system however it's depending on the size of its content okay it's exactly like Flex actually but it helps you to deal with the automatical size okay so this is how you would deal with that and you can if you want customize these grid Auto colons exactly inside your Tailwind config.js okay so grid Auto colon helps you to deal with the size automatically of the content of the colon we've talked about the columns with grid now let's talk about the rows because yes we have grid codes one two three four five until 12 but we also have grid rows of course you understood that now grid rows is used to display in columns are element so it's working exactly the same as columns however it goes to maximum six okay so we got grid row 6 as a maximum value and here we get an example all our rows all right are displayed like this one two three four five six seven eight and to do that we use actually okay we use grid rows so here I got a list of divs that I want to display too and what I'm gonna do is to add green grid flow code grid rows for and GAP four all those elements are supposed to be display in a grid so from the left to the right but actually now with grid rows it's going to be displayed from the top to the bottom so I'm gonna get back and I'm going to update and suddenly one two three four five six are displayed vertically all right so what where is actually the size of the elements we are dealing with grid rows four here okay we get the example there grid Rows 4 is dealing with the number of elements in the colon so when you reach number four it switched to the other column so what I can do is actually adding several other elements nine ten eleven and let's say 12 and let's see what is going to happen what is going to happen is that it's going to continue okay to create columns and it's going to stay on the basis of four elements if I put here for instance grid row 6 went too fast grid row 6 there we go what's gonna happen is that it's going to switch at the number six and then it's going to pass to another element if you want to use rows with Grid it's totally possible the difference is that it's going to switch on the number of elements on your colon and it's going to switch to the next column you understood now that we can also work with stop and n as we did with colon we can actually say that the first element is going to take some space so let's get back there and let's put 4 again so we get there we go we'll get our column this way let's say let's say that we want to have the first element uh taking a specific space so actually we're gonna take two space okay so I will need to take two rows so I'm going to go there and on the first element I'm going to put row span 2. all right and what's gonna happen now it's that there we go my first element took two rows and if I put Rose pen three it's going to take three rows okay and let's go on The Fifth Element and let's add also rows pattern free let's look at it there we go we see that five took free space however it's creating empty space there it's totally normal the number five cannot fit into three rows because we are limited to four and if we put the number five there it would make actually one two and three rows so five rows it's not working anymore so actually we were supposed to put here instead of uh three rows rows band two and there we go it's fitting our content it's also exactly the same with raw raw end and if I wanted to make complicated stuff such as different rows on different lines etc for design purpose I could do it here is maybe the most interesting part about Grid it's the autoflow and it's exactly the same for columns we can say actually to our grid to place elements automatically and not to deal with those space that we got so down there we've got an example actually and here we've got our setup already done there is no grid plus placed yet and what we would like to do is that our element okay will deal automatically with the size so they will be placed at the right place four we don't get any um any kind of space empty space in our grid alright so what we can do we can use grid so first let's put grid and then we can use grid flow row dance okay so I'm going to type grid flow row Dance all right and just this let's look if it's some things gonna change nothing is changing in my template all right so what I want to do now is to add three columns and actually grid rows free all right this is the basis we want we want to give so we give three columns so it suppose to switch on three columns then maximum free rows okay let's look at the results and there we go so we're going to add some Gap we do type Gap four all right let's add call span 2 to My First Column and when I get back it's taking the two places all right but now if I put correspond to on this one I'm gonna have an empty space as I showed you before not in this case because I put grid flow row dance so I'm going to type call span 2 I'm going to say and what's gonna happen and which is magical it's that now we are dealing with empty space and here we've got the column one and column two that get the same size that came on the top and Tailwind fulfill the space that we got there three four seven etc etc now I want to test something else I want to say that for instance the current 6 called span two would have also a space of two what's gonna happen is that the number five stays at this place and the number six took all the space so it's also working on the right side okay it's also working on the right side let's put now for instance the number 10 on call span 2. all right I'm gonna say and there we go so it's really cool because it's fulfilling automatically okay my empty space so grid is very very useful and actually you will use grid all the time when you start to code with Tailwind however you have to understand what are colons what are rows how to display the sizes but also what you need to deal with is the autoflow of your element and then we've got a good example on how we can fulfill empty spaces because this is what you're gonna have most of the time as a problem on flex and Grid it's empty spaces you can deal with that with autoflow layouts with Tailwind are very easy to handle with and the first thing we got to learn about layout is container you may have seen me using container a lot in the previous lesson but we never really focused on it so let's go so on the official documentation we can see that first we can use a class that is called container all right and we see that there are break points and through those breakpoints we we are adding properties to our container that change its current size all right so right now I don't get any container I just got a parental div and what I'm going to do I'm just going to create a container and inside I'm going to put an H1 which will be actually hello yeah there we go once it's done what we can do is to add a background red 500 because we want to see where our container is and what size does it take so when I get back to my app and I update there we go we see that we have this red rectangle which is actually the proportions of our container so if I open my inspector and I pass my mouth on it we see that the size is 7 768 and the thing is that right now I am zoomed so if I zoom out there we go and I pass my mouth it's a 1536 and if I go there to find my proportion my property we see that 536 it's the value of the two Excel size all right and we see that here on the size is it's decreasing so we pass to 100 1280 pixels 124 768 640 pixels etc etc and we see that those breakpoints are related to the basic breakpoints of Tailwind all right so if I zoom out and I go there and what I'm gonna do is looking at the size of this element I'm going to just um lower the size of my screen all right so I'm going to do this quickly little by little and we will see that suddenly my red rectangle is losing its width okay and what's happening there it's really easy to understand is that with the media queries we are switching actually sizes okay and actually right now we are on 668 pixel down there exactly what was written there on the medium size exactly here okay so container is helping us to deal actually with the size of actually our element when we want to put contact however the thing is that right now it's not centered and we would like to be centered and if we go to the documentation we see that we can center with MX Auto so what I'm gonna do I'm going to add MX Auto and suddenly is going to be on the center there we go and if I lower the size again it's going to work again and we suddenly understand that this container lets space on the size okay on the side sorry here you see on the side I got space and if I lower it again and again I need to reach I think 640 pixels there we go two don't have any padding anymore or margin and the thing is that with um with containers it's adapting itself automatically to the size of the desktop and this is what we want to do however you will see that often when you will use container you will be obliged to add a mix Auto if you don't want to do this we can go directly inside our terrain.config.js so first I'm going to remove it okay I'm going to remove this mx02 there we go and we see that here on container Center true I can automatically Center my container okay so now I'm gonna go on terwin.config.js and here on my team what I can do is put container Center through so it's supposed to Center my container automatically and we see now that it is working a last thing with container is that as you see here I'm going to have content that that will stick actually that will stick to my border and I often don't want to do that the best thing to do for me is to always add some padding a little bit of padding okay and there we go we see that we got space that is put inside the container it's always better because on the mobile after you will have some space that you don't want so it's just a tips that I give you now always deal and always remember with the padding inside the container if you don't want your content to be appearing um to the to the Border actually with tailoring layouts we can deal with columns for instance we want to create several colons with different elements we can simply use the class columns minus one two three four five until 12. or we can deal also with sizes of the colon so there are already sizes that are done and this is the result so let's say that here I'm gonna have a first paragraph with one row M ipsu then I will have another one actually there we go and then I will have another one again okay so I got these three paragraph and when I get back there we go I'm there so I'm going to remove this BG red 500 that is useless for now there we go and if I use for instance colon 3 because I got three elements let's try it in there columns three I'm going to save I'm going to update there we go suddenly my content is on three columns but what happened if I put a fourth colon all right and I save well actually and we don't see it we don't see where it is actually it doesn't change anything because all your content is going to be fulfilled on three different colon okay so if I just copy this okay and I had it there it's going to continue and all the content will be displayed on three columns okay let's say that now I want to have two columns and suddenly I will have two columns let's say that I want to have 12 columns it will be weird there we go we've got our content on 12 columns okay so this is how it works however if you want to have for instance a specific size let's say that we want to have a small colon of five colons LG let's take it we need to get back there I'm going to use Colon's LG what's going to happen is that the size of the colon that will be display will be automatically LG so 500 or something and what we like is that it's automatically responsive so this is how you would use colon but let's try now with an image so I'm going to copy this image there and let's say that I'm going to add an image and it's going to be this one and when I'm going to save there we go then you see that the image is taking the whole size and the text is on the right all right which is cool is that and we get the example there depending on the elements that you got and depending on the size okay it's going to adapt itself automatically and that's something that we want when we are dealing with canons let's talk now about the display we often use the display with terrain CSS Okay so we've got basically do a basic display that we can have in CSS so for Block we have display block for inline block we have inline block etc etc and we also have Flex we already saw Flex in this course so previously you can check out the flex listen it's just putting display Flex inline Flex table table caption etc etc and if you want to also deal with the display on the table table cell Etc it's happening in there and which is cool which you would use often I think personally um you would need often to hide some element so let's say that we have our image there okay so I'm going to type class name hidden suddenly okay my element has been hidden okay and if I want to block it again there we go it appears there all right so what you can use also is inline block you would all often use inline or inline block okay and there you get some example or you would have for instance block as an element that you could use okay the floats we got very good example there we can see that we can make float an image on the left on the right or float known to have it on the top let's get back to our example I removed our colon and we got this big image and it's just crazy for us okay give a width to this image so it's going to be with 64. I think it's going to be yes there we go if I want to have my image to float on the left okay what I can simply type is float left all right so now it's Suddenly It's going to stick to the text and Float right there we go we're gonna have the image on the right okay good and we have another one which is float known and it happens often that you don't want to have this dirt text next to your image so you will type float known and actually it's exactly the same as as if there is no float clear is here to control the wrapping of content around an element so let's just copy paste this image there and let's give it a new size let's say uh let's say 42 32 sorry so I'm going to update and suddenly I get to image there okay so what I'm going to do is that I'm going to put a float left okay to this image and a float right to this one all right what's gonna happen now is that we got the image okay on the left and on the right and if I put a clear left to my text so let's first try here class name there we go clear left and I'm saving what's happening is that my text is going to be set on the size of the image on the left all right but if I put clear right and I update it's going to be set under the image of the right side okay so here we understand that we are setting the text line or the content line actually to the image on the right or on the left and if I use clear both okay what's going to happen is that it's going to be set on the line of the highest element all right you've got several other options Canon of course and Canon it's exactly like if you didn't do anything okay so I update and there we go position is a real subject when you want to learn CSS and with taiwin it's really easy to handle alright so we see that here we've got an absolute class which gives us position absolute and we get a relative which give us a position relative all right so let's say that at first we would have a parrot so inside our container I'm going to create a parent with a relative position it will be BG red 500 we're gonna give a bit of rounded and a bit of sizing and it's going to be pixel 8. and there we go so what's gonna happen in there I'm going to add some eight and I'm going to add some weight eight and wait there we go and when I go back I suddenly have this Square red all right and let's say that inside I would have almost the same okay let's say I would have a div with a width maybe more little yes h24 and then dot BG uh green 500 rounded LG I say when I get back I got this green square inside the red one okay and what I can do actually we see we get some example I can give actually the relative position to my parent which will say that every element under will be relative to this one and suddenly if I put absolute as a class to my div here and I get back and I update nothing will change however however what I can do now with this absolute position is to work on the top right left or bottom okay and which is cool there is that I get plenty of classes that help me to deal actually with top bottom etc etc and exactly like padding and merging I can work on the position that I want so I want this green square to be on the top instead of bottom what I can do now is next to Absolute to put top zero so if I save that and I get back okay and I update suddenly my square is on the top zero all right and if I want to put on the left 0 I can also do it so when I say there we go it's moving on the left because I said to him that each parent is this one the relative one and the children has an absolute property and the top zero NLF zero which means that he has to relate to the top zero and the left zero of the relative all right so let's say that I want now that um for instance I want now to be outside of the square okay I want this green one to be outside can I do this let's say that I want to do minus top 2. what's gonna happen there I'm going to update and we see that my square is going we don't see it exactly but we see that my Square is not rounded there which means that I'm outside of the red square and let's say that I want to do the same I can do minus for a negative value left two okay so I have to remove this left zero that I have there all right and when I update there we go we see that my element came out so with the property top right bottom left and there are plenty of element that you can do so let's say that we can use this inset property so we get we saw top bottom left okay it's working easy it's really easy to understand let's try this inset so I'm going to remove my negative property so I'm going to type inset 2. when I get back and I update we see that it's like a padding it automatically went on a special position because of insight let's look at the fixed property inside our application so here we get a very good example we got a parent that is relative okay with the fixed property as a children and we see down there that we can actually scroll inside okay inside our box and contact stay fixed it stay fixed on the bottom so most of the time this is the position that you will use if you want to have a sticky or a fixed element now let's talk about the Overflow we can deal with overflow with several classes Auto Eden scroll when you want to scroll inside an element and if you want to show or not an element you can deal with that so let's look at the example there we've got an overflow visible and we've got an image inside a box that have a certain size so this box there have a certain size okay and actually the image as you see is going out of the box with overflow visible the image is authorized to go out of the box however with overflow Eden we want that the Box will be the actual limits okay we want the box to be the limit of the content and we don't want to have content that goes outside so we will use overflow Eden to hide the content from outside and we can go further and what we can do is to say we want to have an overflow Auto so for the example now I've created a lot of text really really big and as you see by Nature the browser allows you to be on overflow Auto so when you want to scroll into a div what you need to put is this overflow Auto and if you are not able just add the property okay we've got another example which is cool here is that sometimes you want to scroll from the left to the right you can use overflow X Auto to do it and vertically you can use also overflow y Auto to do it for the visibility it's almost the same as display known or not however the thing is that here what's happening is that it's invisible so let's just guys let's just copy paste this example so I'm gonna go back there and what I'm gonna do I'm going to remove all of this I'm going to create a new container there we go and I'm going to add this so I'm going to add class name there we go and I want to add some color there so I'm going to add a class name bgt 500 and I'm going to copy paste this one and there we go so we see that our second element as an invisible class which is number two and when I get back and I update there we go so we got one we got three so finally I'm going to get back to to this age screen because I think it's better for our example there we go we see that one is visible two is invisible and three is visible so let's look at the CSS and the thing is that right now invisible okay as a visibility Eden so I'm going to move there and just yet here just down there you see that it's visibility Eden all right so you can use visibility this way when you want to show or hide content the difference with display hidden or not is that it's also appearing in your HTML but now it's invisible or not finally let's talk about the Z index with Z index you can put several elements on top of each other so let's get back again on this example so here I'm going to remove this all right and instead of the classes here I'm going to put class name there we go and I'm going to add a BG red 500 there we go we see here that we've got actually z40 z30 z20 Z10 okay and what's going to happen is that they are going to be on the top of each other depending on their size so here it's not really happening what we should do is to say that we want to have a flex there so it's supposed to be there we go and let's gonna add some sizes to these runs because it's a bit tricky rounded LG border border yes there we go border white okay and we're supposed to have something that looks a bit the same okay no it's not rounded LG is rounded full there we go round it full there we go Jack position we use it to control the position on an element within its container okay so here what we see is that we have an image with a special size so let's try to do exactly the same so I got my image there which is really big right now and what I want to do I want to reduce its size so I'm going to add exactly what they did so maybe it's a bit too much I'm going to put 62. there we go 62 no 62 doesn't exist sorry 64. there we go 64. all right so now what I'm going to do is that I got my square and I got this object non-property so if I add this object on property let's see what's going to happen actually here there we go we see that the image has been centered inside my Square and from this moment what I can do is and we pass the mouse here we see that the position of our image actually what we have basically it's object Center here right now we get object Center inside the div and when I just look at it we see that I got my Square let's say that now I want it to be on the top what I can do is just using object top so I'm going to get back there I'm going to put object top and when I update suddenly it's moving okay it's moving we are on the top of our image we don't see it clearly there but let's say that I want to have an object left I can deal with the position of the image inside my box and that's something really useful sometimes when you want to deal with the position of your image you can use all those classes let's say that now I want to have an object right button I can deal with that so I'm going to put object right button and I'm going to save get back update and suddenly there we go I finish there okay so object position is really really useful when you want to deal with the position of your image inside your element inside your Square Edition layout there are several elements that I didn't present it to you because I think they are useful but you can really understand yourself by reading the documentation you get break after that helps you to break after an element break before to break before break inside you get also the Box decoration break okay so here you see that you can create some decoration and you want this decoration to break or not you got box sizing to be honest I don't use it that much but you can deal with actually how the browser should calculate an element total size all right and what you have also it's the over scroll Behavior we talked about it a bit with our overflow Eden it's all you want to deal with the over scroll here I get a header and what I'm gonna do I'm just going to add the class border and what's gonna happen now it's that around my header I will have a border of one pixel all around my header okay if I want to deal with the width of this border I can add a size and of course like always with here in CSS we can add a number to specify the size okay so here I'm going just to add two and when I get back and I update we see that my border is thicker and I can go up to uh 8 or 12 I don't remember but if you go on the official documentation you will see that we can have really thick border okay what we can do also is to add border on the left or border on the right okay so there what we have is that we can pass actually top right bottom left directly to our border class so let's try now to just put a border bottom element and what's gonna happen there is that we have the regular header that we would like to have so basically here we have actually the border on the bottom and if I had some padding on the top and bottom let's say four okay py4 suddenly there we go we've got our Adder so I'm going to unzoom a little bit because I was zooming there and there we go we see that border and our border down is like this let's say that now I want to add actually a border um on the left and I want it to be a border on the left I want it to be thicker as eight I'm going to say here what we see that suddenly we've got actually a thicker border on the left that has been pushed and let's say that on the top we would like to have a border top of four what's gonna happen is that on top I'm gonna have a border top of four the same for the right you understood actually we could add borders like this very very easily so down there we've got a parent division with three elements there and when I update we see that with the Divide y class and divide color so let's put a red instead and not a 200 but 500 we can see that between my elements I have now a division okay and this is really cool because if I add one you will see I will not be obliged to deal with both the top but the bottom between elements I can use divide like this I have now a basic input type text and what I want to do I want to basically add a specific border to it and I want it to be colored so if I go on Border color as I see there I have an example I can specify the color of my border specifically by passing the color after border so here I got my border 2 and Border rows 600 on my input and when I get back there we go there we see that so I'm going to put the outline non class to not see the outline blue that we see there we go now we see that my border is actually okay my border is actually uh Rose okay so I passed the class it's really easy to see so here you got all the colors of course provided by 10 win to pass your color for the Border style it's exactly the same what you want to do is here to put for instance a border dashed okay and suddenly we've got the effect of a border dashed there we go otherwise you have the butter dotted so if you put butter dotted you will have actually the Border dotted okay all right it can be useful sometimes you never know or you can have the Border double if I update there we go we've got the butter double okay with border style also you can specify border known there we go if you don't want to have a border this is how you deal with border Styles remember the Divide you can specify the width of your device so here we got three elements and we say to them divide on X so basically I copy pasted G element there so I'm going to update and there we go so we've got the Divide there and what's gonna happen is that we can say also that we want to reverse Flex call reverse here and reverse do divide also it's also working with the Divide width but we can also work with the Divide color so for instance we can put a divide so here I'm going to work on divide red 500 okay and suddenly we got a divide color that changed for the Divide style you understood it's exactly the same as the border so let's put a divide dashed which is very useful there we go divide Dash so working with this tight color and width of dividing it's exactly the same as the Border instead you are using divide as a first class I showed you before that we can remove the outline however if you want to have outline we can also use as you see there the outline Class 2 had an outline to an element so I'm going just to copy paste this element there and there we go so here I got my button C and with outline outline offset and outline four and now you understood that outline four is for the size of the outline and the offset is for the space between the element and the outline so there we go we got something not really nice there but we see that we've got some kind like a border but it's creating actually an outline if you don't want to have an outline you can use outline known and it's working of course exactly the same if you want to change the color you can pass outline the color and the weight of the color and then suddenly it's changing your color for the style you can use Dash you can use dot double exactly and for the outline exactly the same finally let's talk about rings and rings are creating actually box Shadow around our elements okay so here I got some examples okay of ring four let's take this one and let's see what's gonna happen if I put actually ring offset and ring four so there in my class I'm going to put ring offset and ring four okay so I'm going to update and what's gonna happen is that that around my button I'm gonna have this kind of box Shadow which is actually the ring effect okay it's applying a solid box shadow of a specific thickness to an element so sometimes you want to focus on element like this okay and you want that we let a trace around it this is actually what's happening in there and actually those classes are very useful if you really want to work on the accessibility of your app you are going to use all those classes and all those elements provided by terrin to improve this accessibility if you want to use box Shadow or effects or new elements with Tailwind CSS it's possible here I got an application running and I got a card and in this card I got some text a button but the thing is that this card is white on a white background and I would like to give some effects some perspective so what can I do is to use a shadow and here we see that we get classes that we can use to have some Shadow okay so let's try now with Shadow MD on my card and what's gonna happen is that it's going to have a shadow it gives a bit of cons instance a bit of presence inside my application okay that's really cool but let's say that I would like to have a bigger Shadow it's possible always with Tailwind with the actually size element that we can use so we got medium but let's try with large and we will see that suddenly we've got a bit more Shadow and if we go down we can see that we have several sizes medium large Excel to excel that actually create a specific Shadow already determined by telwyn so if I use two Excel Shadow there we go I will have a bigger Shadow this way so it gives a lot of consistency and it's really easy to apply you use the class Shadow alright however if you want to have some Shadow inside what you can do is to use the class Shadow inner so here it's not necessarily the case okay but as we see I've put some Shadow inside my dip so it's not very visible right now but yeah it's working and sometimes if you don't want to have some Shadow you can use the shadow known class on an element and it's gonna remove the current Shadow you added okay what you can work also is on the color of your Shadow which is really cool so I'm going to get back and put a shadow MD because I really liked the shadow MD I think it's enough uh too much Shadow it's a problem but here it's better I'm gonna work with that and I'm gonna add some colors so if I go down there we see that we've got some Shadow display let's say that I'm going to add and let's get back there and I already use science so I'm going to add a shadow cyan and let's say 500 I don't know if it's going to give a nice effect it doesn't but it's all right the demonstration is here so we've got our element there with the uh Shadow Scion 500. however what I want to do is to put it instead on my button so I'm going to use here a shadow MD and then the shadow cyan 500 and I got a bit of effect however that's not really what I want I would like to cut it so what I can do with Tailwind is just to cut the color and just add some opacity okay so here opacity on 100 it's the normal color on 80 unless etc etc you lower the opacity so here I'm going to put half 50. so that there we go and there we go we've got a like a shadow that is less aggressive also what I want to add there is a text white because on my button and there we go we got something nicer in my opinion okay so you can work with box Shadow color this way so as I told you you can work also with the opacity of elements on Tailwind CSS and here we've got the opacity of the elements so which is very useful sometimes because um what we would like to do is to say yeah if this button is disabled I would like to add some opacity okay it's possible well we're going to try just this if I put opacity 5 okay what's going to happen is that my button is going to almost disappear okay but it's still clickable be safe it's still clickable you will have to deal with another class if you want to disable it okay so basically here as we saw we put 50 of the cyan background Shadow there uh actually if we put opacity 50 it's exactly the same what's gonna happen is that my button is going to be on opacity 50. I would do that if I would like to disable my component okay so opacity is really useful we can also put opacity on every element made by 10. I'm going to pass real quick on the mix blend mode because I personally didn't use it a lot in my Tailwind CSS experience but you can control how elements should blend with background okay so as you see you can mix two elements and it will mix the colors automatically this is how it works with mix blend mode and you can also work with the background blend mode with actually it helps you to deal with the color etc etc it can be useful I have to admit that for me I never had to use it it can be useless but if you look for it it's in the effect column there let's talk now about the filters and filters are very very useful because they help you to deal with images and you're not obliged to send back the image to photoshop or just to call your graphics or designer to change the image you can use Tailwind to do it so let's talk about the blur so here in my example I've got a call like it's a card for blog and we would have an image there that I picked up on unsplash and what I'm gonna do I'm going to blur this image and as we see terrain provide to us a burr class that I can use so what I'm gonna do I'm going to take the blur SM on the image there so I'm going to get back and I'm going to add this blur SM class to my email 8 and when I update my image is finally blurred okay so let's say that we would like to have a higher bro we can use actually those sizes that you know on telwyn CSS and look at that there we go we've got the blur to excel I'm going to give you uh something really nice is that let's say that the whole cut would be blurred on two Excel there so it's a bit too much actually what I'm going to do is just use blur I'm going to update yeah I will have this and let's say that when I pass my mouse on it I want to remove the blur so what I can do is use blur on so what I'm going to do is hover and then blur on okay I'm going to update and when I pass my mouse it's going to remove the blur oh nice it is you see I'm going to remove the blur just on passing my mouse there so you can use blur to blur your images let's talk now about the brightness so I'm going to remove this blur stuff otherwise it will be difficult I'm going to get back again add my image there and let's say that I want to work on the brightness I can use brightness and the values comes from 0 to 200 okay so what I'm going to do there I got the image I'm going to add brightness 125 on the image and when I update suddenly my image is brighter okay so you can use brighter to improve or to lower actually and let's try to lower it let's put 50 instead there we go I'm going to update and finally my image is darker all right so what's happen if I put it on my card okay again you see that the card is this color and we can do exactly the same so let's just put on Hover a brightness 100 okay to see what's gonna happen and when I pass my mouse on it there we go it appears there so that's a nice effect that we can use also sometimes we can use the brightness in contrary let's talk about the contrast we can use also D contrast so let's say that we're gonna have a contrast and it's a bit different but it looks like the same effect okay so contrast 50 so I'm going to update okay and there we go so we pass from Gray to a normal contrasted um car we have the filter drop shadow that help us to drop some Shadow which is basically the same as the shadow we saw before we've got the grayscale so grayscale can be really really useful so let's try again let's put grayscale for instance and suddenly we got our post in in a grayscale but on hover if we want to remove it we can put grayscale zero so I'm going to put grayscale and zero don't ask me why they didn't put grayscale known we can also work with you rotate filters so here we've got an example and it comes from 0 to 180 we are going to change actually basically the color there so I'm going to put Hue rotate 90 and suddenly we change the color dynamically it can be very useful we can also invert our image so let's say that here I'm going to put invert so the image or the card here I'm taking both examples so it's really easy for you to understand there we go we see that we can invert so you got very good example of this there to use actually filters on a lot of elements in CSS you can use also saturate it goes from 0 to 100 so let's put saturate and personally I like saturate because sometimes the images are not very well colored okay they didn't pass by any uh Graphics before and here we see suddenly we've got more uh presence okay we got an image that is brighter that the contrast is very good and we've got this effect that is really nice also we can use sepia honestly I never use sepia but let's say that if you had a very a very old website a very whole style designs website you could use this API on some picture or if you want just to make somebody holder and make an old picture you could use sepia yeah there's a lot of filters that you can use for the photos sometimes you would need to put some elements blurred but not blurred as we see before blurred inside this element so basically you would use backdrop blur SM and here we've got a an absolute division inside our image that is blurring a part of the image okay so we get the image there and we get another div that is a blurred there and it's creating some blur it can be very very useful when you want to make the image appear but to blur some part okay and you can work also on the brightness of these divs you can work on the contrast you can work on the grayscale on the U rotate you understood you can irritate all the filters before but on element on top of each other through this backdrop actually through this backdrop class in CSS when you want to create an animation or a transition you have to write the class and Define it in your key element however with Tailwind CSS we got already provided classes and it's always the best to use to be honest and we can use for instance transition so here okay here I got an example when I pass my mouse the button is moving up and down okay and to do that I'm supposed to write okay in CSS that on Hover I want a transition is in out with a delay and etc etc okay so actually what I'm going to do first is that I'm going to use the transform translate basically we translate I can move an element on the top on the right on the left etc etc so what I want to do is to use this minus translate okay so that's what I'm going to type and especially on the button so there when I'm going to pass the button I want to translate M okay negatively so on the top by 50 okay actually it's not 50 pixel I think it's less okay so there we go our element has moved to the top because I moved him this way but it's too much what I want to have it's like let's see when we pass from zero okay when we are on zero it's it's is initial position and if I type 1 suddenly okay it's moving up okay I want to do it only on Hover so I'm typing over okay over translate y1 okay and when I pass my mouse it's moving only on Hover and with translate we can move element this way but however it's just terrible like this what I would like to have is a transition like this so what I can do is to type simply simply transition and you are going to use this transition Class A lot of the time most of the time because it's really easy that with transition you just put a regular delay I think it's maybe 200 milliseconds something like this we gotta look at it but look now I put transition what's gonna happen is that it's smoother you know it's less violent it doesn't pass from directly to bottom minus two okay so let's look at this transition class and let's look at it and what's happening there it's that there is a duration basic of 150 milliseconds and we got the timing function cubic busy okay that help us to just say please uh be quiet so most of the time you just have to use transition to apply this smooth changes okay but let's say that now we want to change the delay we can use the delay so I go on transition delay and here I got many classes that help me to deal with the delay of my transition so let's say I'm going to put the highest delay which is delay 1000 okay so I'm going to go next to my transition I'm going to delay 1000 okay and when I get back I pass my mouse I'm updating past my mouse and I have to wait 1000 milliseconds so one second to move okay and when I move out there we go if I come back there we go if we go way upper and we update look at that bomb bam this is how you can work with the transition delay okay and you can work also with the duration okay how much time the duration is going to uh work so let's add a duration 1000 so duration 1000 it's a lot those examples are just example for you if I pass my mouse I will have to wait once one second and I will have to wait one second for the element to move again again okay so duration for the duration and for the delay delay easy to understand for the transition timing function it's about to be the same you get the easing entering okay is out and easy note okay if you are familiar with that you can use dynamically and directly the classes if you are not familiar with easy note easy not easy not is in and is out sorry you can check Google made a very good guide about it telwyn CSS is not the best 4D animation there's not a lot of Animation however there are the animation that you need and for instance you get the animation spin to make a loader like this we often need loaders like this so what I'm going to do I'm going just to add animation spin to my button which is a bit dumb because I don't want my button to turn like this but as you see the animations pin is already applied to it okay another animation that I can use is animation ping and animation ping is very cool however here we will we won't need a button to get this animation also but on the official documentation we got a very good example we often need to do notifications such as this one and we would like to have something that glows animation ping is really useful for that also you get animate pearls and it's working for what we call skeletons so you can create these elements that you see here and that's a good example for the for the course as an exercise you can create elements like this and just add the pulse class it will create this effect of opacity okay it comes from white to more gray then comes back to White Etc okay very very useful when we go down we can also use the bounce animation that make it jump so to that you type animate bounce of course it's always animate slash uh animate sorry minus pulse minus bounce etc etc and of course you can use that with over also we often need to deal with the scale of images and with Tailwind CSS we can work with that with the scale class so here we get example we've got scale 100 which is the basic scale of our image but let's say that we would like to have a bigger scale so we can use from 0 to 150 a bigger scale and when I update suddenly my image is bigger however as you see I'm eating actually the text that is under so gotta be careful all the time to deal with the scale and let's say that I want to reduce it I can also do it to 25 and suddenly my image there is no 25 there is 50 let's put 50 okay 50. uh there we go there we go we've got a lower sized image we see here that we got to be careful always with the scale because it can work uh uh only if you deal with the content next to it otherwise it will pass over the content also we can rotate our images and it goes from 0 to 180 degrees of course so let's say that we would like to have an image rotated of 90 so I got to remove the scale that I have here rotate 90 degrees what's going to happen is that my image is going to rotate 90 degrees okay and now I'm here I'm going to talk about the transform origin um right now it's rotating on the center of the image all right but if I change the rotate origin and I put origin top left okay so if I put there here origin top left is going to rotate from the top left so it will be a total different okay uh rotation okay and here it's not very nice so I'm going to put rotate 45 and what's going to happen it's rotating you see from the the the top so let's say that now we're going to put a hover there and we're gonna have some transition and we will get the effect there so I'm going to pass and when I pass on there we see that our image is rotating so it's a bit weird here because I have to stay on the image but we see it's rotating from the top the Transformer origin help you to move um the center of your image and where it is rotating from so I can put for instance origin bottom right okay let's say that and when I'm going to get back I'm going into update and pass my mouse there we go we see that it's rotating from the bottom right okay sometimes you want to create effects it's really really useful the translate effect we already saw it with the button we can use translate minus x minus 0 minus y zero etc etc and for negative value it's minus uh on on on the first before translate and also what we can use is translate on the columns for the percentage age of your desktop so if you want to translate on the vertical at 25 or on the horizontal at 75 you get all those classes available there finally we can use skew and with skew we can skew our image so here we've got some example I'm going to try to skew my image there so I'm going to remove this or of this transition there we go it's qy6 and what's going to happen is that my image has been skewed okay I can skew it way more I think to 12 okay and I guess I guess there we go I guess if I put a minus on the front of it and I update it's going to skew it on the other side sometimes it can be useful so Transitions and animations and transform work together to help you to deal quickly with a specific behavior of your design or image the best demonstration to show the power of terrain CSS would be to create some kind of custom design system so I got several elements there a title subtitle paragraph and call button here I got an input text that we don't see get a checkbox and a select there okay and all of this is currently on my next GS application so I imported telwyn in my global.css file and what's happening there is that it's empty there is absolutely no Style no size no color or nothing and I would have to create everything from the beginning so what we could do at first is to add classes to these elements and later we would move those classes into custom classes inside our CSS okay that could be an example so let's start title subtitle and paragraph should have three different sizes so what I would do is to go there and to add a first class name to my H1 and let's say that I would have a text to excel all right then what I would do also here is to put a text Excel to my subtitle and to my paragraph I would have a text base even though I know that it's already on textbase we can see that as a little difference between the sizes but it's not very big actually what we would like to have is a bigger difference so I'm gonna get back and what I'm gonna do I'm going to get up on the size of the Excel so I'm going to put free Excel because I really want to have a difference between the subtitle and the title and finally there we go we see that there is a difference so what I can do is just inspecting okay my first element and we see that the font size is 1.875 Ram okay and then the Excel is 1.25 RAM and on the paragraph is run Ram so the other elements that we got done they keep basically the same size okay and right now I'm zooming just for this course but on the regular size it's going to be like this so we can see that the paragraph the encode button will have basically the same size we just want to make a difference on the title and subtitle so I'm going to zoom again and there we go and what we would like to have is a weight a different weight for the title and subtitles in comparison to the paragraph so I would go to my documentation and I will quick search there and I will type wait and here we see that I got font weight so I'm going to click on that and I can see that I got different type of weight so I'm going to zoom and I got bold semi bolt which could be cool so what I'm going to do I'm going to get back and here I'm going to add my font bold okay and down there I'm going to add my font semi bolt and I think this is what I want to have all right so I'm gonna get back and there we go I got a a title with a phone bolt and a subtitle with a font semi bolt okay the thing is now what we would like to have there is some space between everything is really stuck so what I would do I would check for the margin button by default the H1 h2h3h4 they got margin bottom with table in CSS everything is reset from the start so here I'm gonna add basically a margin button and I'm going to start by mb2 okay I'm going to save that it games on the beginning and I'm going to update and we see that suddenly I got space space that has been created under my title all right I want to have also a sub um actually a margin but I mean on my subtitle so what I'm going to do I'm going to do the same but I'm not going to do mb2 because if I do mb2 exactly like my main title I will have a problem in my spaces okay I will have a problem with this design system later it will not make something nice what I need to have is if I have a lower font or a lower font size actually what I would do is to lower exactly also the margin button so I will put instead of two I would put one and when I get back yeah we we see that it's a bit better all right so that's cool now if I unzoom again and I see the result well I think it could fit to a lot of blog posts that we can read we get Space to breathe for the elements all right so the thing is now I'm writing all this code there and if later for instance at the end okay I would have another title okay and I would save there this is another title and I would have another uh subtitle after that okay the thing is though right now we don't get the first margin top but it's supposed to come from another piece of content that we could put later the thing is that I would have to copy paste all the time my class name okay and instead of doing that let's just say that all rh1 will have these classes okay we want to have all our H1 to get these classes so what I can do I can go back actually to my global.css file and here I can select the current layer I'm working on and this one is layer base okay and inside this layer base actually I would have all the HTML tags and all the CSS classes that I'm going to create or to use to modify them so let me give you an example right now we are under HTML so here if I type HTML and I open my curly brackets and I put for instance like a color of red and I'm saving and I get back to my app suddenly the color red is applied to all my HTML document the CSS layer there has been applied on because the sheet is imported inside my an xgs application and I got my color red all right that's cool but now what I can do actually I can say yeah my H1 it has to get the these classes so I can go there and type H1 and I could type of course font weight a bolt etc etc however I can use apply apply from Tailwind help me to import the classes so what I can do is just taking this and I can import them directly there so I'm going to put that and there we go now what is going to happen is that all H1 of my document will have those class applied so to be sure about that to be sure about that I can remove actually okay do class for my H1 up there and I can remove it also down there and we are supposed to keep the same properties and it is working so if I inspect my title there I've got the margin bottom the font size the line a the font weight that I'll apply from my app underscore Global CSS sorry I gotta move this there we go everything that has been applied from my app global CSS file all right so I'm going to get back there I'm going to remove this HTML for now because I'm not going to use it yet so the difference now is I don't need actually to specify that here actually I want to add inline styles on my HTML tag okay and I think I'm going to do the same with H2 so I'm going to copy paste this get back and I'm going to say hey finally with H2 now I want to apply those classes so I'm going to type apply and I apply those classes all right now I can remove this down there and there we go of course if later you will have several subtitles several titles paragraph you would create classes inside your HTML tag or you could do the opposite creating that for first the classes and then apply your style and later it will apply automatically to your HTML tag the CSS that you wrote in global.css so basically I can also remove this and there we go and we see that I don't have any class written in my elements and I already got my style applied let's pass to The Encore here we'll get an anchor and there is no href so what I'm gonna do I'm going to put an href to this anchor and let's say that we want to go to https slash freecodecamp.org and I just have the Cure saw pointer applied as a class what I would like to have actually is that all my anchor got a specific class and style apply so I'm going to use apply and I want them to be underlined so when I get back suddenly I got an underline and I want them to have a specific color so what I can do is to go on the colors okay of telwyn CSS so I go on customizing colors and there we go we've got here plenty of examples and what I would like to have is some kind of blue color like this so what I could do is get back and I have installed intellisense intellisense with Tailwind it's the plugin that I'm using right now that gives me actually uh there we go this one that gives me actually the classes that I can use with Tailwind so when I'm going to type the text blue color here down there we see that I got all the colors that are available if you had later colors in your Tailwind config.s in this intellisense extension will understand that this color has to be recorded and going here into the autocomplete so I'm going to put text blue 600. and when I get back there we go I got my anchor on blue but let's say that when I pass my mouse on it I would like to have a text yes purple okay so what I can do is here adding directly okay sorry here hover and I want to have text purple and another color 500. all right so when I get back and I pass my mouse on it suddenly it passes to the purple color all right the thing is here I want it to be Smooths I can just add transition the transition class here to say yeah I want that I got a nice transition okay when I pass my mouse on it and we see it it's a little detail but it's working a lot on the experience there we go we've got an anchor that has its own style let's say that I want to change maybe the decoration so I'm going to go on the text decoration here and I'm going to get back there and I got text decoration style and there we go let's say that I want to have a decoration wavy on every link of my website so what I'm gonna do of course is to add the decoration wavy and there we go I got a nice decoration wavy added there I want to work on the offset so the size between the text and the decoration so I can use underline offset and I'm going to put underline offset and I'm going to put four to start let's work now on the button okay so the thing is that I will have several button on my application and those buttons will have very different Behavior what I want to do so I don't want to Target all buttons I want to Target buttons with classes so here I'm going to add a class name and here it's going to be BTN to start because all my buttons are going to have a specific basic class to start so right now I'm on CSS of course with scss you could do nested CSS but here just for this course I'm going to stay on CSS so here button okay I will apply a class and let's just start by a basic thing the basic thing is that we started with a blue color for our anchors and let's say that we want to stick to this blue color there so what I can do is to say yeah apply I want to add a BG blue and exactly the same color as the anchor so when I get back there we go we've got the background but we see that there's a problem because with our anchor we've got the offset up there it's not often that we're gonna have this um hanker with the button there so basically it's not really a problem however what we would like to deal with is the offset size there okay so we've got it there on the top so I'm gonna get back and what I can do is that I wrapped my button in the div so I can just add some margin on the top and on the bottom and this will be margin for to give us a little breath and there we go Okay so we've got the button there and how button what is it we want that every button get the same proportion but not the same color however here it's a problem because I put BG blue 600 so I'm going to remove this BG blue 600 okay and instead I'm gonna work on uh the padding and the margin but to do that I first need to put a background for you to understand where is the padding and mounting so actually I'm going to create a second class and I'm going to go there and I'm going to get back on my button and I'm going to hide the button primary okay button primary because if you want to do a SAS you will have nested CSS so here I'm just going to add this this way there we go and here this is where I can add actually my BG blue 500. and when I get back I got my BG blue 500 it was 600 sorry not 500 600. there we go the thing is that we have button there and I'm gonna work now on the padding because I want my button to have rounded corners and some space on the top on the on the left on the right on the bottom so I what I can do to start is to say the padding on the horizontal and there I'm going to put a PX4 and on the top I'm going to put a py3 to start okay when I get back there we go I got this big button maybe there's too much space so I can still work on the top and the bottom and there we go we've got something nice what I want to have also is a rounded LG because I want it to be a bit rounded and there we go that's really cool now let's create another button so I'm going to copy paste this division with the button there and I'm going to create a button secondary so here I'm going to say this is a primary button this is the secondary button so we got now two different bottom and there we go when I update we see that suddenly we irritated from the BTN class but not from the primary so what I could do is get back there and I could create this button secondary open there and here I'm going to apply another color so I'm going to apply for instance we've got slate and I can say that I want to have some kind of gray button this way and when I get back there we go but here there's a problem there's a problem with the color of the text so for both of them we're gonna add a text white property and all the two button will be suddenly on text White that's great now let's work that when we passes our Mouse on it we want them to be um on the color under the the value we gave before so we can get back there and type hover and I want to have a BG blue but this time let's try with 500 so when I pass my mouse there's this color that is slightly changing okay we see that the color is slightly changing and again like for the anchor okay we want to have something smooth so what we can add is transition at the end so I'm heading transition and when I update there's a little transition there and if I want to work on the delay of the transition so I can type transition timing function what I can do is here working on the duration I can say that I want the duration to be applied so I get back I get my button and I want the duration to be applied on my BG primary so here there we go so duration 300 and when I pass my mouse we see that it's slightly better but now for our secondary button it's a bit of problem because we will have also to write all those classes that we've got there and basically what we would like to do is simply to say hey on button hover I will have this transition and duration all the time so what I can do is to do that on button hover I can okay apply okay transition and duration 300 all right and basically if you want to really specify the color we could say that instead of having a hover on the color there we could say just that we want to work on the opacity so it's just a way of doing things and I'm gonna say that I will get an opacity of 80. so when I get back and I update we see that it's working on the two button which is amazing but if you follow the course you know that we don't need to do this other thing what we can do is directly to put it up there so I can put hover and on over I'm gonna put a transition effect so here there is no semicolon sorry transition effect and here on Hover again I want to have a duration 300 and hun hover again I'm gonna have an opacity 800. 8 sorry 80. so I'm going to remove this and it's also working so when I get back and I pass my mouse there we go are two buttons get this over effect all right so that's really cool we just created a design system for our button really quick um what we could do also is to work when they are disabled so I'm gonna get back there and I'm going to add a new button and here this new button will be actually on disabled okay so I'm going to copy paste this and I'm going to go there and this is a disabled button and let's put it into a primary we need to do is to say that the button is disabled so I put the disable property on the button and when I get back nothing is happening instead that I don't get the cursor pointer anymore I just got the mouse that I can pass on it and on the other they are able well now what we want to have is a gray button and we don't want to have this opacity effect anymore so I'm gonna get back into my CSS and here I get my button and I'm going to type disabled and I want to have a BG slate of 400 for instance so when I get back suddenly my button is gray but I still got this over effect and I don't want it anymore so I can stack do modifiers so I can say that on Hover and if it's disabled I finally want the opacity 100 so I want it to be full and I don't want to have this opacity anymore and there we go when I pass my button it's disabled I cannot have any over effect anymore and actually this gray is too gray okay the disable button is supposed to have an opacity on it so I'm gonna get back and on the color of BG slate I'm going to say slash 50 and I'm going to update and 50 is not enough actually I gotta go to slash 30 and I think it's good okay there we go now we've got this button that is disabled in comparison of the others okay here we've got an input and we don't get anything around it and the first thing that we can see is that when I click on it there is this outline this blue outline and I wish we could remove it so here what I can do is add a class name which would be actually in here outline known the outline known class will remove okay we'll remove when I click on it okay that's good but we don't see it anymore so that's a problem actually I'm going to get back on my Global's CSS there and up there I'm going to put input and inside type and text there we go for now I'm just going to start with that so I'm going to apply outline known and I'm going to apply also border because I want that my input as a border and naturally we've got this nice bottom okay which is not very very nice what we would like to have is a maybe a border color um more gray so I'm going to put just a bit more of gray so border slate 300 and there we go that's so cool that's nice now I'm gonna add some rounded algae and maybe rounded SM would be enough okay yeah because as you see rounded LG it's too big what I want to have is rounded SM yes I think that's good okay we don't want to have something too aggressive too rounded all right but the thing is now we don't get Space we see that the text is actually beginning right um on the letter on the left actually totally on the on the left and right on the border so what I want to do is to add some padding so I'm going to add a bit more of padding at first so here I'm going to apply px2 okay so I got a padding on the left and on the right now I'm gonna have the padding on the top and remember as I told you try to work with double values most of the time to get something more clear okay if I unzoom and I get back to 100 here we see that got I get an update and maybe this PX is a bit too much okay it's maybe a bit too much maybe I should put AP X1 and finally what I can put is just to put a P1 it depends on what you want to do but this input should be good okay all right that's cool now let's get back and let's create a new input text but this time it's going to be disabled what's gonna happen if our input is disabled by Nature our input disable is unclickable and we've got a gray background on it okay the thing is here on my input by default for sure I want to put a margin bottom of one because I don't want to have anything that sticks to my input so I already got this and yeah well the thing is here I'm going to add a new uh disabled background and background is going to be BG let's say 200. even if we already got a gray one okay it's too much let's say 100 yeah it's better okay here we see more that it's disabled okay so up there I got this and let's say that as a placeholder so I'm going to get back I'm going to add a placeholder and it's going to be uh email for instance there we go we got is it was on the actually it was on the on this one there we go up there we go so I got email there let's say that I want to have my placeholder on Italy what I'm gonna do I'm going to type play solder and here is going to be italic I'm going to save this and there we go we see now that is my placeholder is on italic but type date can I work on it of course so here I got my input type date so what I'm gonna do basically is maybe to keep a bit the same behavior okay so I'm going to put input type date and down there we will see what class what are the class I will keep for this so here I'm going to type apply and it's going to be also outline non border there we go I think it's going to be the same as this okay so I'm going to add this and what's going to happen there we go we've got our input date here with the same class the basic class so maybe I can put this we will check that after but maybe I can just take this class there okay and say that all the input will be like this so when I get back okay I got all the inputs that have applied this class so I can remove those okay and now all my inputs will have as a basis what I choosed before and that's good to do that because sometimes you want in your application to keep some kind of coherence between elements you want that all the elements that you have such as this input get the same design so if I'm changing one day the rounded I just want to put rounded instead of rounded SM and I think I'm going to take that as you see it has been applied to my input date and my input text let's say that we would have an input number it would be exactly the same so if I want to change also the color of the text I'm writing in I could directly do it there so I'm going to type text slate and I'm going to add a gray like this and I'm going to save and we don't see it that much but it's a bit gray so I'm going to lower the grayness of it and there we go and as we see here we've got the class there when we have a check box basically we have the input checkbox and we have also the label next to it so when I get back there I get my label and my checkbox let's start with the checkbox so we've got an input type checkbox okay and nothing changed on it so what I got to do is just to put an input type and then check box there we go and inside I'm going to apply a class and I'm going to say that unchecked I want to have a BG red 500. so let's see and let's see what's going to happen and we see that nothing is happening to work we need to say first that we don't want Daddy keeps is appear currents and for that we are using appearance known so you change the color by saying appearance known then say checked and the BG so I'm going to get back and when I click we see that I don't got nothing anymore I just got this little square and I really ask myself what happened there when saying that you don't want any appearance you are removing also the check this solution is not the best because we are missing the check icon inside so what we should do instead we are going to remove this appearance known and what we're gonna see is that it's not going to change the behavior of my checkbox it will stay in blue what I would do instead is to use accents so here I'm going to get the example accent and here we're gonna put purple again and let's put purple 500 and there we go we've got accent purple 500 and when I click there we go older color is changing the color of my checkbox we could do also that is that we got a label there and we know that our input is next to our label all the time so what I could do is to just add a class to my label because I will always know that this label will be on the top of an input or next to it to specify something about the input so what I would do is just to add a specific size so I would say that I I would have text small and then I would have a text slate and let's say that it would be a bit gray so let's go and let's see what's going to happen okay I got it and next to my input tip checkbox I will always put some kind of margin so margin to the right margin two maybe two is a bit too much I'm going to put one and there we go and maybe maybe I would add a bit of fonts so I would do font and medium I would say medium yes there we go that would be good okay so now we've got a checkbox that's working with the checkbox label there and let's say that we're gonna add some lorem ipsum to it okay a big big text as we see there we would have the checkbox that will be on top of our text and that's not necessarily something that we want so just by using Tailwind we know that we can use flex or however it already happened that our text was next to our checkbox and there we go what's gonna happen is that with flex it's going to cut a div in two parts one part for the checkbox the other part for the text so what we have there is that we got the checkbox which is on the middle of our text element so we can inspect that and when we inspect we see that our checkbox is on the middle and of course the check box has a margin that we don't necessarily want to put items start and what's going to happen is that the flexbox is going to put our item on first actually okay and here we got a new problem the new problem it's that we have our checkbox there okay we have a checkbox there and we have the text that is not beginning at the right line we will need to begin at the basis what we could do to align the text with the checkbox it's too hard to label a specific line eight so let's say that we're going to put line eight and here I'm going to put 4 because I know that 4 is 1 Ram when I get back here we see that it's a bit better however our text is very compressed so what we could do is to play with the flex and say that we want to align those two attempts or we could play with the checkbox so I'm gonna get back on the checkbox and if I Define that this checkbox will be always in this situation I can go directly into my input type checkbox there and put a margin top of one for instance and suddenly I got something in the situation that I don't want to be it's not necessarily on the line so what I could do is instead putting a 0.5 and what's gonna happen now is that we have our checkbox immediately and directly on the line of my element so you see sometimes we tear in CSS we can play with elements just to get a design right I'm going to put some margin on the top and on the bottom to continue the course and there we go here we are let's continue now we've got a select and the select it's a very good topic to work with Tailwind CSS because there are many selects that we could create the first select that we could create is the original select from HTML which is this one so what I'm going to do I'm going to get back to globals and there I'm going to type my select and I'm going to apply my class and first what I want to irritate from it's these inputs because remember this input there as some space and stuff so maybe what I could do is to use this input outline etc etc so I'm going to type this and there we go suddenly my option take the size and the design of the other inputs that's cool however now I got two lines that looks exactly the same so what I could do is instead of having those two elements there okay it's just doing this what I could do is just to put my select up there so now my input and my select would look exactly the same and it is working of course you want if I want to do something different if I want to have uh some classes that I had to my select now I can do it directly in here so let's say that I would have a padding right of eight instead of what I'm irritating up there there we go I got a select that got more options there all right another thing that we could do is to create our own select and to create our own select what I would do is beginning by creating my own piece of components let's imagine that later it will be in a component and it will work this way what I would do is that for now I'm going to just uh commenting this and here I'm going to create a div and this div would have a class name of Select okay and there are what I would have is a box and this div would be my first options my selected option my selected option to go on the bottom and here I'm going to mix okay this selected there and I'm going to say I want to apply block okay if I want him to stay on holder line or I want to apply inline block all right and suddenly there we go okay it looks like a select but it's not a select and to be a select I would add also my uh actually padding right sorry padding write eight there we go and what I will need to do is uh just that when I pass my mouse on it I would like to have a cursor pointer so I would do cursor pointer and there we go and let's say that I would like to have a background effect so as always I would use on Hover and I would had BG slate and it would be a very low BG slate there we go so now I pass on my mouse and there we go okay I would like also to add a transition to it okay that's good then what I would do is to have a list of options down there so what I can say is that I will have a div and in this div I will have option one then option two then option three all right so I got this happening right now when I'm gonna click on my selected option I will have this list triggered there and remember with flex that's exactly what we can do we would like to have something like this so I'm gonna get back and I'm going to say hey actually it's going to be a client's name of flex and it's going to be a flex call and divide y so Flex call divide y all right then I'm gonna get back and there we go that's what's happening however we see that we've got a big problem the problem is that we are irritating from the classes of the input so we've got this padding inside that is cutting my options and here it's the same so what I would do is of course to remove this select from there because this is not exactly what I want right now I'm I'm reserving this style to the select and input however for the select I would have basically to keep it as it is so basically I'm going to copy paste what I need for the custom select so I'm going to take all of this and I'm going to go down and it's going to go here exactly on deselect there we go what we want to do up there on nexgs 13 is to call use client then to use the state of react and set a variable is open on the use State Force so for now our select will not be open and down there what we do is that when we click on my selected options so on the select we are going to set is open on the opposite value of its current state and when it is open it's going to show a list or not so when I get back and I update when I click okay there we go we've got actually the options there and it's working very well however for the design it's not that again so we need to get back and to remove this padding and margin that we have and especially this padding right eight so and the hover I think we can also remove it because we don't want it for now and when we get back yes there we are so the padding that we want to have actually it's on every element there okay so basically what we could do is to put a class another class which would be a select children okay so my select option will not be anything and then a value okay that will be set by default so when I got up there what I need to do is to create another select value actually so select value and set select value there we go user state which will be by default on option one all right so I got my select value and then here what I can put is my select value as we see I got my option and what I need to do is to put a with a minimal width so here it's going to be let's try 30 and when I get back okay I got the width 30 it's almost the same as this one so the first one it's going to be of class child and here what I can do is to say that select dot child will have this padding so I'm going to apply I'm going to apply what of course my PX to py1 okay then I get back and there we go I got something that looks a bit the same I got my class child that has been applied and as we see my options there I can click and open or close what I would like to do also is to add maybe this child to every element there so let's try class name is equal to child and I update and there we go we see that we've got all our elements however we miss this border that we could have there so what I can do is just going to my here my ul and just put a border T there we go and let's see what's going to happen when I click I got my border down there I'm going to Target my select UL Li and I can apply on Hover my BG slate let's say 100 so when I get back I click and when I pass we see that I got this effect and of course what I can do now I can say that when I'm gonna click on it it's going to change my selected value I can do after is to create a function update value with the set selected value that will be received as a parameter which will be a string here and of course when I'm gonna click on a value I want to close my select so what I would do I would set as open on false so when I get down on my list element I would say that on click I would update the value with the current value which here is just a string for the demonstration so when I get back I update I click on my select and I click on option free and suddenly I got option three if I go once option two suddenly I got option two however we missed a last thing and this last thing is the arrow that we could have here so what we're going to do we are going to catch an icon and we are going to set an effect to it because we want that when we click our arrows go from the bottom to the top so let's catch an icon right now on icon.gs.org I'm gonna search for an icon which will be an arrow down all right and yes this one is cool okay I got this row that I got there and I'm going to just copy paste do component which is actually a SVG so back in my app what I'm gonna do here is just to create a new file okay it's going to be a row down on dot TS6 there we go and I don't think I uh downloaded it as a TX TS there we go okay so now I'm going to put that and I got this Arrow so what I can do I can just change your name okay I wrote down all right and I'm going to import this row just here next to my value so I import my row and I put my row next to my select value but the thing is right now as we see this is not the effect that I want so what I need to do is to put this select value into a span and here as a class name on my child I'm just going to add a flex because I don't necessarily to want it to have after this okay I get the flex I want the item Center and I want to justify between because I want some space between my two elements and there we go we've got our select and when we click it is working now I want that when I click I want to rotate this arrow to the top and if I get back to the official documentation and I click on rotate I might want something like rotate 180 degrees Okay so so if I take this class and I get back to my app and I go to my arrow down which is here what I would like to do is to add this class directly in there and to rotate it so here is a trick here I can create a div with a rotate 100 and I'm going to put the arrow inside of it so if I update suddenly we see that I get my arrow on the top but this is not what I want I would like to create a conditional class what I want to know is that if it's open and if it's open I want to rotate 180 otherwise I want to rotate 0 I want to let it add its basic state so I update and there we go it is working we can add if we want some transition to it so both of them we're going to save that I'm going to update and when I click we've got a quick transition to it so we succeed to create our own select congratulations you have created your first design system okay it was short it was quick but it's enough to give some identity to your website thanks to Tailwind so now you can use all these elements if you want to create your own application and you can replicate all these elements to create an entire front-end application one of the main core concept of terrine CSS is utility classes basically with HTML what should we do and using a traditional approach for an element you will first write HTML and from parent to Children you will Target these HTML element with classes then what you will do you will write CSS and dcss will be related to your HTML element so you will write one time CSS for one element with Terran CSS we get the same result way faster with a lighter code base because we are using utility classes utility classes its classes already provided by telwyn CSS to give the same result but without writing any CSS if you want to use flexbox padding Max width margin background color border radius with 8 Flags whatever you can relate to the Tailwind CSS documentation and just add yo classes this way so you will ask me the question Guam why not to use inline style instead of having those classes well telwyn CSS has many advantages over inline Style first you have a predefined design system provided by Tailwind which means that from the start if you don't want to create a design system you can easily use the pre-existing design system then with tear in CSS you can focus on responsive design from the start so I give you an example you are creating your application and you are adding your classes for the desktop Tab and mobile you can do it with responsive design at the same time because Tailwind is providing to you breakpoint prefixes and those breakpoint prefixes are simply media queries here we see that we've got a width by default and we want to change this width by default when we reach the breakpoint prefix medium which is 768 pixel I can just add the modifier MD on front of it and I will change the size when I will be on Min width 768 pixels okay and you can do the same with large x-large etc etc so Tyrion CSS is very useful to work with responsive design immediately from the start so you don't lose your time writing first the CSS for desktop then writing the CSS for responsive I was talking about modifiers but modifiers also work for hover focus and all other element that you can have in CSS let's give an example here I got a button and when I pass my mouse on it we see that the color is changing okay it this is because I use the LTT classes with a modifier hover and with the modifier hover I can say change your color it's also working with focus and active and it's also working with elements like last hold and even okay here we've got the the example we can just change the behavior on when we want to Target the first last element etc etc it's also working with before and after sudo element yes Tailwind work with pseudo element and we can also Target for instance the placeholder if you want to put them in italic the list markers that's an example or the Highlight text here I want to change the color of my highlight text I can do it with Tailwind simply with the modifier selection the responsive breakpoints help us to work with that because you can stack you can stack actually the modifiers and the utility classes which is very useful but another topic where terrain CSS is amazing it's it's dark mode with Terran CSS you can add what we call the prefers color schema you can have several um different color schema to your Tailwind team and you can use of course the dark mode here we've got an example we can say that in dark mode I want to change a color background and I just had a dock on top of it okay and that's amazing because Tailwind CSS really hacked this thing of having a dark mode into your application or website personally I use it all the time however the real Force for me of Terror in CSS it's its customization system with terrine CSS you can customize all of it all your framework actually you can customize your team through a tailwind.config.js file because Tailwind is like an engine that will understand what sizes what colors what font family what borders you want to use and it will build on the fly on its basis classes the class that you need let me give you an example on your tailwind.config.js you will have a team object which will contain the screen size or the breakpoints that we saw before but also the colors the font family and if you want to keep the basis of terrain and right on top of it you can use extend and in extend just rewrite what you just want to write again but if you want to create your own team which is cool is that with the colors you can say hey if there is no blue color add this blue color and this is the code of the color and the engine of Tailwind will dynamically create for you the background the text color the borders everything that is related to colors and then you will just have later to type text blue BG blue border blue etc etc how amazing is this and since I have started to use tailwind and use its customization system I cannot work without of course you can go way deeper into the customization because with Tailwind CSS you can just reuse your style so here we've got an example here we are targeting the layer base after importing tailwind and we can apply with The Decorator at and apply the directive we can say hey I want to create a class but I want that this class is using an existing Tailwind class you can do it with apply okay you can go deeper by creating also your component directly and using the directive and function theme this directive and function team is helping you to Target directly the basis of tailwind and say hey I want the reference of the colors and in the colors I want the white color and that's sometimes very very useful it helps you actually to have your custom utilities and it helps you to add your custom classes most of the time you see that you are using the same classes and stuff and you would like to gather them into some class it's possible with apply but also you could create a class with apply and calling all the base that you need from Tailwind plus adding your own CSS so you can stack the base of Tailwind plus your custom element and your Custom Design if you want to go deeper into the customization of Tailwind you have also the option of writing plugins in JavaScript that will help you to basically change your base or change your component and utilities provided by Tailwind all right here we've got a quick example on how I can change all the H1 of my base my components there and utilities down there that's an example on how far you can go to write CSS with telwyn and how far you can customize it how to trigger the dark mode with Tailwind CSS here I got an xgs application running and the first thing I need to do is to go to my tailwind.config.js and I need to add the key value dark mode class by doing this I'm going to tell Tailwind actually to use the dark mode when I will add a class and this class will be actually the class Doc and this class doc will be on the top level of my application so when I go to my layout.ts6 this is where I want to put my class so here what I'm gonna do at first I'm going to give a dark Behavior okay to my application so here I'm going to say that on the body the class name here on Doc I want to have a BG slate of 900 and also what I want to have is unlock a text white okay so how is dark mode working actually what we need to do is to add the class name doc now we added this okay it's going to change everywhere in our application actually do classes depending on the modifier dock which relate to the class name Doc and now when I get back to my app suddenly my background changed it changed to the BG slate 900 and the text White when I get back and if I remove my class name up there and I save and there we go we have a white background again we are on the light mode okay so what we need to do is to create actually somewhere a button to trigger light or dark mode and this button actually will do what it will add to our HTML uh First tag of our application do class name doc all right I've created a header component with a button and this is the button that will trigger our dark mode so back in our application in my component actually I've created three new files two files icon which are basically the two icons that I will need so when I will be on the light mode I will have the moon icon and when I will be on dark I will have the sun then I have created this Adder component and let's take a look at it because this is a quick function that I created for you in order to trigger your dark mode so let's have an explication here I got the adder okay and when I click I'm triggering a function this function is called switch mode and switch mode will switch actually the dark mode so I have created a state which is a Boolean on undefined by default and I'm going to switch actually this Boolean value from True to false however when I arrive on the application is going to be on undefined all right so at first it's on undefined and what I want to do I want to use use effect why because when I will switch the value of dark mode from True to false I want to give to my document element there the class doc okay and but what I want to do also is to put on my local storage anytime why in short previously if our user put a dark mode I want to store it and when I unite the application I want to set back to the dark team okay so I'm putting this item in the local storage however you see that in my use effect based on the dark mode so when I switch on on and off we see that I got this condition if there is a dark mode or if the dark mode is false and I got this third condition if the dark mode is on undefined and this is the trick there the trick is that when I um launch my application at first we will never enter into these two condition because here dark mode will be on undefined we will enter into the latest condition which is Set Dark mode and I will get the item dark mode if it's on true along here it's a string because uh actually in the in the local storage we can't have Boolean we just have string so there we go but here I'm gonna say hey is there an item in the local storage called Dark mode and is it on true if there is no item it will set dark mode on false so we won't change our theme however it will set it to true and here you see that I don't get any JavaScript return with window document document element class list remove why because remember our use effect is based on dark mode and if I switch dark mode inside this use effect it will trigger again my use effect so here if I got force or if I get true the value here is going to change and I will enter again into the use effect and this time I will enter only in these two conditions all right and in this two position if it's true it's going to turn to dark if its fault is going to turn two false okay so let's have a try there I'm going to open my console and we see that I already got dark mode on first if I click it pass on true if I click again and pass on false etc etc now I'm staying on dock and I'm going to update my application and Magic we stay on dark but there's a last thing you need to do if you want this to work back in the layout in your class name what you need to do is to say to your application hey check if on the local storage there is a dark mode if there is one put it on true otherwise put it on light why because when you create your header and you put it here on the top of your children the time the application is going to read from the top to the bottom it will be on light so we you will have a side effect it will be first on light then on dark and we don't want that we want to check at first if there is a an item called Dark mode all right so as you see it's perfectly working and it's amazing because it gives a real good effect to our application thank you for watching this video I hope you really enjoy don't forget to subscribe and see you soon