Learn Tailwind CSS – Course for Beginners

Key Takeaways

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