Ultimate Tailwind CSS Tutorial // Build a Discord-inspired Animated Navbar

one of the most disruptive web technologies in recent years is without a doubt tailwind css it defies the long-standing dogma of semantic css and instead preaches a more functional utility-class approach like many i found it offensive at first glance but the reality is that it can produce beautiful and customizable uis faster than any other approach i've tried nobody pays me to say that i'm just obsessed with things that are pragmatic that can get your app shipped faster in today's beginner friendly tutorial you'll learn everything you need to know to design a website with tailwind you guys request a weak loan discord so we'll build a discord inspired dashboard we'll focus on the most interesting part of the ui which is the sidebar that has these animated icon buttons that show a tooltip when hovered we'll also throw in dark mode and i'll explain how to integrate tailwind with any component-based javascript library but first there's a red button that says subscribe below this video most hiring managers in the tech industry recommend that you click the button before we jump into the code let's answer the question of what is tailwind and should i use it basically it's just a huge collection of css utility classes compared to plain css it allows you to write less code overall and have standards that prevent you from blowing your foot off however tailwind does not provide pre-built components like bootstrap this means it will likely take you longer to build a ui than bootstrap but it gives you much better control over customization some people say tailwind is not for beginners but i've kind of changed my mind here the tooling has become really exceptional and when you hover over a class in vs code it tells you exactly what css is inside it's kind of like css with training wheels and will do things like dead code elimination so you're not left with a massive css file when you go to production ultimately though tailwind is for developers who want to get highly customized stuff done faster to follow along with this project open up your editor and then pull up a terminal session and i've installed the tailwind extension for vs code the first thing we'll want to do is generate a project with a javascript framework like react view angular svelte etc one of the major reasons tailwind is so popular is because it works really well with component-based javascript libraries i'm going to use react for this demo but the same principles apply to any other framework and you'll find setup instructions for all the major frameworks in the official tailwind docs for this demo i've created a new project with create react app to add tailwind to it we need to install our dependencies then install a package called cracko to override the native post css configuration use it to replace react scripts in the package json then create a cracko config file to apply the tailwind plugin from there we can use npx to run the tailwind cli and nic command which will generate a tailwind config in the root of the project and finally we go into our index.css file and use the tailwind directive to include the actual tailwind styles in our project run npm start to run the project locally that was kind of a lot of work to set up but i think by the end of the video you'll see that it was well worth it let's first open up the tailwind config file this file is used to customize the behavior of tailwind you can use it to customize colors add plugins and a bunch of other things one change i'm going to make right away is to enable just in time mode as of today this feature is in developer preview but it will compile your css on the fly making your build times much much faster the other thing we can do is tell tailwind to purge any unused css from our final bundle it's not really relevant to this video but if we were deploying to production it would allow us to ship a very small css file to the browser now let's go ahead and open up a react component in the project you'll notice that when i add a css class to it we get this awesome intellisense with every single tailwind utility available to us the whole idea behind tailwind is that you add these utilities together to design your ui directly in the html for example let's go ahead and take a paragraph element and apply the text center class to it you'll notice that if you hover over this utility class it will tell you the actual css used under the hood if we want to add a color to it we might say text green and it will give us a palette of different green colors to choose from there's a utility for pretty much anything you can imagine doing and they're very carefully named just type out what you're trying to do like bold and there's likely a utility class to get the job done now if we go ahead and view this code in the browser you can see we have some green text in the middle of the screen now that you know the basics it's time to build out an interactive and animated ui you can find the full source code on github and it contains a more complete dashboard implemented with tailwind what we're going to focus on here is the sidebar and the first thing we'll need is a flexible container to wrap the entire ui the thing i love about tailwind is that i don't really need to think of a class name in order to do that i can just come in here to the root div in the app component and give it a class name of flex which will apply the css display flex property to it that's easy enough when you have one class to apply but things get much harder to maintain when you have dozens of classes to apply to an element the best way to keep your ui organized is to break it down into smaller components which we can do by creating a new file like sidebar.js and then export a functional component from it called sidebar once that's done we can then import that component from our main app component and declare it inside of the flex container now back in the sidebar i'll return some jsx from it which contains a div and a bunch of icons that for now will just have text as placeholders now we can use tailwind to position the container for the sidebar it should be fixed to the top left corner of the screen so naturally we use the fixed utility class to do that now to position it at the top we use top dash 0. that applies the top property with a value of 0 pixels you'll notice intellisense provides a bunch of different values for the top property but sometimes you might need to throw a weird value in there so you can use brackets followed by the pixels that you want to use and tailwind will automatically create a utility class for you we don't need to do that here but it is a cool trick to know if you want to break out of your design system we also have a utility for the left property but when it comes to the height we want to use a responsive value where it's 100 percent of the view height the utility for that is h dash screen which means it will take up the entire height of the screen now to apply the width we'll use a value of w-16 you might intuitively think this means 16 pixels but it actually means 16 units on tailwind spacing scale it's designed to provide you with a set of constraints that make your spacing look good and consistent between elements in this case w16 means for rem or 64 pixels other utilities like m and p for margin and padding respectively follow the same spacing scale that's all the code we need to position the sidebar now we'll add flex and flex column to position the elements inside of it and finally we'll give it a background using bg dash color and tailwind has a huge color palette with nine different shades for each color built into the framework when a color starts with bg it will be applied as the css background property and when it starts with text it will be applied as the color property and as a final touch let's add a shadow to make the ui look a little more polished you could easily spend hours fine-tuning a shadow but tailwind makes it super easy with a bunch of built-in shadows that look really nice out of the box the end result should be a basic dark container for the sidebar the only problem though is that the current shade of gray doesn't really match up with discord's branding so let's take a look at how we can customize the color palette open up the tailwind config file and find the theme object inside of it one thing we might want to do is extend the theme with our own custom color types like primary and secondary by doing that tailwind will give us our own unique set of utility classes based on these colors for example we could replace our other colors with bg primary or text secondary however it's worth noting that tailwind ships with a bunch of other color palettes that we might want to use if we import tailwind colors we can then set our gray colors to something else like blue gray or warm gray but in this demo i want our colors to look exactly like discord so i reverse engineered them from the discord app and i'm going to use those colors to replace the tailwind defaults like so the change is subtle but our colors now match discord exactly and now we can switch gears to the animated icon buttons and tool tips in the nav bar the first thing i'll do is create a new react component called sidebar icon it takes an icon component as an input prop and just renders out a div with a class of sidebar icon with the icon itself inside of it there's a cool package called react icons that allows us to import a bunch of different icons from libraries like font awesome and bootstrap as react components we can then declare our sidebar icon component and pass in an icon component as a prop you should now be able to see these icons in the sidebar but now here's where things get a little more interesting when it comes to tailwind instead of using a utility class here we're using our own custom class called sidebar icon but this class is actually built up using tailwind utilities this is totally optional but in some cases it makes more sense to create your own custom class with tailwind as opposed to extracting out your own custom react component if we want to add additional classes or components to tailwind we can go into the index css file and use the layer directive to extend the core components from here we can define our own custom classes just like we would in regular css but instead of properties and values we'll use the apply directive and combine a bunch of tailwind utilities together we'll give an icon relative positioning make it a flex container and center the content in the middle the element needs to be a square so we'll provide a height and width of 12. when it comes to margins you can target individual properties like top or bottom using mt or mb but if they have the same value you can be even more efficient by using mx or my to take care of both of them at the same time that takes care of the positioning for the icons now let's go ahead and give each icon a gray background and a text color of green but now you might be wondering how do we change these colors when we hover over an icon tailwind provides variants for css pseudo classes by simply prefixing existing classes with hover focus and things like that it's also worth noting that there are variants like medium and large to conditionally apply classes based on the size of the viewport when building responsive layouts now in the demo the color of each icon should change when you hover over it however on discord you'll notice that when you hover over an icon it has this nice little animation that goes from a circle to a square with rounded corners so how do animations work in taiwan well the first thing we'll need are some properties that change in this case we're already changing the colors on hover but we're also going to change the border radius it's triple xl by default which will create a circle and then goes to excel on hover we can then animate between these two states using transition all which will create a css transition with some default settings we can override the defaults like duration or easing with additional utility classes and we now have these cool animated icons with a very minimal css footprint in our code but now let's take things a step further by adding an animated tool tip to each icon to make that possible we'll first need to go back to our sidebar icon component i'm going to add a default prop for text and then a span with a class of sidebar tooltip that displays that text then back in the css let's go ahead and build out that class once again using the apply directive we'll add a bunch of classes here that i'm not going to explain again that will produce a ui where all of the tooltips are currently visible the challenge though is that we want these elements to be invisible by default and only shown when the user hovers over the parent element making the tooltip invisible is easy in this case we'll give it a scale of 0 to accomplish that but how do we change the scale when hovered we can't use hover here because it's impossible for the user to hover over an invisible element in tailwind we can apply classes to a child element when the parent is hovered using groups a group is a clever way to apply classes to a child when the state of its parent changes however one important caveat to be aware of is that groups don't work properly and apply not a big deal we can go back to our markup and use the classes there it's a really simple process use the group utility on the parent class then change the appearance of the child using variants like group hover followed in this case by scale 100 the end result is a tool tip hidden by default that animates into view when the parent element is hovered at this point our demo is looking pretty good but it's missing one important thing dark mode tailwind makes dark mode really easy to implement but we first need to opt into it in the config file there are two ways to go about it with media tailwind will look for the prefers color scheme property in css and if it's dark it will apply any classes that have that dark variant in front of it that's pretty simple but not ideal for every site another option is class that will look on parent elements for a dark class and when it's present use the dark variant for any of its children that's the strategy we use in this demo and there's a custom react hook in the full source code to manage the user's preference in local storage from there the implementation of dark mode is simply a matter of going into your elements and using the dark variant to define the colors that you want to activate when dark mode is enabled congratulations that's pretty much everything you need to know to start being super productive with tailwind if you found this video helpful make sure to hit the like button and subscribe and if you're ready for more advanced content consider becoming a pro member at fireshipio thanks for watching and i will see you in the next one

Channel: Fireship

Views: 245,660

Keywords: webdev, app development, lesson, tutorial

Id: pfaSUYaSgRo

Length: 12min 55sec (775 seconds)

Published: Tue Oct 19 2021