Transcripts
1. Welcome To The Class!: When it comes to building websites, most of us fall into two groups, we're either a designer or a developer. Personally, I'm not the best designer out there but I still need my websites to look good, and this is where Tailwind comes in. It is also other frameworks and libraries available but many of them enforce their own strict way of doing things. We can write our HTML as we would normally do, and then make use of the carefully designed class names. All utility classes to provide a clean and professional look to your all project all while staying inside of our HTML. This is especially useful for when a project grows rather than consistently thinking of new class names and ever-growing style sheets. Tailwind offers a consistent design system which your whole team can use. Buying simple utilities for controlling almost everything such as spacing, colors, typography, responsive design, and layout. As somebody who admittedly isn't the best designer out there, Tailwind has really helped give my website a professional base to build on. It's currently my go-to when beginning a new project. Allow me to focus on what I do best. How does it work? Once Tailwind is included in your project and we'll cover how to do this in the class, using it in your project is easy. We begin by adding our HTML just as we would normally do, add the content to the screen. This example shows a section containing some text inside without any styling you see in the bottom right corner. This looks pretty boring on the screen. Staying here inside of our HTML, Tailwind provides us with these utility classes which we can apply. Starting with these section wrapper I've added three of these classes which are pretty descriptive for each one does. Each class does one simple thing, and the first one is bg-gray-800. This sets the background to be gray, and then you shade of 800. We'll also look at the color palettes later in the course too. P-six is a pattern value of six and we can increase or decrease this number with more or less space in. Text-center is used to center the text contained inside. Of course, the text inside is now hard to read so we'll move on to styling the p-elements. Again, we add the class attributes that is elements, and just like the outer wrapper we again make use of the color of gray. But this time we apply the lighter shade of 200. Text-lg is for larger text and font medium is the font weight which we're going to apply. The result is a clean-looking section without even writing any CSS code. Also, we don't want every site which we create to look the same, and we can still write our own styles if we want to. Tailwind has lots of customization options available to make our site more unique. This class you'll learn about these utilities and so much more that Tailwind has to offer. All while building a Dashboard style admin project, display a list of products available in our store. As we see here it will be responsive and it will take care of the large and the small screen layout. This class is beginner-focused although you should be comfortable with HTML and CSS before learning Tailwind. Tailwind is a great skill to learn, and I'm looking forward to teaching you all about it during this class.
2. Prerequisites & Required Tools: Tailwind is a CSS framework, and therefore, it's essential that you at least understand the basics of HTML and CSS before taking this course. If you've used HTML and CSS in the past, either during existing course, one of my courses, or built any simple project, you should be good to go. There is very little which you need to take this class. If you've built any kind of website in the past, you probably already have these skills which you will need. A text editor is essential, and I'll be using Visual Studio Code. You can download this, or you can use any other which you prefer. If you need to download, the website is over on the right, which is code.visualstudio.com. It's available for free on Mac, Windows, and Linux. If you don't already have one, go ahead and download this. A terminal is also required too. Don't worry if you've never used one. We just need a few simple commands. Visual Studio Code comes with a terminal already pre-built in, or if you already have a standalone terminal which you prefer to use, this is completely fine too. There is no additional tools which we need to subscribe to, or purchase. Any other tools or software we need, we will download as we go through the course.
3. Share Your Work On Skillshare!: When taking any course, it's really important to
not get in the habit of following along just for the sake of ticking
off another lecture. Take the time to
process each lesson, review the code which you write, and think about how you might approach these
solutions yourself. With this in mind, this class is project-based and this gives you the opportunity to really make something
personal and unique. You don't need to get
too lost and divert away from the class
and you can even take a step back after you've
finished the class and come back and make some
project changes afterwards. This will really give you
a good chance to practice what you've learned a
way from the class. Also remember to share
your project to here on Skillshare and only
will I check it out, but it will also inspire
fellow students too. For more information on the class project head into the Project and Resources tab, where you can not only
upload your project, but you can also see
other class projects too. With this in mind, I look
forward to seeing what you create and upload
here on Skillshare.
4. Wireframe Overview: To help you better understand what we're going to build through this class, I've created a wireframe sketch which is available for you to download. If you want to, it may be useful to download and keep alongside you as a reference of what we're going to be building during at this class. Wireframe shows the basic overall look to how all project will be laid out. Over on the left, we have the full size, larger screen view, which has a sidebar on the left, and the product detail alongside on the right. Then over on the right-hand side of this image, we have a small screen view which has the content stacked, and also optimized for smaller screens. Tailwind will also be used for this responsive layout, along with the general styling too. If you would like to use this as a reference, you can download it now. Also, I have provided the same images which I've used, and these are available to download with this class. You can make use of these or if you prefer, you can use some of your own. Create a different style of project. If you would like to, go ahead and download these images, and also the wireframe. Next, we'll take a look at how to get started with this project and how to also set tail up.
5. Tailwind Setup: Tailwind offers us multiple setup options, depending on what we use to build our website and also what features we want to support. This video we're going to take a look at some of the different setup options. But first, we need to create a new project. The project will need a project folder and I'm going to create mine on the desktop. Right-click "New Folder" and you can place this anywhere on your machine which you prefer. Mine would be called the Healthy Juice Bar. Again, this is optional, you can change the theme and the style of your project, but mine is going to be based on a juice bar so then different types of smoothies. Also from the last video you should have downloaded the images and the wireframe, you would like to use these. I'm going to can drag these images into the project for later use. If you do want to use your own, create an images folder, and then you can add the different images inside of here. The only one which you won't have is this picture of me, but you can download a picture of yourself to use in this project. Next, open up your Text Editor or Visual Studio Code. Drag over the project folder to open this up. Then, as always we're creating a new website, we need to create a new file which is our index.html. You can use the Command or Control N shortcuts, which will create a new page, or if you want to you can hover over the title and sidebar and use this icon to create a new page. Give this a save, and this is the index.html. Just before we start writing any code if we take a look at the wireframe, what we need to do is to first decide what we're going to create first. We can see by these images we have two distinct sections. We have this sidebar area, and we also have this main content area over on the right. The same with the smaller screen we have the sidebar which is on top and then the main content area just below. We have two distinct sections which we need to create. Back to our index page, if you are using Visual Studio Code, you can make use of the built-in Emmet command, which is a shortcut to create our HTML boilerplate. This is HTML:5, hit "Enter", this will give us the basic structure which we need. The document title is Healthy Juice Bar. As we had seen before inside of the body section we have our two main sections, and the first one is the aside elements. Also alongside this are the main content section. Let's begin work inside of the aside section, we're going to add a little content to work with. As you can see inside the sidebar on the wireframe, we have a logo or a image at the very top of the sidebar and then the title just below. This is the same for both of the layout. The aside, create the image elements, and inside of the supplied images folder, we have a image which is the logo.png, the old text. Then just below our image, as we just seen, we'll create a level one heading for the aside title. This is the Healthy Juice Bar, or the name of your choice. Let's open this up in the browser. First of all, save this file, and then I'm going to copy the path to this, open up Google Chrome and then paste this inside. A pretty standard look as expected, we have the image and our title. Now what we're going to do is to head over to the Tailwind documentation and see how we can set this up in our project. For the Tailwind installation, we need to go to "Tailwindcss.com", and from the homepage, we have a link here to the documentation. From the documentation the page which we need is this installation link just here. This installation page has some different guides on how we can set Tailwind up using different frameworks and libraries. For example, if you use in a Vue or React or Gatsby, have some dedicated installation guides for these. We're going to be keeping it simple and just include Tailwind into a regular HTML project. Starting with the simplest way which is to use a CDN link. Over on the right, head down to the link which is using Tailwind via CDN. This is going to give us a style sheet link which we can use to drop directly into our project. CDN is a content delivery network and it's a way of having our content, in our case, the Tailwind CSS file, available across the world in multiple servers or datacenters. If we just copy this link and paste this into a new tab, this is the CSS file which we're linking to. Of course, at the moment it does look a little bit of a mess because it's not formatted. We'll take a better look at this in the Text Editor very soon. But the key thing to note here is we are linking to a Tailwind CSS file, which is hosted on an external server, rather than downloading this file and including it in our project. For now let's copy this full link from the documentation and then we can paste this inside of the head section of our index page. Give this a save. Now if we go over to our project, refresh the browser, instantly we see a slight change to our content. This is a good thing because it now means the Tailwind CSS file has now taken effect. The reason we see a change initially is because of a set of base styles which Tailwind will apply. These base styles are not really intended to add style into our project, but instead, they are a set of styles to make our site render more consistently across different browsers. If you've used a normalized CSS file in the past, a lot of it is based off this. What about Tailwind utility classes? Well, these are also available with the CDN link too. We're going to now take a look at some simple examples inside of here. First of all, we'll work on the aside section and all we need to do is add a regular class attributes. Then add our first utility class which is p-4. Now if we refresh the browser, we can see a padding value of four, it's being applied to these elements. Simple enough, the next thing to take a look at is to add a background, and we can do this with bg, followed by the color which I'm going to use as gray. Then the shade of gray, which is 800. We will take a deeper look into all the shades and colors in a future video, but for now, this should apply it to our side section, given this is dark gray background color. The image, move down to the image elements and add our class in. The image will need a height and a width. Using Tailwind, this is relatively straightforward. Use h for height, the value of 32. We will take a look at what all of these values mean very soon. The width, we can also do with w and make the square. We'll keep this as the same value. Refresh. The size has now taken effect. Since we have this dark background gray color, we also need to add some classes to our H1, to make this stand out on this dark background. The white color, we can add text, dash, white. Refresh, and this instantly takes effect. We can also transform this to be uppercase with this utility. We'll have utility classes available for almost any type of CSS property, which you want to add. We can set the font way and in this case, let's go for our font medium. Save. They should be a little bit bolder than it was previously. We have lots of different text size and options. For this heading, I'm going to go for text to excel. Last one for the level 1 heading is going to be tracking wider. This will add some extra space in between our letters. We can already start to see by adding some simple utility class names, we can really make a big difference to the styling of our site. The CDN link, which we set up at the top, is great for learning tailwind, and it will be fine for the majority of this course, and also, some simpler projects too. There is also some drawbacks of using it. We can see some of these if we go back to the Tailwind documentation, we can see some of the drawbacks here which we have when using the CDN link, such as we can't use any directives such as apply, which we're going to take a look at later on in the course. Also, we cannot do something called tree shaking, which is a way to remove any unused styles from all final builds, meaning the file size will be larger. To help with this, we're going to install tailwind using the CLI. Click on the Tailwind CLI link on the right. To do this, we need to install node.js, and we also need to make use of a few terminal commands. This can often scare people off, but it's really just a few simple steps which I'm going to guide you through. Let's start by installing node.js, which is available from nodejs.org. I already have node.js setup on my computer, but if you don't already have this installed, go ahead and download the latest version now, and come back once this has been done. Once this is done, you can either open up your own terminal which you want to use or in my case, I'm going to keep it simple. In Visual Studio Code, if we go to the terminal option, open up a new terminal from here. Once you open up the terminal inside of Visual Studio code, it should automatically open up inside of your project directory. Step 1, is to first make sure we have successfully installed node.js. The way to do this inside of the terminal, is write write the command which is node-v. If this returns back a version number, this means we successfully installed node.js. The next thing we need to do is to run the Tailwind CLI. For this, let's go back over to the docs. We can see here we have a command, and need to copy this and add this inside of the terminal. This MPX tool is available since we just downloaded node.js, which also comes bundled with MPM on this MPX tool. Let's grab this full command. Copy this, and paste this inside of the terminal. Hit "Enter". We can agree to install in the Tailwind package. Just give this a few moments to set things up. Once this finishes, we can go into the sidebar. We can see we now have this tailwind.css file. This is the same CSS file which we used earlier. Well, I'm going to link this with the CDN. We can now see it more clearly since this is formatted inside of the editor. The first thing we see at the very top is the set of base styles, which is used to render our site more consistently across different browsers. It does things like resetting any padding and margin values, it will set up default font families, and generally give a consistent appearance to our HTML elements. But what about the utility classes which we've just used? Well, let's do a search. One of the ones which we used before is this background color of gray. Let's go over to our CSS file. Use Command or Control F to use the finder. Let's search for our LBG gray 800. Further down the CSS file or 15,000 lines into it, we can see we have a reference to this class. This is setting our gray background color. Just above, we have the shade of 700, which is a lighter version. We can see, if we scroll up a little bit further, we have all of these options, which is from gray shade 50 all the way up to 900, which is the darkest. We then have the red versions with all the same shade values. You will also find lots of other colors too. If an else we've already used is the height class, let's do a search for h-32 and take a look for the very first occurrence. For each one of these values such as 32 or 28, these will all correspond to a single height value, which is in grams. In our case, the h-32, which we've applied to our image, will apply eight rims of height. We can increase or decrease these values to give us a different RAM value. Let's look at one more. We also had four medium just hear. If we search and we can see the font weight of 500 has been applied. We also have extra light, we have light, normal, semi bold, bold, and also extra bold too. Now, we have our own copy of our Tailwind file in the project. What we need to do is to replace this CDN link. Remove this and since our Tailwind file is directly alongside our index, we can link to this with the name of tailwind.css. Say this. Refresh the browser. All of our same tailwind styles is still applied. But this time we'll replace the CDN link with our own local version.
6. Live Server Setup: Constantly adding new things to our project, saving the file, going over to the browser and then refreshing to see any updates, can over time become really time-consuming. This is why I wanted to quickly show you by plugin which is available from Visual Studio Code which we can use to save us some time. This plugin will allow us to make changes to our editor, hit ''Save'' and then a live server will constantly keep our project updated inside of the browser. Installing this is optional and you don't need to set this up if you don't want to. Instead, you can just carry on refreshing the browser after any editor changes. If you do want to install this to save a little bit of time, what you can do is to go into the Extensions button just here. I already have this plug-in set up which you can see here. If you don't, do a search at the top for live server, and then click on this option, just here. Since mine is already set up and enabled, you can see the disable button at the top. This is the first visit to this plugin. You should see the Enable button just here. Then run this extension and set up our project with the live server. All we need to do is to click on this ''Go Live'' button at the bottom. This should then open this up in the default browser and then keep track of any changes to our site. For example, if we go ahead and change our background to be red, it's saved and this will be automatically updated inside the browser without needing to refresh. Let's just reinstate this gray color from the project. This is your state tool which I like to use, and I hope you find it useful too.
7. Mobile First & The Color Palette: Just like with many of the modern frameworks, Tailwind also has the concept of mobile first design. This means we start by designing for the small screen view, to begin with, and then as we get more screen space available, we can add or override any of the existing styles. This can make sense because a lot of the course styling will remain for all screen sizes, such as the colors and fonts and we can just make some layout or sizing changes when we have more screen space available. Back to the wireframe. Looking at the small screen over on the right, this is what we're going to begin with. The layout for this doesn't actually need a lot of work, since a lot of website elements tend to naturally flow this way anyway. We already have a logo at the top and also the title. Next, we move down to the menu. Back to the project. Since we are dealing with the small screen view, we can shrink down the browser, take up only the minimum width. What we're going to do is go to the aside section, just below the level 1 heading. Here we can create our links inside of the unordered list. But now we'll create our list items. We have six different links and these are just going to be unstyled for now. The first one, again with no utility classes to pass in the link. For now, we don't have any extra pages to link these two, so an empty href is fine. The first link is for products. The second list item, this one is going to have the content of orders. Number 3, this one is for the inventory, and next, we have the customers. Number 5 is for the analytics. The last one is going to be for coupons. Save this and you can even refresh. I'm going to start off the live server. We can see at the top, I have six links. As mentioned before, when we use HTML on its own, it can generally for pretty good for the small screen view in terms of layout, would just need to add some styling to make it look good. To make it look good, we're going to need some Tailwind utilities. To see a list of all the utilities we have access to, head over to the Tailwind homepage and then click on the documentation link. The Tailwind Docs is a great reference for all the utility classes. I've been using Tailwind for some time now, and I still use it as a reference. On the left, we have a list of all of the utility sections we have available such as if you want to make use of the flexbox, which you will be soon, we can use spacing utilities, sizing utilities, different typography such as the font sizes, different colors, the font family, and also lots of different effects and borders we can add to. Of course, there's lots of different sections here, but the one we're going to be focusing on is the color palette. Let's do a search by the top for the color palette. This is the one we need just here. Then scroll down, we can see a list of all the colors we have available. We've already used some of these in our project, such as the gray color, and we can see these have a shade from 50 all the way to 900, just like we've seen inside of the Tailwind CSS. You can see all the different colors we have available to start with. These will suit lots of different use cases. All of these colors, which are the same, can be applied to lots of different things. First, we select a color such as red and the shade of 400. Then on the right, we have some applications for this color. We have the BG prefix, which we've used to set the background color. We also have the text prefixes at the text color, and also if we want a border, we can use a color for this too. This is a nice way of keeping things consistent in our projects. We always have access to all of these colors and shades, and we can then just use a different prefix to apply it to different sections. Back to the project, let's apply some colors to our links and shrink this down. First, we'll set the text color for each one of these links. We need to jump into the a element at the class attribute. The first one, we'll start with the prefix of text, the color, all about the shade. There's our first one, and often what we want to do with these type of links is to create a different style or a different effect when the user hovers over the text. For this, I'm going to apply a hover effect. The way to do this is to apply any one of these utility classes, just like we would normally do, but we add the hover prefix followed by the colon. For example, if we wanted to change the background, we would use BG and set the color we want to apply. I I to go for grade 700, save. Now when we hover over the products, we can now see the background color change. We could also add as many hover status as we want to. Since we changed the background color, I'm also going to change the text color too. Again, place in the hover state followed by the colon, change it to be the text white. We can try this out in the browser. As soon as you hover over this, we can see a subtle change to the text color. Happy with this for now, so we can apply this to all of our links. Let's just copy this class section. Well, first link and place this in all of the rest of these links. Make sure this is in all six. We can see this now applies inside the browser, as well as this hover prefix. Just like with regular CSS, we can also target other states too. Instead of hover, we could change to another state such as active or focus. We do this in the exact same way. Just before we move on to the next video to look at some spacing, there is a few elements which we first need to add to this section. Inside the wireframe. If will look at the links at the very top which you just added, next to the orders link we see a number 5. This is to show how many orders we currently have available. It also has this circle background too. Then after the last link, we can also see this gear icon, which is a link to the settings. Let's start with the number icon, which goes just after our orders link. Place this in and still within our list item, and then place the content as the number 5. We can just about see this on the screen, but this is a bit too dark, so we need to add some utility classes. For the text, I'm going to apply a green color with the shade of 900, and also a green background color too so bg green, and this time the shade 100. The font size we can apply with dash sm, to give it the small size. Then to pad out the background color of green. Let's add a padding value, which is going to be equal to 1.5. We're starting to get somewhere in the browser. Now if we look at this, we have a square color. We'll also need to round the edges using the Tailwind utility classes. We, first of all, have the rounded class, and this gives a small rounded edge. We also have different rounded sizes. For example, we can apply a large rounding and this is a little bit bigger, but we can also make this fully rounded too, with rounded-full. This is fine. The last thing to do is to place the gear icon down at the bottom and this is just below our coupons link. Also, make sure this is outside of the unordered list. Again, this can be placed inside of a span elements. For the gear icon, this is going to be a HTML entity. A HTML entity is a way of including an icon in our projects, and we can apply these using certain codes. If you unsure about using HTML entities, a quick Google search will give you lots of websites where you can find out the available codes which you can use. First, the code which we need to apply is the ampersand, the hash, the value of 9881, followed by the semicolon. If you now see a gear icon at the bottom here, and just make this a little bit bigger, we can use a Tailwind utility class of text and the size of this text will be 2xl. There we go. The content is now in place, but all of this content which we just added, looks a little bit too bunched up. This is where spacing utilities come in. This is what we'll look at next in more detail.
8. Spacing Utilities: When designing or building any website, spacing is always a important consideration, and with regular CSS we have both margin and also padding to help control this. As we've briefly looked at in the previous videos, Tailwind also provide some handy utility classes too. Starting with padding, which is the spacing inside of an element, we can add padding to all four sides of an element using P followed by a value. We'll see what these values are in just a moment but below this, we can also see that we can apply padding to one single site too, either at the top, right, bottom, or the left. As a little shortcut we can also apply padding to two sides. If you've used any coordinate in the past, you will be familiar with the x and the y-axis. X is horizontally, so this applies padding to the left and right, and the y-axis adds padding both the top and the bottom. The margin, this works just the same, but we use the m prefix rather than the P. Again, we can add padding to all sides or control them individually. Also to either the left and right together, or we can group the top and bottom. Well, what about these values such as four? Are they pixels? M REM are some of the unit? Well, this all relates to a REM value which we can see in the CSS file. We can see what these values are exactly, if we go into the sidebar and then open up the tailwind CSS file. From here, let's search for some of our spacing utilities. Let's go for P-0, and let's take a look for the very first occurrence. Cycle through these and what we're looking for is a P-0 class which we've just seen in the slides. As expected this applies a padding value of zero. After each additional size we have one, we have two, we have three, each one of these adds a different padding value in REM. A quarter REM, half REM, three quarters and one REM is P-4. These all go under the quarter increments and they go all the way up. If we scroll to the very last one, this is the value of 96, which applies padding of 24 REM. If you do want to know exactly what any of these values are, just have a quick search inside the file. We have in fact already used some of these padding values inside of our index page. We used a padding value of four with the aside elements, and let's go ahead and add some more spacing into this project. The title, some spacing at the top and bottom which we're going to apply with margin y. This is a H1 and let's place this at the very end. Margin, the y-axis and then the value of four. Save, and some spacing now applies at the top and bottom of our heading. The same for each one of these links. These links, we're also going to use a padding value rather than margin. This is because if we hover over any one of these links, we can see we have a small background applied. We want this background to be a little bit larger to surround the text, so let's apply a padding value of two, p-2. If we hover over this link we can see the padding has applied. A couple of things to note here first of all, the product text has being pushed over from the left. Well, this is fine for now because we're going to move all the text into the center of this section very soon. Also very soon we're going to apply some space in between each one of these links. We can also apply the rounded utility class to this link too. We can see this better if we hover over and we can see the rounded edges on this background. Now if we apply this to all six of our links, copy the padding and the rounded class, and add this to our second link. Just for the span so we leave this, leave that link, 4, 5 and 6. We're going to test this before we move on. Great. This is all working and the next thing to do is to add the vertical spacing between each one of these links. One way to do this is to add some margin to each one of these links, or even easier Tailwind provides a utility called space between. We have many child elements like this, such as multiple links. We usually want some space in between each one. But some of the common solutions have issues. For example, we could try adding some margin to the bottom of each link. This works but also note the extra margin at the very bottom, which we may not want. Margin top causes the same issue, but leaves the extra space at the top, which also may not be wanted. What about using the margin? Why utility? Well, this is probably even worse because it also adds the extra space in at the beginning and the end, and also the space between each link is doubled. Tailwinds space utility solves these problems by only adding an equal amount of spacing between each element. This example is spaced vertically on the y-axis, but we can also have space across the page using space x. Rather than using multiple classes and applying these to each one of the links, we can also add a single space between class and this goes on the parents. In our case, it will be the unordered list. Let's locate this on other lists. Just up at the top, add the class, add the space utility and since we want the space on the y-axis, we add space y and the value which is four. This now gives us a nice equal space in between each one of these links. As you can imagine, we will be using spacing utilities very regularly. Next, we will see how we can use the CSS Flexbox with Tailwind.
9. Using The CSS Flexbox: This wireframe shows that the big layout change occurs with the sidebar and the main content. Small screens are generally stacked vertically and the big screen view is side-by-side. A common way to do this is with the CSS Flexbox, and Tailwind also has utility classes to do this too. The two sections which we're going to switch around is the aside section, and also building down alongside this is the main section. We can see that both of these sections are child elements to the body, so let's apply the flexbox to this section. We're going to put a class, and this is going to contain two classes. The first one is flex and the second one is flex-col. The first one or flex, this will apply the display type of flex and then flex-col. This is the same thing as setting the flex direction to be column, which we need for the small screen layout. This will apply to the aside on the main section. Now if we save this inside the browser, we don't see much of a change at the moment. We don't see much of a difference, because the content is already laid out in this way, but we will change this from flex-col to flex-row in a later video. As I mentioned in the previous video, the next thing to do for the small screen view is place all the content in the center. Way to do this is to go to the aside section. It already has the class, so we'll just add some additional ones at the end. Again, making use of the display type of flex. If we save this, the default for the flexbox is flex-row. Therefore, if we go to the browser, we can see all this content is placed across the page. Just like above with the body section, we can also flip this with flex-col and place the content as columns. To the center of the text, we can use text-center, and this will apply to our heading and also our links. The text is centered, but we also need to center the image too. Since the image is parent, which is the aside, is currently making use of the flexbox. If we now go down to the image, we can also use a flex property called self-center. Self-center is exactly the same as if we had our own CSS file and we set the image to be align-self center. We can see this if we go into the developer tools, right-click and Inspect. Let's hover over the image elements. This has applied the align-self value to be center. This now leaves us with pretty much where we need to be for the small screen view and also with the aside section. Let's move further down onto the main content. You can see we have a user's name, an avatar, the All Products title, and then two buttons to work with the products. Flexbox will also be useful for this section too. I can go just below the aside section, and take a look for the main element. Open this up and we can place our new content inside. For the avatar, you will need a picture of yourself to include in the images folder. Inside of mine, I have an image called me.jpg. If you don't have a personal image to use for the avatar, you can instead just use one of these smoothie images as a place holder. Now let's create the avatar section which will be surrounded in a div. This div will contain the avatar image. Jumping to the images folder, and the one as mentioned was me.jpg, the alt text. Then inside of these small tags, we're going to place in it the user's name. Put this in, hit Save, and there's the image and also the text just below. To make this section look more like a 1,2, we need to also add some Tailwind utilities. For the wrapper inside the div, let's put some margin to the top of this element or four. This will give us some spacing at the very top, and also we can make use of the flexbox. This flexbox will instantly make these two elements appear in a row since the default flex direction is row. Of course, the image is also far too big, so we can add the class. We can again make use of the width and the height utilities inside of here, so the height, the value of eight, and also the same for the width, just like we used for the number of orders. We can also apply a rounded edge to this image. At the rounded value, you can add any rounded value inside of here. I'm just going to keep this as full to add a circle. Next back to the parent, we need to align these into the center of the content and also align these vertically too. Inside the div and it just after the flex, set the justify content to be center. This will place all the contents into the center of the section. Then we also need to take care of the vertical alignment. We can do this by using items-center. This will place the text in the center of our image. Finally onto the text, we'll just add a class inside of here, and this will be to set the text color. Let's go for gray-500, and also to give some space in from the image, set the margin on the x-axis to be a value of four. Good. Moving down from this avatar section, we're going to create a new section, which is going to be a main wrapper for all of the rest of the content. Inside the main section, and just after the final div with a new div elements, and this is going to be the container for all of the contents including the table. To keep things organized, we'll just place a quick comment just above. We'll say container for all the main content, including the table, and then inside of this div, place in a new div inside. This is also going to be a container. We'll also add a comment at the top. This container will be used to align the All Products title alongside all of the buttons. The comment will say container to align the buttons and heading. First of all, we'll place the heading inside. Heading will be a h2, and the text of All Products. Below this, a div which is going to contain the buttons. The first one, place an new button element, and this will be the text of Add. Next, we also need the Plus icon. Once again, we can make use of a HTML entity. The plus symbol, we can use the ampersand, the hash, the value of 43, a semicolon, and then this will add this plus icon inside the button. We have this All Products title at the very top. Then this div has the first button of add. Also alongside this, we have the select option. Just after the button, place in our select, and the select means various options. The first option is going to be the one which the user first sees, and this one is going to be Bulk actions. Duplicate this. The second one is going to be for Edit, and the final one is going to be to Delete a product. Let's give this a try. We see the drop-down and also our Add button next to this. Let's now go back to our HTML and apply some utility classes to make this look better. First of all, the main content wrapper, which is the one at the very top, we can add some spacing on the left and right with px-2. Then also to apply some space to this avatar section, we can also apply some margin to the top. Let's go for eight. Next, the div wrapper, which contains the heading and also the buttons. To ask some alignments to this section, we can make use of the flexbox. Change the direction to be flex column, and then we can begin to align our content, as well items-center. This will move all the contents into the center of your section when we have the direction set to column. To add some spacing between these, we'll go down to the level 2 heading and apply some margin just onto the bottom of the element with mb-4. Down to the very last section and we can begin to work on our button and also the select inputs. First of all, the button, this will have the text color of gray-100. This light gray color doesn't stand out too good on the white background color, but we're going to be changing the background color to be indigo, a shade of 500, and this makes it stand out. Also, a hover state will again change the background color to be a lighter shade of indigo. Let's go for 400. Good. We also need some padding on the inside of this and also to round the corners. The padding on the left and right, value 4, will shrink the text to be a small size. Then finally at the rounded edges. Good, this looks a lot better now and on to the select. Down to the opening tag. The name and the ID doesn't really matter at the minute because we're not sending our form to a server, but we'll just set the name of bulk and also the id to be the same. The classes, to match our button, we'll keep the text to be a small size. Apply some margin left to give this spaced away from the button, a padding value of four on the x-axis, and then we'll also set the border to make this stand out. To apply a border, we just use the border utility class. We can also play around with the color too. As we looked at earlier with the color utilities, we can use the border prefix, and then you use any one of our colors which you want to. Let's go for grey-300. This the rounded edge. We can make use of the focus state. When this element is in focus, we're going to remove the outline and instead replace this with a focus state, which includes an indigo border with the value of 500. If we go to the browser, this is looking a lot better now. We'll just start small space in it to the y-axis of these elements. Let's do this inside of the select. Alongside the padding, we'll add some padding on the y-axis. Let's try a value of two. Good. We'll also do the same for the button. This now looks much better. Just to test out the focus if we click on the browser, and then use the tab button to cycle through all of our elements. Once we get to this select input, we can see the focus outline, which we've changed to be the indigo border, giving the user a visual indication of which element is selected. We're now making good progress with the content and also the small screen view. Next we're going to begin working inside of our table.
10. Tables And Overflow: The wireframe for the small screen over on the right has a table which we're going to now work on. Tables of data for this kind of product could also contain many more columns too. Since the width of the screen on a small device is limited, rather than reduce the size of this table and try to squeeze everything on a small screen. I think the best thing to do in this case is to allow the user to swipe to the right to view the rest of the table data. In the previous video, we added this comment at the top around this div, which was the main container. This contains all the content which we created and also the table. What we need to do is to locate the closing tag, which is just above the main, and keep this table section inside. For this, create a new section and then inside our table. The reason we've added this surrounding section around our table is to add an overflow class. We'll see the result to this in just a second if we add the class on the utility of overflow dash x, dash auto. This utility is the same as the regular CSS overflow x property. We've set the value to auto. This means if the content is too wide for the screen, which will be the case for our table, rather than hide the table or cut it off, a scroll bar will then be introduced. Inside the table, add our first element which is t-head. This is going to be the wrapper for all of our table headings place in a class of bg-gray-100. Then inside of here we add our first row. With tables, we use the tr for table row. Then each one of the headings will be surrounded in the th element. The first one, if you remember from my wireframe, is the item. The second one, the status of the item and the third one is for the category, the stock level, the price. Then finally a Edit button. Let's save this and see what happens inside the browser. I'm going to setup the live server to open, update the changes. There's our table heading across the page. As expected, we need to add some utility classes, make this look a lot better. For the th elements, for the headings, place in the class. First of all, some padding on the x-axis six. I need texts over on the left. We can also make the text extra small or medium to make this stand out and a little bit bolder. Then a color for the text, which is going to be gray 500 and turn this to be uppercase. Then at the very end we're going to add one more utility class, which is going to be tracking wider. If you take a close look at the item before we save this, hit "Save". This will increase the letter spacing. With this one now in place, we'll copy the full class attribute and at least each one of our table headings. The second one, the category, the stock, the price, and finally the edit section. If you remember from the wireframe, the first cell over on the left also has a check box to select all of our items. This is going to be inside of the first table heading. Just before the item text, place in the input. The input is the type of checkbox and also to give some space in it to the text which is just alongside. We can also add the class to give it some margin on the right and the value of four. What we now have is a table heading with two pieces of information. We have the inputs and also the text. We also need to do some alignments, make this appear alongside each other inside of the cell. We can add some padding and alignment to the section. I'll just do over in the class. We'll add some padding on the y-axis. The value of four just gives us a little bit more vertical space in. Now we need to figure out a way to place the checkbox alongside our item text. Well, we can do this by changing the table heading to make use of the flexbox. Remember by default the flexbox has the flex direction of row. This means that both of the child elements will be placed alongside each other in a row, leaving our head section now completed and our table now ready to add some data in the upcoming video.
11. Table Body & Divides: Moving down from the table head section and onto the body where we can have each product line. You can also add in as many of these products as you would like to. Over to the editor, and we can begin to add the section. In the last section, we created the table heading. If we locate the closing tag for these elements, we can get to work on the body section. Just below the thead, add in the tbody. Then place inside a class which will give us the white background color. Inside of the first row with the tr elements, the first piece of table data contains three things. It contains a checkbox, so add the inputs with the type of checkbox. This is going to sit just below this one here. Alongside our checkbox, we'll add the image elements, and the image element is going to be the picture, which we want to place next to each smoothie. Finally, the p element, and let's go for the mangoes smoothie. Oops, this is just above the table. We actually need to cut off all this whole place, and place these inside of a cell which is td, the table data. Place this is in. They should now fix our issue. The cell also needs some classes to make these align properly, so since we want all three these items to go across the page, we can again make use of the flexbox, and then also align these vertically using item-center. Some padding on the x-axis, and we'll go for value of six, and also padding y of four. The checkbox is fine as it is, and we'll move down to the image and jump into the images folder. We have an image inside here, which is the mango.jpg, and this is the image which I'm going to place next to this item, the alt text of mangoes smoothie, and also some classes to this elements. For our image, we need to make it a little bit smaller, so we can do this with h-10 for the height, and also the same for the width too to keep this equal. Then if we look at our image inside the browser, we also need some spacing on either side. We could do this with the margin property on the x-axis and a value of four. Next onto our texts, we'll also add some classes into the p elements. First of all, we make the text to be a small size, the font-weight of medium, the text color of gray 800. But let us base in also use the tracking wider utility which we looked at before, and then a class which we've not used so far, which is whitespace-nowrap. You'll see, as soon as we save this, the mangoes smoothie text will appear on the same line. This means it stops the text wrapping onto a new line if it's too long for the actual cell. The next piece of data is just under the status. This is going to be a green active label. Let's go just below our td, add a new piece of table data. We also need to add some classes into this section. We're not going to mirror the classes from the first one, because remember, this needed to make use of the flexbox to align all three items inside, so let's go back down, and we can add our classes. This one is going to be text-left, text-small, just keep it consistent, some padding on the left and right of six, tracking-wider, and also whitespace-nowrap. Inside of the cell, add a span element with the text of active. To make this look more like a button, we're going to go into the span elements and add some classes. First, we'll change the text color to be green, shade of 900, and then offset this with a lighter background. This is also green, but the value of 100, a padding value of four on x, and then for y, value of two. Then round the edges, we round it as full. That looks good. Also if we make the browser smaller than the actual width of the table, you'll notice a scroll bar at the bottom. As mentioned, this is the scroll bar to make all the content come into play. We have this because if we go to the start of our table. Let's scroll up. Remember we added a section wrapper around this, which has the class of overflow-x-auto. Next section, we'll have is the category, so back down. Just below the last piece of table data, add a new cell. From here, we can start to keep the styling more consistent. We can grab the classes from the last table data. Paste these in. Then in between the tags, we can add the text of smoothies. This is a pretty simple one. It just contains the text inside. Now we go across and we add the section for this doc. Keeping a consistent, copy the full td elements from above, paste this below, and then insert an a inside of here since we're not tracking the stalk levels for these smoothies. What's next? We'll go across and take look. This is the price based in a new td elements with the same classes. Add a price for our smoothie. Then finally, over on the right just below the edit section, this is going to be an edit button. This can also make use of the same classes so paste in a td. But this time this also needs a link. Since we don't have any pages to link to, we can just leave the href empty. But we do need to add some classes for styling the text of edits. Then back to our classes, we can start to add a different texts color, text indigo 500, and also a darker shade once you use a hovers over this section. Text indigo, and this time we'll go for a value of 900. Good. This is all working, and this is our first item. You can now go ahead and add as many items as you'd like to. We have multiple images supplied in the images folder. If you wanted to practice, you could either type out all of this section again, or you could copy and paste this full row section and then change the details inside. The easiest way to do this, if we go to the table body section which we just created. Then inside, we need to directly copy this table row, so copy all of the contents, the closing table row tag. Copy this. Just below, there is a new one just inside, and we'll go through this once more. This one's going to be for the strawberry smoothie. Take a look. Rather than mango, we'll change this to be strawberry. The active button is fine. This still it needs to move to its category. You can change the price if you want to, but I'm just going to leave this as it is. All we need to do now is just to change this image, so scroll up. This time, we want to change the image source to be the strawberry.jpg, and also change the old text too. We won't make this video really long and go through all these options, but you can now go ahead and add as many of these as you want to, and make use of the images inside of the folder. But just before we finish this video, we can also add a dividing line between each one of our items. We can do this if we locate the table-body section, which we created at the start of this video alongside the background, add a class which is divided-y. Straightaway, when we save this, we see the line is being placed between each one of these items. We can also change the color of this divide too. All we need to do is to use the divide prefix and then add any color. I'm going to use gray-200. This divide is really useful for adding a dividing line between each one of the child elements inside of here. As you can see, we can make use of the horizontal or the vertical divides by using y or x. A handy thing about this divide, is it will only add a line between each one of the elements. It wouldn't add a line at the beginning or at the end, which would happen if we use something like a border bottom. If we did also want a dividing line between the table head and table body, we could also add the same to utility classes, but this time to the parent element. Now in this case, the parent is the table, so copy both of these utilities. The parents our head and our body section is the table. I'll locate this at the class attributes, and then we can paste in our utilities. Then over on the right, we can now see this utility is placed the divide between the head and the body section. Good, we're getting somewhere now. There is just a little bit more content to add just below this table. We can't carry on with adding more products if you want to. Then once completed, I'll see you in the upcoming video.
12. Pagination Section: The final piece of content on this mobile view over on the right is going to be the small section down at the bottom. We have some text which is saying how many products we're showing, how many products we have in total, and also the section to flip between each one of these pages. On the small screen view, this is stacked vertically, so we have the text on top and then the pagination at the bottom. We need to insert this section down at the bottom, so if we take a look for the closing main tag and then just above this final div. We can then place in a new section for all of this content, starting with the p elements, which is the text. We'll say, showing 10 of 108 products. Remember, this is completely fictional, so you can change the numbers. Next, the unordered list, our first list item, and then each page can be inserted as a link. We don't have any pages to link to, so we can keep this empty, and the first one is the number 1. Let's copy this and paste this in to create four different links. At page number 2, page 3, and also 4. Save. There's all content down at the bottom. Remember from the wireframe that's to the left of this number 1, we have the left angle bracket, and then to the right of the number 4, we have the right angle bracket. What we're going to do to insert these is to include a span. We'll insert this inside the list elements and just above the number 1. We can insert this with a HTML entity, use ampersand LT, and a semicolon. To give this some space in it to our number 1, also add the class, which is margin-right, and the value before. Let's go down to the last list item. This one is going to go after our number 4. The span, the entity this time is the ampersand and GT greater than, the semicolon. This will also have some margin. But this time, we need to place it on the left. Let's now get to work on the layout of this section, and if we start at the main wrapper, we can make use of the flex-box. Control this on the small and the large screen view. For the small screen, like most of the content, this will be laid out as columns. The items will be in the center. Add some spacing on the top and bottom at the padding y-value of six. A text will be a little bit smaller, so we use text-SM, and also a lighter weight too. The text just below is fine, so we'll move on to the unordered list and the numbers need to be placed across the page. This will also make use of the flexbox. The default flex-direction is row, which places these across the page. We'll add some space into the text above with mt-4. There's not a lot more left to do for this section, we'll just add some space in it to these numbers. We'll do this inside the a-elements and the class of p-2. We can also copy this and add this to each one of our numbers. Good, so just as a finishing touch for this section, we're going to highlight this at number 1. This is just to let the user know exactly which page they will be on. As ever will do is by adding it some utilities. First, we'll change the text color to be gray, a shade of 100, the background would be bg-indigo-500. The hover effects we'll also make this an indigo color. Well, just like we did with the edit button, this will be a slightly different shade. The hover state for this element, the background, indigo-400, and run off the edges with rounded-full. Good. This is the final section I'll complete and also all the content which we need for this project. Going forward, what we're going to do is make this content more suitable for larger screens, and also learning about more of the features which Tailwind has to offer. Just a few little things though, before we move on, starting with the background for this main section, let's locate the opening main tag, which is near the top of the body. That's this side and the main section. Place in a class, which is going to be bg-grey-200. We could keep it simple like this if we wanted to and add a single shade of gray or any other color. Or, if we wanted to, we could also set this up as a gradient. Gradients are available in regular CSS and allow us to blend between two or more different colors. You can go extreme and blend between two opposite colors, but I'm going to keep things nice and subtle and change between two similar shades. The way we could do this, instead of the gray color, is to set the background to be a gradient, followed by the direction of the gradient. Mine is going to be to-r. This will change color from left to right. If you wanted too, you could also change this to be the top, the bottom or left, a long way to combining them too. For example, tr would be the top right, and tl would be the top left with a space between. We then use, the to and from to set the colors which you want to use. To make them all visible, let's add a red and blue value to begin with. We'll say from red-200, and then we'll go to a blue value of 100. This now makes it more visible. We have the red color, which we started from over on the left, and then we move over to the right direction and transform this to be the blue color, which we see here. But as mentioned, I'm going to keep this a little bit more subtle and change both of these to be gray. But do feel free to play around with any of these colors or any other pieces of style in which you want to. Moving on, we also need to add some space in just above this table. If we scroll down just a little bit, we can see we have the container which we created earlier, and this is used to wrap our buttons. Add some spacing, we can add some margin onto the bottom of this section with a value of six. To round off this video, just like we have done with this number 1 at the bottom, the highlights of the user that we're on, page 1. We're also going to highlight the product link at the top. This is because we are on the all products page, so it makes sense to let the user know which page is active. Put this back to the editor and scroll up the product's link at the very top. Then, inside the classes, we'll start by adding the background to be gray-500. This now lets the user know that the product's page is now active. The small screen setup is now complete. Coming up, you will learn about more of what Tailwind has to offer, including responsive design.
13. Changing Layout With Breakpoints: Responsive design is not just a nice thing to have on modern-day websites. It's an essential part of development. We need to make sure our design looks good on small screens, right right to a large desktop size. Thankfully, since there is thousands of different screen sizes out there, we don't need to create a separate design for each one of these sizes. What instead, we do need to apply some sensible rules to cover is for all screen sizes. Without regular CSS, we have access to media queries. A common use for media queries is to section off certain styles to only apply to certain screen sizes. And Tailwind also has built-in utilities for this two. An important thing to understand is that all of the utility classes we have already applied will apply to every screen size. You can think of these as general base styles. Building on top of these. We can then add specific styles for certain screen sizes. Looking at this top row, for example, bear in mind that all of the current styles we have are applying to all sizes. Then once a browser hits a width of 640 pixels or above, we can add new styles or override the ones we already have. We maybe want a bigger font, more spacing, or a complete layout change. For these changes to apply, we use the same utility classes as before, but with the SM Prefix. Since we are working with mobile-first, these styles will apply all the way up to larger screens too. Unless we again override them by using another prefix, such as LG for large screens. Each one one these browser sizes is called a breakpoint. Since this is the point we could change the styling or the layout. We already know from this wide frame how the biggest screen view will look. How do we decide when to change the layout? Well, this is something which you do need to judge for yourself depending on each project, but a simple rule is to start with a small screen and then scale the browser up and make changes when the layout begins to look too stretched or broken. For simplicity, I'm just going to deal with one single breakpoint change, which is going to be at the large size , as you want to. Its layouts will basically go from having content stacked vertically, we're having our main two sections side-by-side. Moving on from this small screen view, I'm going to make a little bit more space, and if we go into the developer tools with "Right-click" and "Inspect". If you start to make the browser large or small inside the DevTools, you'll see on the top-right corner, we can see how wide it is in pixels. Currently, the layout looks pretty fine, when we are around 600 pixels. If we are up to 700s, 800s, everything still looks fine on a soft tablet screen view. However though, if we start to get maybe around 1,000 pixels or above, some around here, we can see, we start to need a layout change. It's this large screen size which is 1,024 pixels, which I'm going to use to create a layout change. Let's close this down. If we go into the code, into our index page, and remember the body section up at the top controls the layout of our two main sections. This is the pattern for both the side, which is this top area and also the main content too. It controls this using the flex-box and set them currently, to a column layout will become changes to be a row on larger screens. The way to do this is to use the breakpoint prefix and in my case, it's with a large screen view. Then all we need to do is to add our utility class. This will change this to be flex row and if we save this, refresh the browser, these two sections and are placed in a row. We can also see the breakpoint take place if we shrink the browser down to the smallest size. This will then make this back to the column-style layout. What we now need to do is to size our two sections, since this doesn't span the full width of the page. To size the aside, and the main sections. We're going to make use of the width property. We know we can set how wide these sections are in rems, or an even better option for these sections is to use fractions. What we need to do is to first locate the aside. Then we can set for the large screen view, a width equal to 1/4. Go down. Let's locate the main section. After this, also targeting the large screen views. This will fill up the additional 3/4 of space. Now 3/4 and 1/4. Let's go live inside the browser. We don't need to keep refreshing. We can see this takes up 1/4 of the screen space, and this side takes up the remaining value. This will also stretch if we make the browser wider or smaller to always be in proportion. Now we know we're working with the full-size desktop screen. It would be better on this view if all the content stretched vertically to the full height of the screen. We can do this if we go to you one of the sections such as the aside and back into the classes. Again, this will always be targeting the large screen view. We can set the height to be equal to the screen height. This will set the height to be 100vh, which is the full height of the viewport. This looks a lot better. We now have a full height sidebar. Also since the main section is long side is also followed the full height too. As for main main layout change, you can add more breakpoints if you want to. Next, we're going to focus on the content inside of these two sections.
14. Large Screen Styling: The y frame shows on the large screen that in the sidebar section, links are aligned to the left-hand side. We're going to begin there, and then move down through the rest of the larger screen styles. As we know, these links are inside of the UL section amongst the assigned content. Let's locate. A lot on other list. We already have the class attribute in place. All we need to do is to start with our large screen styling. The small screen, we do already have some space on the y-axis between each one of our list items. We will now have more space available. I'm going to up this to be a larger value. Space y, the value of eight. The text is going to be left aligned as we've just seen in the y frame. Now, I have some more space in between each one of these items. We can also add a little bit of margin on the top and bottom. Give me some space from the title on this icon. We'll do this with a margin on the y-axis and a consistent value of eight. This is better, but we also need to align the settings icon too. Let's go down to our span which wraps this section which is down at the very bottom onto the unordered list inside the classes or the large screen only. We'll set the text-align to be left. Good. This is aligned over to the left-hand side, but if you do look closely, this is slightly further left than the actual text. This also needs some padding to movies in line with the rest of the link just above. For this, we'll add a padding left value of two. Keeping this now in line with the rest of the links above. I think the sidebar looks pretty good. This is all it wants to do for this section. Now, let's move on to the main content of on the right. Since we have more space available, let's start with some padding around this all section. This full section is the main section, so let's go into the clusters here and toggle the large screens with a padding a value of four. This looks a little bit better. The next thing to do is to move the avatar over into the top right corner. All the user's avatar and also the name to be in the corner. Also the editor, we can look for this section. We need to go just inside of the main section. This is the first div at the very top. There's not a lot to do with this section because we already have the flex property set for this section. All we need to do is to override the layout for the large screen view. We can do this by adding justify-end. Let's move this over to the top right-hand corner. This is the equivalent of certainty justify content property to be equal to flex-end. Moving down, we have the All Products title and also the buttons which I'm going to place alongside each other on the same line. Just a little bit further down. Have our title on this container for the buttons. This is the surrounding div section just here. As we said with the comments earlier, this is the container to the line, the buttons and also the heading. Let's add some classes inside of here. The large prefix on and since it's already makes use of the flex box and flex column, all we need to do is to make this equal to flex row. Let's now place this both of our elements on the same row. But if you look closely, the heading is a little higher than it should be. This is because of some padding we have at the bottom from the small screen view. For this neat place in an override. This is the original margin on the bottom we have here. We need to move this for the large screen view by setting this to be equal to zero. Save. This fixes the alignments, and also now, we have some more screen space available. We can make the text a little bit larger. The text. Let's go for extra-large. Good. Finally, the spacing between these two sections. Since we're also using this flexbox for this section, we're placing the value of justify between. Pretty much got the top section where I wanted to be. The next item on our list is this table. The table is not too far away from where we need it to be. However, though, it would be nice to be full width of the screen. Let's go to our table section, which is just here, and Tailwind provides us with a class called min-w-full. Make this the minimum width of the screen. If you wanted to, we could also place this behind the large media query. But since there always needs to be the minimum width of the screen on all screen sizes, this looks good on the small and the large screen view. We're almost there now. The final section is this number of products and the links at the very bottom. All I'm going to do for this section is place both of these items on the same row. Head to the bottom of the project. This is the wrapper section. Like some other sections, since it's also uses the flexbox and the flex direction of column, we can change this to be the flex direction of row. Let's move onto the same section, but we still need to add some spacing in between both of these items. Also, remove some of the default margin we have on the top of our links. First of all, we'll deal with the margin at the top of our unordered list, which is just here. We can override this. To be margin top zero for the large view, meaning, all we need to do now is to justify the space to be in-between both of these elements. We do this on the wrapper. At the very end, just after we set the flex-row at the large screen utility of justify between, and this is now exactly how we want it. This is all now done for the large screen view. You can see how easy it is to change a layout and a content with just a few overrides.
15. Using Custom CSS & Directives: You Tailwind utility classes has us covered for most use cases. This is pretty flexible because generally, one Tailwind utility class is equal to one CSS property. What about if we also wanted to add our own too? This is also completely possible. We can do this by creating our own style sheets. Into the project and open up the sidebar. Then alongside our Index page, create a new file. This one is the custom.css. Make sure this is alongside the rest of files and folders. Then inside here we can add any class as an example. Let's call this the custom which will set the color to be orange. This is just regular CSS like we would normally write when we weren't using Tailwind, and this will set the text color to be orange. Then just like a regular HTML and CSS project, we can include this in the head section with a link. Just blow our Tailwind CSS file, add in a new link. The href is just the custom.css This should now be our file link and we can test this. Let's go for our level one heading and add the class of custom. Give this a save and over to the browser. Now we can instantly see that this custom orange class has applied to our text. This works and if you wanted to, you could include multiple style sheets into a project. Sometimes certain plug-ins or libraries have their own style sheet which you need to add and you can do it in this exact way. Or if you wanted to, instead of having our separate files in its customer's CSS file, we could instead merge these custom styles into the Tailwind file. We can do this with a terminal command. If you don't already have a terminal open, go to terminal and then new terminal inside a Visual Studio Code. Then from here, we're going to learn a Tailwind command, which is npx tailwindcss. Remember we use any tailwind CLI for this. What we need to do next is -i and then place in it the file path for two different stylesheets. The first one is going to be./, and this is the custom.css. This points to our custom CSS file which we just created. Then we use -o, followed by the file path to our Tailwind CSS. What this will do, this will merge our custom file into the Tailwind file so hit "Enter" and we can run this command inside the terminal. Locate this. Out to our custom file and we can still see that our custom class is in place. However though, if we go to our tailwind.css file rather than all the thousands of classes which we had before, this is all being completely removed and replaced with our custom CSS. We can also see this if we go to the browser too, we don't have any of the Tailwind styles. We just have our custom orange color for the heading. Obviously, this is not right. We need a way to merge our custom styles with the original Tailwind classes. What we need to do is to go to our custom CSS file, and then other top we need to import Tailwind. To import Tailwind we have various Tailwind directives, all which begin with the at symbol. We have @tailwind, followed by what part of Tailwind we want to import. Tailwind is organized into different sections. Remember earlier we said that Tailwind has a set of base styles, which includes things like resets and styles to make our site look more consistent across different browsers. Well, to begin, we can import these base styles with base. After this, we'll also include the same Tailwind directive, but this time we're going to import the components. We'll look at the components very soon, but next, we'll go for the utilities, the same Tailwind directive, and import the utility classes. Finally, we can import the screens. Screens is the additional Tailwind utilities which begin with these screen prefix. For example, if we had a prefix begin with SM for the small screens, or LG for the large screens. Screens directive is optional. If we leave this out, it will be automatically added in at the end of the file. We only really need to include this if we had a use case for reordering this CSS. Now if we go back to the Terminal and run this same command, press "Up", it's entered to run this and then into our Tailwind CSS file, and then down to the very bottom of this file and we see our custom CSS down at the bottom. There's only 800 lines so I've figured we've got an issue just inside here. As our custom style at the end, we've got the screens, these should just be utilities. Save this and since I made a spelling mistake, I also need to rerun this command in the terminal. This is done. Let's go back over to our Tailwind file. You can see we have a lot more styles which are now more in line with the original Tailwind file. Down to the very bottom of this file is our custom class placed at the very end. This has been added in the same order as you've added all of these into our custom file. Then back to the browser and the Tailwind styles have now been reapplied. We can also remove our custom CSS file, save them back to the browser and our orange color will still apply because it's not being merged in with our Tailwind CSS. That's how we can create our own custom style sheets and include it with Tailwind. Next, we'll discover more directives, help organize our styles.
16. The @layer & @apply Directives: Previously in the Tailwind generated file. Down at the very bottom, we added our own custom class that is built. This all works completely fine and it's fine for a lot of use cases but we're starting to mess around with the order of the catholic created tailwind groups. Inside of our custom file here, we have all these tailwind groups just here. The Tailwind CSS is generated in the [inaudible] replace these in and then our custom class is right down at the very bottom. One way of changing the order of the generated file is to move our classes around just like this, so we can move our custom file to maybe just below the base styles. If we were to save this and go to the terminal and then rerun our generate command, this will then regenerate our Tailwind file based on this new order. Once this is done, if we go to the Tailwind file and now rather than being at the very bottom, we don't see our custom. So let's take a search. This has now moved up to line 603, which is just below all of these base styles. This could help us if we need to move some CSS around, maybe to avoid any overrides or just generally to place it in the order which you want to. An alternative to this is Tailwind also provides a directive to help with this, we can assign our custom class to be grouped with any of these over-sections. If our custom class was based off a utility of a component or we just wanted a base style for our project, we could merge this into one of these groups. The way to do this is with the layer directive, so we create the layer using the at symbol followed by the name of the group which you want to merge it into. Let's go for a base for this example and then open up a set of curly braces to insert our custom code. We can grab our custom class from before and add this inside of our layer. This can contain as many CSS rules as we want to include, so we could keep going, adding different classes and these will all be merged into. No, save this file and, again, in a terminal, regenerate this. That was our Tailwind file, this is on line 603 with our base styles. If we try to change this, maybe components then rerun our terminal commands. Let's see what happens after we run this. Once this is done and back to our Tailwind file, again do our search for a custom and this has now been moved down to line 637, merged in with the rest of the components. This is useful for reorganizing our custom classes. Another useful directive is apply and we use this to create our own reusable components. See this, let's do some cleanup work. We can remove this custom section from before and also in our index page, let's take a look for our custom class. This is just inside our level 1 heading and the orange color has now been removed. Back to this apply directive and this is used to solve a problem with using Tailwind. The problem is our HTML file can get really filled up with data and a lot of different class names. Also, we often duplicate the same classes on multiple elements. An example of this is all of these links in the sidebar. Let's take a look at our inventory, for example, and we highlight all of the classes here. We can see we've used it multiple times. We've used them for the orders, let's scroll down, we've used them for the analytics, for the customers, for the coupons, we have a lot of duplicated code inside of here. The applied directive gives us the chance to pull out all of the HTML classes and create a reusable component-like setup. The way to do this, if we copy all of these classes from one of our links, copy these and then go over to our custom CSS file. We can start by giving this a class name of our choice, so let's go for nav-link. This looks a little bit like a normal CSS setup but what we do need to do inside is to add the apply directive. After this, paste in the utility classes which you want to include, add a semicolon at the end, and then down to our terminal, re-run the same command, give this a few seconds to run and this should insert this into our Tailwind file. Let's copy our nav-link over to our Tailwind file, command or control F2 searches file, paste this in, and now have our nav-link down at the bottom. We've got the border-radius, which we can see if we go into our section here. This is the rounded section, we have padding, we have text colors, and we also have these hover effects too. We can see inside of our Tailwind file that these hover effects have been generated as our padding, as our colors, and also the color for the hover effect too. Now what we can do is go to our index page and rather than having all of these classes inserted, we can then use our custom class, which we just created, which was nav-link, and then we can use this in place of all of the rest of the classes just above. The analytics, the customers, the inventory, the orders. Be careful not to add this to the span elements and we have the products. I think this is all of the sections which we need to replace and now if we save this and go back to the project, make sure the browser is reloaded and all of the same classes still apply. We can confirm this if we remove the nav-link from any of these elements and this has now removed the CSS. Let's just reinstate this and to reorganize this, we can also add this into the component group by surrounding it in the layer directive. Just like we looked at before, go to our custom file and then put our place, our section from before, add in the layer directive, and we'll place this inside of our components, look at the braces and then we can paste the full section from before back inside. Down to the terminal, run the rebel command. Let's test this out in the browser, refresh. We shouldn't see any changes because all we've done is move this into the component section of the Tailwind CSS file.
17. Screen Reader Utilities: Welcome back. This video is going to take a look at a couple of useful screen reader utilities. I'm currently inside of the Tailwind documentation and in the screen readers section, which you can also find under Accessibility. Screen readers are important for accessibility and they read all the contents of our web-page, visually impaired users. So if a user is visually impaired and they can not see our website as intended, they can use a screen reader to read out the contents. We have two screen reader utility classes which Tailwind provides. The first one is SR only, and SR only heightened element from view. But it still keeps in place to allow a screen reader to read out the contents. We can then use Not SR only and this one will basically undo what we've just hidden and reinstated back inside the browser. So on the project, we're going to take a look at how to do this inside the table, curly inside of our rows, we have this Edit button at the very end. So we also maybe don't need this Edit title at the top. This is because, for a non visually impaired user, these Edit buttons are probably enough to tell them what to do. What we can do is to hide this heading at the top, but still allow a screen reader to read out if needed. Let's do this by locating our table. Go down to the required section and inside the table head, we need to go to the end of this section to find our Edit text just here. Inside the clusters, we can use the SR latch-only class. Save this and this heading is now being hidden from view, but it will still be read out by screen readers. Remember we also have the Not SR only Class 2, which will undo this. This can also be used to show and hide content on different screen sizes, but we don't need this for our use case. This is just a little change, but it could be really useful in your site, if we have a section which we need to hide, we'll still keep in place for screen readers.
18. Deployment: Once we've finished our sites and we're happy with the contents, we can then deploy the site using a service such as Netlify. If you want to, you can make more changes and customizations to this project. First, I'm just going to leave it as it is. Netlify makes it really easy to make our projects go live on the web. To use it, head over to netlify.com, it's free to use. If you've not used it before, you will need to go ahead and create a new free account with this sign-up link at the top. Once you've logged in, you would be taken into an admin area, which should look just like this. If you have any current site which we used in the past, this will be available from this link about the top. To add a new site to Netlify, we have a couple of different options. If you're using GitHub, you can use this button at the top and link this to your repository. This has the benefit of it will automatically update each time we push any changes to that repository. Or a really simple way if you don't have a repository setup is to just simply drag over our project folder. This will go ahead and build our sites and then give us a link up at the top, which we can click on to open up inside of a new tab. Opens up. This will give us a live website link which we can share with friends and family. You can see how quick and easy it is to deploy your site using Netlify. We can also modify this URL too. If we go into the Domain settings, click on the "Options", we can edit our site name, let's say My super project, and then we can save this. Now we can click on this, open this up in a new tab. This will also point to our project. If you wanted to to a custom domain so we don't have the Netlify app at the very end, you can also follow the steps to do this with the Add custom domain button. That's it. That's how easy it is to deploy a static site using Netlify.
Chris Dixon, Web Developer & Online Teacher
