Learn the basics of Tailwind CSS by building a Discord-inspired navbar from scratch. Learn how to leverage utility classes to build responsive animated UI elements faster https://fireship.io/lessons/tailwind-tutorial/

#webdev #css #tutorial

🔗 Resources

Tailwind Docs https://tailwindcss.com/
Tailwind React Setup https://tailwindcss.com/docs/guides/create-react-app
Source Code https://github.com/fireship-io/tailwind-dashboard

📚 Chapters

00:00 Intro
00:54 Should you use Tailwind?
01:42 Setup
02:48 JIT Mode
03:20 Functional CSS Basics
04:06 Flexible Container
04:41 Organize UI Components
05:07 Position a Sidebar
06:58 Customize Colors
07:50 Icon Buttons
08:23 Custom Classes with Apply
09:32 Pseudo-class Variants
09:56 Animation
10:34 Groups
11:54 Dark Mode

🔥 Get More Content - Upgrade to PRO

Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment. 

🎨 My Editor Settings

- Atom One Dark 
- vscode-icons
- Fira Code Font

🔖 Topics Covered

Beginner Tailwind Tutorial
Using Tailwind in React
Tailwind Animation
Tailwind Dark Mode
CSS vs Tailwind vs Bootstrap
2024-02-04T13:53:55.298Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
a8a46644-8470-4f4b-9046-38e85e5ce45b
c309d2a715d3e9f1d0bf42a87d580805a2c13cc87e2a7a354d9fd96381888562
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
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 mizable 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 requested we clone Discord, so we'll build a Discord inspired dashboard.
We'll focus on the most interesting part of the UI, y, 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 prebuilt 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 kinda changed my mind here.
The tooling has become really exceptional, and when you hover over a class in Versus 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 Versus Code.
The first thing we wanna do is generate a project with a JavaScript framework, like React, Vue, to Angular, Svelte, etcetera.
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 Crackle to override the native post CSS configuration.
Use it to replace react scripts in the package JSON, then create a Crackle config file to apply the Tailwind when plugin.
From there, we can use npx to run the tailwind CLI init 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 wanna 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 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, would 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 view where it's 100% 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 dash 16.
You might intuitively think this means 16 pixels, but it actually means 16 units on tail when 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, w 16 means 4 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 9 different shades for each color built into 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 standing.
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 wanna 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 assesses 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 or 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 that tailwind default looks 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 tooltips 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 since 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 m y 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 Tailwind?
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 x l by default, which will create a circle and then goes to x l 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 tooltip to shicon.
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 splain 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 fault 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 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 tooltip 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 the dark variant in front of 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 used in this demo, and there's a custom react hook in the full source code to manage the user's as preference and 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 Fireship IO.
Thanks for watching, and I will see you in the next one.

Speaker 0: 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 mizable 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 requested we clone Discord, so we'll build a Discord inspired dashboard. We'll focus on the most interesting part of the UI, y, 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 prebuilt 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 kinda changed my mind here. The tooling has become really exceptional, and when you hover over a class in Versus 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 Versus Code. The first thing we wanna do is generate a project with a JavaScript framework, like React, Vue, to Angular, Svelte, etcetera. 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 Crackle to override the native post CSS configuration. Use it to replace react scripts in the package JSON, then create a Crackle config file to apply the Tailwind when plugin. From there, we can use npx to run the tailwind CLI init 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 wanna 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 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, would 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 view where it's 100% 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 dash 16. You might intuitively think this means 16 pixels, but it actually means 16 units on tail when 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, w 16 means 4 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 9 different shades for each color built into 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 standing.

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 wanna 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 assesses 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 or 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 that tailwind default looks 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 tooltips 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 since 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 m y 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 Tailwind?

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 x l by default, which will create a circle and then goes to x l 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 tooltip to shicon. 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 splain 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 fault 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 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 tooltip 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 the dark variant in front of 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 used in this demo, and there's a custom react hook in the full source code to manage the user's as preference and 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 Fireship IO.

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