Master Tailwind CSS Crash Course 2024 | not a tutorial

this is not a tutorial it is a comprehensive course that will teach you everything that you need to know to master turbine CSS and will also give you the confidence to build well-designed applications using Kevin CSS now be it any of my course landing pages or my website a lot of recent projects that I have used all use table in CSS and initially I hated it but eventually I learned to love it because of all the advantages that we will go through in this specific course now we will be using next year's alongside Tillman so you will be learning a little bit of that as well so without further Ado let's get started [Music] so what is Delvin CSS tail in CSS is a CSS framework just like how we have nextgs which is a framework for specifically building JavaScript applications or like view or angular similarly Delvin CSS is a CSS framework that means it is going to allow us to and designer applications faster using tilvin now Tailwind does have a bunch of different advantages that we will be going through throughout this course but I want to highlight a couple here one is that you don't have to come up with class names all the time because you are creating those Styles in line now creating the Styles and line might look ugly at first not having the headache to come up with class names is going to be a huge game changer for us because at the end of the day we keep calling container for everything or wrapper for everything and this is something that we don't really want to do we don't have to deal with the headache of that second Tillman gives us a design system out of the box that means we already have a set of preset colors specific font sizes styling and a lot of different utilities that they even gives you out of the box so you don't have to come up with any of that from scratch you can use them right away which again gives you a really solid foundation now if you ask our designer friends you will notice that in their figma files a lot of these styles are already preset as well they have spacing defined they have colors defined and so on similarly Tailwind CSS has the same idea when we don't have our designer friends around where we can start building our applications but we will also be covering how to use Durban CSS if you do have an existing design system that you're using that you're using in your existing company but there's a lot more to tell when that we'll be covering throughout this course now let's get started by installing Telvin CSS in our application so if we head over to the Tillman CSS document rotation you will notice that they have a really comprehensive guide to install Tillman in any project that you want but because we are using next year's in our app tilvin is provided to us by default and we can configure it as we set it up so as long as we have these system requirements for installing xjs we can get a started with next year's right away so let's copy this command and then head over to our terminal to install an XCS app which has Tailwind pre-configured so for example if I go here and then hit enter let's call this app bloggers and we will walk you through the app as well that we will be building let's just go with the default and here you want to say yes would you like to use Telvin CSS yes I want to and then just go with whatever default that they have this will install all the dependencies to up to get our app up and running and there you go now I'm going to change directory to doggo's and then let's open up this specific app in vs toad now vs code will be the editor that is Visual Studio code will be the editor of choice for this specific course but feel free to use whatever editor you like now this is the code for it but let's go ahead and start the server as we start the server we can go to localhost 3000 and look at that we have a Nexus app ready to go and if we head over to vs code itself and expand this a little bit you will notice that we have a tailwind.config.ts file and in the page you can see that there's a bunch of Tailwind Styles here as well so it is using Delvin CSS by default in the specific application but you know what we don't need any of these tiles because we are going to build something custom for us so let's just get rid of it and let's just add an H1 saying hi doggos and let's also add a Emoji for dollars perfect so now if we head over to our server the browser you can see hi doggos is printed right there which is amazing which is exactly what we want now notice that even though we are using H1 hi doggos doesn't have necessarily the styles of H1 that you want so let's start learning till then CSS in general now so for example if we were to start H1 we need to start using Telvin utilities now if you were to style the specific H1 and typically CSS you would add let's say a style attribute here or a class name for example and then you can say that I want this specific the font size to be like 2 RAM and then I want the line height to be 1.2 RAM and so on this is how exactly you would style in CSS but in our case Tailwind does provide us with several utilities now utilities are essentially these specific pre-existing classes that Tillman provides us that we can use right away and it usually combines a bunch of different styles together so if you have to compare that to a in the JavaScript board you can think as like a function that you can sort of use and apply those styles to so instead of style we can get rid of this and just say class name and we can use a specific utility from till when call as text XL or whatever now if I just do a control space on it you can see that we have text small which means font size is going to be this and line head is going to be this in our case we maybe want 3XL which is three times the size and that's basically the specific font size now Flex men Edge screen Flex call Item Center justify between beef 24 text 3 XL and all of these are essentially Tailwind utilities that Durban gives you out of the box now if I save it and head over to the browser you can see that now the font size is actually quite big which is exactly what we want now but this is the benefit of using something like Tillman where we don't have to think up or think of new class names to give this specific H1 or you don't have to keep switching files you can just directly use an existing utility that deliver invites us out of the box and start get get started right away now when I did enter text Excel and I entered command space for example tracks Excel you can see all these different styles now the reason why I'm able to do that is because of David intellisense so for example this is a specific vs code plugin called Tailwind CSS intellisense that gives you that additional intellisense so you don't have to keep going to the documentation but just look up styles that you want in line so for example you can see over here instead of excel there's large and then as you hover over it it essentially gives you whatever large is but because we have two styles of the same type it's saying that there's a conflict but we don't need to worry about so make sure you basically get that specific plugin because it's going to make your development a lot simpler I also like write a weekly free newsletter called as front-end snacks front and snacks.dep if you're really interested then check out the link in the description below or just head over to front end snacks.theb where I teach you something new in the front end world every single week and I I do that using visuals and and more interactive elements at the same time I also give you what's latest and greatest in the front end world and lastly a front-end developer toolbox to help you with tools that you can use in your job day to day so if you are really interested please check the description below and sign up at front endstax.dev all right back to the course now let's walk you through the setup of the specific project and how till wind is configured now in order to know more about Tailwind you need to dig into two things one is the tailwind.config.ds file now this is the global Devon configuration file that is provided to you now this is an optional file you don't necessarily need it I want to update the existing design system that tell when comes with you can essentially update the specific file or if you just want to get rid of it completely because you're working with a design team and they already have a bunch of styles and a design system pre-configured then you can pretty much replace a design system that Durban comes with as well and and this is the file where you do that the next file you need to go to is the global.css file now global.css file is the global CSS configuration file and I want you to look at these three lines base components and utilities now these are really important in Durban if you want to override anything globally for example in our case if you want to overwrite H1 all together so whenever we use h1n anywhere in the project then you want to basically go ahead and use space so for example in our case instead of inlining it right here let's get rid of this all together and if we go to global.css we can use a specific directive called as layer which again Tailwind provides us with and then we can say base this is essentially saying that we want to add more styles to base and here we can just go ahead and style H1 now you can use Tailwinds apply directive to essentially extract repeatables cells and combine a bunch of utilities for example I can say apply and then here I can pass in whatever utilities I want from Tailwind I can say that I want it to be text Excel 6 XL for example but at the same time I want to add another utility called as font to make the font more Bolder or lighter or thinner or whatever you want it to be again when we go to font and then do control space you can see all of these here in our case let's just go with semibold now if you go back to our browser and go to our app you can see now High dollars is actually Bolder and it's actually text Excel that means the font size is quite huge which is exactly what we want for our H1 but for example going back to a global.css file base is where you would go to essentially apply the global files that you want the next thing is components so till when components whenever you want to again use repeatable Styles you want to extract specific Styles and combine them into existing components for example if you want to create a button primary component then again you can do the same thing layer components and then here instead of using H1 or enter using H1 you can actually give it a class name so you can say button primary to be whatever and then again using the apply director to apply extracted utilities you can give whatever styles that you want so for example I can say I want the background to be whatever I want the background to be this color if I want this essentially is a component with a specific background so component is essentially used for that but in that case we don't need that for now so let's get rid of it the last one is the utilities and again as we looked at earlier when we tried to style H1 utilities are essentially repeatable class names that we want to use that combines one or two or more CSS classes together and you can think of them as JavaScript functions where you combine a bunch of things together for that specific function you get that specific functionality and then again you do you can use utilities and create custom utilities that Delvin doesn't provide you as well so for example in our in this case again we can say layer utilities similarly now we let's say we do want a utility for something that that should that just aligns that text to the left all the time so for example I can just say align left and here I can pass in any specific styles that I want in utility so I can say again apply directive and then just say text left so now anytime we use this specific utility align left and it will automatically align it to the left hand side now you if you want if you don't want this and if you just want to say align left with a with a hyphen just like we have in the tail and CSS Styles then we can do the same as well this essentially became a utility class name that we can use and we do need a DOT here so again if turbine doesn't provide us with any utilities out of the box then we can create something custom whenever we need it in this specific directive now again we don't need any of that so we can remove it all together so now that we have a really basic understanding of how Tailwind works and what utilities are components are how to override a global file and so on how about we now take a look at the application that we are going to build now if we head over to the application that we are going to bill it's called hello doggos it's very simple yes we are creating a bunch of textiles but at the same time we have all these images of dogs that and again you can use any images that you want here basically starting a specific card in a different way but when you hover over it you can see that it's animating as well so again it's a very simple application that we will be building as we go along learning Tailwind in the specific course now Tillman comes up with an existing design system and what I mean by that is if you go head over to the Tillman documentation let's say we go to colors and these are all the colors that Delvin provides us for example you can just say text color 50 and this specific color will apply and so on now similarly it also comes up with a bunch of different spacing attributes as well that we can use and again the spacing is also predefined as well so we can just use that or we could completely override it if you like and we also have different breakpoints as well so for example this means that the Min width is going to be 640 versus MD is going to be 768 and so on but all of this is already pre-configured for us which means that it gives us a design system that we can just use right away and if but if you don't want that let's say we want to do something custom we are okay with the font size but we want to make it even bigger or a specific font size that specifically it is our design designer friends have like so sort of given to us so that we can use in our application then in that case we could do the same intelvin config.ts file going back to our code we can head over to billwin.confect.ts now here you can see that we have this specific theme attribute theme object and extend it now this is where we can extend anything that we want any of the existing utilities so for example if you want to extend a specific color then we could do that here so we can say color and then pass whatever values that we want now keep this in mind if we go to colors in our customization it goes from 50 to 950 in all these different colors but let's say for the color purple we do want to add one more now you can you can follow these specific conventions so you can say 950 you can say 1000 and so on but in that case we could also say 950 951 52 and increment by 1 which sort of shows us that it is a custom color that we have added so here we can say purple because that's the name of the color and then sn951 or 952 whatever we want and then pass in any color that we want so I can just say 5755eb which is my brand color and give it a comma here as well so now we have extended purple to have an additional color so now if I head over to page TSX we will add a class name here and say just say color effects purple one is what we want if we go here and we don't see the color so if we head over to tilvin.config.ds file this should be colors and then if you head back you can see that high dogos is purple in fact and we can use that specific custom color right away similarly we could do the same for other utilities as well so there are no limitations but let's say we don't want to use the utilities at all that Telvin provides us I mean we like the idea of creating utilities we like the utility first approach that even provides us so we'll still be using Delvin because there are other benefits to it it's just not coming up with new class names but we wanna we already have a design system that we want to use and we don't want to use turban then in that case you could do that as well again we could do the same in tailwind.config.ts file so for example if we can just pretty much get rid of everything and just replace it directly with color so now if I say purple and again instead of saying 950 because now we no longer have a scale we can just say 100 and this would be again the same color that I added and if I head over to page dot TSX file then you can see that purple only has the 100 attribute 100 value that we specifically added and nothing else so going back to browser purpose still works but that's that's it like if you want to add any specific colors any specific spacing and so on you could easily override it as well and provide it to your Custom Design system as needed so this is the beauty of Tailwind in general now let's learn about spacing so spacing as in padding margin or space between just like we see in the building docs now again padding margin and space between are essentially utilities that Tailwind provides us and you can control an elements padding through this and these are all the utilities that we have so if you just want P0 then that means padding is 0 pixel similarly if we want just PT that is padding top then it will only apply that specific padding value to the top of that element and if you want padding to be on the all sides or both sides then we can use X and Y values as well so for example px2 will only apply padding on the left hand side and the right hand side versus py would be applying padding to the top and the bottom as well the same thing is applicable in margin as well the good thing about element is that it has consistency in all these utilities sort of The Styling would be applicable so the more you get comfortable with it the better it is so yeah and similarly we have M5 with 2.5 which means margin top is going to be this value versus margin bottom is going to be the other value and again we also have the same thing with space between as well so for example if you do want to control the space between child elements then we could use any of these specific utilities for controlling the space between so for example with in a Specs box you can just say space X4 which means that it's going to give it the horizontal space between specific elements so now in our case in our application let's just style these two elements right here and provide some sort of spacing in general so we can we can get the same sort of styling that we want in the other app so now if I go back here you can pretty much get rid of all of this and now here let's give it the styling that we want so for example let's say we want a padding around that specific element which is on the vertical spacing side and we can just say padding could be any of these values and we want to pick padding as 20. similarly padding on the x-axis itself we can say padding should be 10. again we can do the control space and it also gives us that panic and this padding means that padding left is going to be 2.5 RAM and batting right is going to be 2.5 M as well and this is going to give the padding to the entire container this way there is some spacing when we start adding text around it in general now if we head over to our browser you can see that we have something like this now in get rid of this color because remember in global.css file we do have the specific style so we don't need it but there's one more property that we need which is that we need an H2 here so we can just say the best dog goes in town and for H1 H2 and so on we want to make sure that they're styling it at a base level that filter etched all H2S look the same so we can just say H2 and then add The Styling that we want so here we can give it a smaller size for H2 and again we want to make sure that we have some sort of medium bold sizing to the font weight to the specific style as well so we can just say font is medium and font PDM applies font rate of 500 where semi wool applies it to 600 so H2 it makes sense so if you go back you can see that the best dog goes in town are also styled which is really good but let's make sure that we have some spacing like we learned and like we learned right here so again if you were to give spacing then we can just say spacing and then margin m y to be whatever that we want so going back here we can just say margin it's going to be 12. so when we say something like this it means margin top is three RAM and margin bottom is 3 RAM so now if you head over here to our app you can see that our app is sort of starting to come together in general this is really good now in our application we do want to make sure that it's actually in the center so we can give it some padding throughout so we can just say padding is going to be 16 or something which is like a heat for a ram of padding so we could do that but at the same time we can just Center the element as well and we can use margin Auto for that which will set and as we already know in CSS we do need some sort of width for that so we also have a specific utility Intel when called as Max with Excel so which will give it the max width that we want as well this way things are in the center in general so we can just say this could be 6xl and look at that now our items are squished because the map because the max width of it is much lower than the screen size so again like these are all the utilities that we can start using in till when to give space now you can see that there are these lines here in general we really don't want that and if you remember this specific project came with some pre-existing Styles so if we head over to global.css you can see we do have these different colors added and different RGB colors again let's get rid of all of that so now an application looks a lot better if you're truly interested in learning till then then you should also check out the code that I'm using in the specific course you can choose to follow along or you could also just grab the code necessary please follow the link in the description below and let me know and I will send you the code gradients really help to make our application look really cool and luckily for us Tailwind does provide us with a few gradients out of the box and so we can like create gradients really easily so for example if you wanna if you want something like a linear gradient that is go it goes from left to right or right to left in a linear way then you can use any of these specific gradient utilities for example so you can use something like BG gradient to top T stands for top TR is top right then just write to bottom right to bottom to bottom left and so on so these different utilities really help us and then we can basically add any sort of colors as well as we like so for example if you say background to gradient to R then you can just say from to 2 again another other utilities from N2 allow us to essentially say I want to go from this color to this other color and that that really makes it really easy not application as well you can see we do have three different colors we have the purple here we have some blue shade or Indigo I guess and like also more pink shade as well so we could do that with gradients and linear gradients itself using Telvin so let's do that so for example here again again in base itself if I say that we want body and then I just want to say apply again apply directive allow us to apply those Styles or those Utilities in general then I can just say because we want our gradient to go from left to right we can just say background gradient to write and then whatever color we want so we can say purple and so on now let's just remove this part together because we don't really want to get rid of any of the styles that we want we do want all the colors so we can say whatever colors that we want from here so we can say purple from purple 300 and if you want to add a third color we could do that as well using any property that we like as well so for example these are the gradient color stops that we saw the start color right so it's for example the starting color then the ending color and again if you want a middle color then we can add via which allows us which gives us a three color shade that we want so again if I say from this then I want a to Pink 500 but then I do want a via property as well a VR color as well and say indigo is going to be 200. now if you go back to our application you can see that it has those three colors as we like similar to the specific application as well so one two and three and this is a little bit darker so we can always make it lighter so again you can see one two and three are the different colors that we want now get creative here add whatever colors you want but this specific gradient can also be applied to a button as well if you have a button in general because this is essentially a background image and you can just apply this specific gradient utilities to anything that you want next let's add the names of these dogs and also the images as well now again use feel free to use whatever images you want and also make up names as you like now fun fact these this is my dog Kobe but there are these other dogs as well that you know you can just make up or use dog photos in general or whatever photos you like so for example over here we have these thick dogs and we could just essentially create an array with like Sydney Dora all the Kobe and Danny and Drew as names for example with the name property and then we can also add in an imager as well so now we have I have already done that work for us so we can focus on learning Tailwind so for example we do have an array of objects with all the dog names and the reason why we have it have it in an object because then we can add additional properties as we like so that we could style them further if you want as well but again let's not get into that right now and then we are mapping in that specific array and then here we're just passing in specific keys so we have the name as H2S and then or we could just say maybe h3s it doesn't matter or whatever we want and then image and image is essentially the next CS image component right here and I've passed in a specific width and height as well now because I have already stored the images here as and called it one two three four five six the good thing about this is we can just as we Loop through the array we can just say zero plus one because Aries index starts from zero because it's zero plus one that would be essentially the first image and second image and so on so this makes it really easy for us to construct it so if we go to our app and if we just do a quick refresh you can see that all these dogs have disappeared in essentially a column but do we want a column we actually want some sort of a grid we want like either flexbox or we want like a grid itself to create that structure you want so next let's take a look at that next now let's learn how we can add flexbox or grid to our specific application essentially controlling the display of the elements so that we can say if you want it to be inline or flexbox or grid and so on so again there are utilities for that in Durban and you can whenever we say display for example block then you can just apply class block similarly if you want to apply grid then you can just say grid this way you don't have to say display grid you can just say grip same thing for flexbox as well or even table and so on instead of saying flexbox you say Flex which is right here so if you want to make sure that we add Flex for example then we can just say flex but then Flex also has additional items such as you want to Center the element you want to center it horizontally you're going to center it vertically and so on so again Tillman also has utilities for that so you can just say item Center or you could just say justify Center and so on so depending on what you're looking for you can do that but in our case in that application we are going to use a grid it is a three by three grid for example so we want one two and three columns so in CSS we would do that is by saying display grid and then we would say we want grid of three columns so for for that we can head over to the grid section and here we can just say create grid to create a grid container so we can just say grid and then since we want three columns we can just say grid calls three so if we head over to our application over here itself you can say rather outside because we don't want the grid to repeat you can just say grid which again if you hover over it it says display grid and then grid calls 3 which means it's going to add three columns for us it will that's equivalent to grid template columns repeat three and then we can see what that looks like so for example if you go back you can see automatically it has transformed into three columns but let's make sure that there are some gaps between the elements as well because right now it's actually sticking next to each other so for that as well we have Gap as a property in Grid instead of giving it like specific CSS property for Gap we can just say let's give it gap2 for example now if we had a head back you can see that there is some gap between the elements but now if you were to shrink this page you can see that it has it is also shrinking all the way but in our case in our application what we would like is when it goes into like a tablet size then changes into two columns but the minute it goes into a mobile device as well then it also it says in the same column which sort of shrinks itself you want something like some some functionality like that so let's learn more about how we can add responsive styling with till then next responsive design now we have so many different screen sizes we have a laptop mobile and all sorts of sizes at the same time we have tablets and so on also really wide screen monitors so we really need to make sure that we are styling accordingly now in CSS in the CSS world we would essentially be using media queries and then saying that if it's Min width is this and Max width is that then essentially this is what the behavior should be so if you have added over and over again media queries everywhere however till then it's really simple like it really helps us to write responsive Styles in a really easier way and I think it's way better than what we have in CSS even though internally it's CSS styling but having those utilities really help now that we go back to the docs we have this these breakpoint prefix that allows us to say that we've won the Min width to be 640 and that will be the small prefix so anytime you add a specific style so for example if I say MD is w32 that means starting from Min with MD which is starting from 768 pixel automatic and up it is going to be with 32 or whatever with 32 is in Durban similarly we have LG XL 2XL and so on now here's the thing we Tailwind does use the concept of mobile first which is something that I really love as well so instead of instead of basically designing for desktop we design for a mobile device depending on the application that you're using you can decide how you wanna how what your breakpoint should be like but with mobile first design itself you're targeting the mobile devices first just specifically by default those would be the Styles and then you are coding for for larger devices later because more and more our users are going to be on our cell phones and we are using desktop less and less so this is why it's really important that you start doing this and this is just mobile First Development there are a lot of different Frameworks follow and so does Tailwind if you go back to the code here this by default is actually for mobile now since this is for mobile it's a smaller device if I want to say that for a tablet size that is 768 pixel minimum so notice how there is min width here not Maxwell then in that case I can say when the minute it hits medium then we want to be or the minute from medium and over that medium and larger devices I want grid calls to be three because I want the The Columns to be three whenever it's a tablet and desktop and so on all the bigger devices and by default it's actually going to be two so let's take a look how that plays out so for example if you go to the app and if we shrink the page you can see that immediately it has gone down from three to two and this is really simple but just by adding MD now we don't need to add media queries so and so it has automatically added this media query of Min with 768 pixel so we don't need to do that over and over again which makes our life really simple and that's the beauty of it now similarly I want to say that the Gap is fine as 2 maybe but the minute hit hits tablet the minute hit it hits tablet I really want the Gap to be maybe huge something like 12 or something so like 3M or something like that so similarly now you can see the Gap is a lot more between elements but the minute we shrink it it reduces because on on a smaller device we don't have that much room so this makes it really simple and now that we're here let's also add some margin top and bottom here so on this specific element so we can just say margin vertical to B20 again it makes gives it a little bit more room and one trick to design in general is that when in doubt add more spacing to make your design look a lot better and application is slowly starting to come together to look exactly like our other application now that you know a little bit more about responsive design we could also start making sure that the headings as well has some sort of breakpoints to you so that this heading is not huge on a smaller device so for example if you go to Global CSS here we can say that for maybe larger devices we want to be 6xl but by default we want H1 to be 5xl maybe keep it the same because H2 is a smaller text in general in for our case so for example here we have this but then the minute it reduces you can see that for mobile it becomes a little bit smaller which is exactly what we want so again it's like so much easier to write responsive styling in general which is really great and lastly we can add one more styling which is for large the margin Y is going to be a lot more so maybe let's just say 32 because again for desktop and bigger screens we want the margin to be a lot more compared to like mobile devices where we have less space let's talk about borders now so in Delvin again there are utilities for adding border radius with colors dividers and lots more so let's explore that a bit here so for example if I want to make sure that my border radius that is the corners of my specific square or a rectangle whatever the quarters are I want it to be like curved around it in general you can do that until then and I love this utility for this reason so for example you could use something like rounded which will add round Corners in general but also like rounded MD but make it more rounded and so on or if you just want it to be like a circle then you could do that with rounded four and this is very helpful if you're adding a profile photo and so on or any other in any of your products as well so this makes it really simple so you can also make it like build buttons buttons founded then round and none would just make it like a rectangle depending on your text and so on so this is like really you this is a really useful functionality in general the other thing that it also does is that you can also add border width so for example if you want a specific Border in general to your element so like the Border would just add a thin one pixel border then or like order one would I believe add a one pixel border or like I guess border two in this case would add like a two pixel border and then border two would be the two pixel border 4 would be 4 pixel border eight would be 8 pixel and so on and then you can also set the color of the Border as well by just saying border and then the name of the color you could do that in a lot of utilities as we have seen already if you want the background color then you can say background color and so on so that's like really great about adding borders and so on in general and at the same time if you just want to add border top then you can just say border top four six eight whatever they have in general so that really helps and lastly you can also add horizontal and vertical borders as well so if we go back to our code rather if you go back to our app you can see we do have these really cool borders now forget the hover in general but like if you see like these purple borders right here they are beautiful and they are also rounded so let's do that right now in our application because right now our app looks like this and we want to make sure that we're adding a border in for that specific card so over here we have the specific div which is basically the container of it so we can just say class name and then give it a border two then we can just make it border indigo give me 400 let's see all the Indigo colors 400 and then we can also round the borders and then these are all the different ways you can mount it I'm just going to say Excel because I don't want it to be too rounded now if you go back here you can see that we have a really nice border at the same time we have uh the Border Corners to be downloaded as well but as you can see this photo and this text is really left aligned we want to make sure that there's some padding to it so what we could do is you can just say P5 which will give it or let's say px5 in general like let's say px5 so this gives that left and right and then we can say p y Maybe or I guess we could say py2 and this gives more but again you can see that because of this text you probably want more more at the bottom and less at the top so we can just say PT is to but PP is more maybe so you can say previous five so now we have a lot more spacing here and we can also say margin Auto which makes it Center as well so all these elements are centered hide the specific border so again like having these borders are really a game changer now what we could do is we could also do the same for the images as well because like we see over here we also have the images curve so similarly we could just add class name here to the image and then we can say rounded XL let's say down at Excel maybe this is too much so we can say rounded large and there you go so rounded large has also rounded the images in general as you can see right here which is really beautiful and if you want we can also give it a little bit of spacing between the name and the image maybe m y is three and then this way it has given some sort of a spacing between the name and the image making it look a lot better in general and here we can just reduce the spacing a little bit all right so now our cards are looking really good thanks to borders and now we have these cards that look really great but there's one more thing we want to make sure the borders are not so thick or maybe they are thick but we don't want it to be so visible and for that we also have a specific border opacity utility as well that Kelvin provides us so we can just say border opacity and then we can say we want the specific opacity of the border to be reduced to whatever we want it to be so if I say 50 and if we go back now you can see that this specific border looks a lot better than before again depending on your design you could do whatever you like but everyone also provides us utilities to reduce the Border opacity that we like as well if you want to control the Box shadow of an element or the drop shadow of an element then Tillman provides us with utilities as well that you can use so for example the Box Shadow utility will allow us to control the Box shadow of an element so you can say that shadow hyphen MD large XL 2XL again it's the same convention small MD large Excel to Excel and so on and in this case it will allow us to add Shadow to all the layers but let's say if you just want to add outer Shadow then you can do that but if you do want to add an inner Shadow then you can just do then you can just do Shadow hyphen inner now this is for box Shadow but if you want to add a drop shadow then you could also do the same so you can just say drop shadow MD drop shadow large and so on this will in fact add a filter property of drop shadow whereas the Box Shadow will add literally a box Shadow property in CSS so that's really good for our application we do want a shadow as well so let's add that for to these cards so for example over here we can say shadow and we have different options we can say large XL 2XL and so on so let's add Excel as a shadow and when we add an Excel Shadow but it doesn't really show much to us and if you go back to box Shadow and Shadow Excel that's fine it works but it doesn't really it's not really visible so we can also give it a color if you want as well now again with colors the beauty the beauty of it is that we can just say shadow and whatever color we want so if you say shadow purple then slash the number whatever we want like let's say 100 then this is the shadow Color Purple that will be be applied which is really good with colors in general so we can do the same here so so let's refresh the page and because the shadow is not applied and there you go Shadow is now available as a property and you can see that shadow is specifically of this color that is purple 300 and so on we can close this now we have these really lovely Shadows at the same time if you want to reduce the opacity as well for example of the button and that's also another effect that you can add this is how you add shadows in German now Dylan gives us a lot of utilities and we can also extend existing utilities or completely replace them by adding values until when config.ts what if we just want to add some one-off values but we don't want to really update the design system now I would not necessarily recommend this because you always want to stick to a design system but obviously there is there are some design constraints or there are some design parameters there are some designs that we where we need to add something really custom that's not necessarily applicable anywhere else if you want to do that then in any of the Tailwind properties you can add a box bracket just to add that specific like color or property in general let's say I want to add a very specific purple color purple so I can just say BG and let's say none of the color is not available here at all and I don't want to really add it to the design system either so I could just easily say 5755eb now you can see that if I hover over it for example you can see that this specific background color has been applied to BG and background color has been taken the value of the color RGB value that I have provided so you could do the same with background but you can do it the same with pretty much anything so in our case if you want to also do a shadow and provide a specific Shadow value and you could do the same by adding whatever shadow that you want in general so that is essentially the the beauty of Kelvin as well that you can also add like custom values if you want to Tailwind also allows us to add a bunch of different CSS filters in our apps we already saw drop shadow filter for example we can also add blur we can also change the brightness of specific elements we could add a hue rotate which changes the colors you can also make it like you can really have a lot of fun with it now in our application you can see that there is some sort of a backdrop blur like we're also trying to add a blur property here so Telvin has a backdrop blur filter which will make it give it this glass like effect which is something that's really cool we could do that with the oven so we could just copy this specific property and going back here we can just add it now if we add it you can see that this does give it the backdrop blur that we want and it makes it look like a glass like thing this is also called as glass morphism for example where it gives you this glass like blur backed out backdrop blur that you're looking for but you can also change the backdrop brightness if you like or the grayscale the cuter you can rotate it or the change the Hue colors in general so there are a lot of different filters that you could add that to basically add different filters in CSS and make your application really fun especially images so definitely have fun with it as you build this specific app a Tailwind also has a bunch of text specific properties that are really handy so for example in our case we have a bunch of dog names Sydney Dora Kobe and so on but let's say Kobe's name is not just Kobe but it's actually really long so for example if I change Kobe's name to Connie whatever right if I do that now it takes up a new line but let's say I don't want that as a feature I just want a dot dot dot an ellipsis whenever the text overflows now tip typically in CSS we would add a text overflow property and then add white space no wrap or and things like that in general in CSS in the CSS world we could do a lot with text overflow properties in general to make our text shrink or add an ellipsis and so on you could do the same with tailwind and Tailwind does provide us with a bunch of utilities for text so if we go to text overflow you can see we could truncate the property which is basically overflow hidden overflow ellipses and white space no wrap now we could essentially use truncate and this will add that ellipses that we want so if we do that for example in rh2 we can just say it is truncated and go back here you can see that this is almost working but it is expanding our card so we can give it a width in general so we can just say whenever it goes beyond with 60 and trunciated now as we do that now it has that ellipses that we want but let's say we don't want these properties and we just want an ellipses in general for something like this to truncate the overflowing text if needed then we can just add these two properties similarly if you just want to clip it then we can do that but not just that we also have the for text we also have indentation which is really good vertical align if you want to add an underline an over line and so on then Tailwind does provide us with a lot of different text specific utilities to control the decoration of that specific text or to control the style of the specific text which is really handy in general so if you want to do that that 100 percentages go ahead and add whatever properties that you're looking for over to the text elements to to make it look the way you want it to so now let's just remove the specific text because we don't need that and we have already added the truncate to the name so that's all for text properties now for the application that we are trying to build our images are not just in one position we are essentially transforming them into different positions now if you were to implement the same thing in CSS we would use a transform property just to like skew them or change rotate them and so on now with Tailwind we do have a bunch of utilities for that specifically so that we could transform them the way we like so let's take a look at that so so over here you can see scale rotate translates Q transform origin and so on so for example the scale property allows us to scale the elements either make the elements larger or smaller than the base image or size in general so for example if you see if base is scale 100 which is the exact this the image that we see right now a space then scale 75 is going to make it smaller and 125 is going to make it similarly we could scale it to negative 50 as well if you want we could also rotate it to any degree that we wanted to we cannot read it to 45 degrees 90 degrees 180 degrees and so on similarly we could translate it translate the elements as well to move up and down in general we can skew them so that they are not in the exact specific element so that they are slightly tilted or slightly skewed from its original position so we could do all of this in the oven and that's exactly what we are doing we're here in this specific app of ours so if you want to do the same here then you can imagine that every single card here would require a different transform property altogether so this is quite big this is big this is big but these three not so big and this one is rotated this one is fully rotated and they are all in different positions in general so we need a transform or some sort of a utility for every single image or every single card in this specific array so for that we could add a new property called as transform to each of these dogs so that we could transform them the way we like and when we are destructuring name we could also destructure that specific property and call it here so for that we could turn this into a string literal so we could call the property that we want so let's call that transform similarly we let's restructure transform and let's give transform property to Sydney and give it give Sydney some sort of a scale so we can say scale one one zero and then let's rotate her as well so we can say rotate six or the opposite direction then we can make it negative and if we go back here you can see that Sydney is still dead it has we have a rotated Sydney and we have also scaled in Sydney as well similarly we could make Dora a little smaller so same thing give it a transform property and here we can say Dora is going to be 75. and look at that Dora is 75. now among all of these Dany is little specials because you can see that Danny is also skewed to the left as well so so we could do the same for Danny too so if you look at this Q property we could say skew Y6 or skew Y3 or whatever else that we like any we could scare Danny back again 275 because we want dining to be smaller we could rotate Danny as well and then we could use skew Y6 we could translate as well from its original position and Translate Y to 15. and if we do that if we go back here you can see that now Danny is in fact a lot smaller it has Daddy execute and so on we could do the same thing for Kobe as well where we are changing the original position of Kobe using translate we are making scaling it and so on now I have already done a lot of that for us and all these different properties so we could basically just go ahead and cop I'll copy paste it you can see like that like they have rotated and skewed and transformed in general all the dogs because I've copy pasted that but you can do whatever you want and play around with these different properties these different transform utilities that we have so scaling elements back and forth because that is going to be really useful for you and make it make the application however you like as well now you can handle states such as hover State Focus States and so on inside tailbone using utilities as well now if you were to do the same in CSS you would basically use the property colon and the class name itself and that's essentially this way you would add hover State and focus State and so on that's the same idea of a Tailwind except that Tower is a utility you can add hover on top of any element that can accept and however or Focus States in general so for example over here we can see that we have a button and there's a bag around Sky 700 that has been applied on the hover property so the way you can add hover is just by hover colon and so on so you can see that the color changes the minute we hover now similarly there are several other classes as well such as on Hover it's this one then it is active there is focus and so on if I were to focus on it then there's no outline and there would be essentially a ring over here just like they have added here so you could basically apply any states as you like and the these specific States would be more relevant in the form compared to what we are doing right now but in in a form you could add different sort of states for input buttons for text boxes check boxes radio buttons and so on but this is essentially how you add States and deal with so in our application you want to use the hover state that is whenever we hover over a specific card we want that card to scale a bit now because there are different scaling properties already applied you are going to get this really cool effect of scale up and down depending on what transform property we have provided so what we could do is inside of our card component we could just add here that hover and let's change the color to maybe B purple 200 and we can also say scale it to one zero five as well now as you do that let's see what happens now if you go back to our app you can see that we are getting this hover property which is really great which is exactly which is exactly what we want but you can sort of see already what our next topic is going to be because there's no animation here the transition is not that smooth that's exactly what we will be focusing on next animations are one of my favorite ways of making an application look really good whether it be through transitions Spinners and a lot of different motions in general Tailwind does make animation little easy in general through utilities but I still feel that it has a long way to go because there are not that many animation utilities as you would like but there are a few that you can still use to make the application look great so for example in an application as we saw we want the hover state to be really smooth we don't want it to be like this because it's not great it doesn't look good because there is that sudden effect of hover it just goes from zero to 100 really quickly what we want is a sort of like a transition which probably slowly changes the the state in general so for that we could start using animations in Durban so we could look into the property called transition it is used for controlling the transition in general and again if you were to do the same thing in CSS you can see what all you need to do so for example if you were to use transition all then you would need to add these three properties cubic bezier Transit transition duration and so on so for example you can see that it is actually bulging out ease in out I would say versus if you were to look at the duration property then first is 150 but the more the duration the slower the effect is and this isn't this is exactly what we want in our card here we want the duration to be really slow as the as we transition from one state to the other state so what we could do is we could add a duration over here so we can say on Hover we do want the duration to be 500. and we also need to add the property transition for duration to work so again and however let's do that so if we go back here you can see that suddenly our guards are transitioning at a really slower pace which is what we want if you want to make it slower we can change the duration we can increase the duration or reduce it if you want it to be faster and lastly there is also the animation itself now there are specific utilities for for animating elements in Delvin the test spin such as transactions which is like a ping and then there's an animated pulse which is just like a pulse if you want to show like a loader of some sort and a bounce as well so now we could easily take in bounds if you like and then just add it on Hover too but if I wanted to get rid of this all together and go back here and go back you can see that all these card elements are essentially bouncing now now if you have a use case for that in your application then it's great you can definitely use all of these animations but just like I mentioned earlier and everyone is on an animation Library so you don't have a lot of Mission utilities as you would want compared to what let's say frame or motion or some other tools that might provide you so there are animations and you can customize these animations as well but again they're not that many so you we are a little bit restricted in Turbo in that case but since we don't want animation bounds in our application let's go back to what we had earlier we had animation duration and so on so this is what we had before and we are back to that it is a crime in today's world if you are a developer building your application and you don't have dark mode every application needs to have dark mode because we all use dark mode by default and your application shouldn't look bad when you when you switch from light mode to dark mode in general so for example in this application if you I were to go to my system preferences and change it to dark mode then you can see this is how the application looks like but until when we can easily configure dark mode and light mode very very easily so for example if we go to dark mode in the documentation you you really need to add the class dark right here in front of anything to say that when it switches to dark mode that's the property we want to apply so that just makes it really easy and by default this uses the prefers color scheme CSS media feature allows you to toggle dark mode and light mode easily in CSS and using Tailwind we could go here and just say that if it's dark mode then I want the color to be maybe like slate 500. just to try it out and if you go back here now you can see that this is the dark mode of the app now just for fun we don't want this but when it's a dark mode we want grayscale and look at that now grayscale if you go to the documentation is in fact a CSS filter so we could make it really fun and say that whenever it's dark mode all our images and everything needs to be grayscale so this is exactly how you do you see the application in grayscale but it is really simple to add dark mode in your application and you just adding the prefix dark colon to any property to enable that in specifically dark mode [Music]

Channel: Ankita Kulkarni

Views: 5,549

Keywords: tailwind css, tailwind css tutorial, tailwind

Id: coMJ4R8GzEA

Length: 67min 45sec (4065 seconds)

Published: Wed Sep 27 2023