 What is going on everybody my name is Roddy and today we're going to explore Teowind CSS. I'm gonna super quickly powerpoint you and then we'll get started. So in short Teowind CSS is a utility for CSS framework packed with easy to use predefined classes. Some of the benefits include not needing to spend time coming up with logical class names, it uses the approach of use what you need and it's easy to customize. The negatives are messy looking markup, you have to learn a little syntax and it's up to you to follow the accessibility best practices when adding interactive behavior and last but not least I wanted to mention a few useful resources starting with the official documentation obviously. Teowind Play which is essentially a playground where you can mess around with Teowind. We have hero icons which were designed by the Teowind CSS and we have Teowind blocks which is free resource for ready-to-use Teowind CSS blocks. That's pretty much it. Let me know in the comments below what you think of Teowind CSS and now let's jump on the computer and get started. Hey welcome everybody and let's get started. The first thing I'm going to do is create a new project folder and I'm going to call this one Teowind CSS. Inside this folder is where we're going to be adding all project files. I'm going to open this folder with Visual Studio Code super quickly. Here is Visual Studio Code, I'm going to go to file, open and select the Teowind CSS folder that we just created. To get started let's go to TeowindCSS.com and click get started. So today I'm going to be using the Teowind CLI but you can also use the post CSS. You can choose a framework or you can play with the CDN. As we're using the Teowind CLI you will need to have Node.js installed on your machine and if you don't you can just navigate to Node.js.org, download Node.js for your operating system and follow the installation instructions. Now let's start by installing Teowind CSS. The first thing that we need to do is install Teowind CSS via NPM. To do this we can use the following command here. So I'm going to copy this, I'm going to open Visual Studio Code, go into the terminal and click new terminal. You can also do this with your command line or PowerShell whatever you wish. As long as you're a CD to this folder it should be good to go. So I'm going to right click to paste the code in here which is NPM install minus the Teowind CSS which means that this is going to install Teowind globally. The next thing that we need to do is NPM Teowind init and this is basically going to create this Teowind.config file for us. So let's do that, paste in here and press enter, job done. The next step that we need to do is actually configure or template paths. These are going to be where or HTML and JS documents are stored. So it's pretty much up to you how you want to structure your project but for this example I'm going to use exactly the same file structure in here just so we're on the same page. So I'm going to copy this, I'm going to open the Teowind config.js, let's remove this a little bit like so and I'm going to replace the content. So this means that I'm going to have to create this source folder and inside this source folder I'm going to have my HTML and JavaScript files and I'm going to show you how this works in a second. So let's go back and have a look what else do we need to do. Step number three is adding the directive so or CSS. So we need to create the source folder and inside this source folder we're going to have to create an input.css file and add detail with directives for each layer such as base components and utilities. So let's copy this, go to our project folder here, create a new folder, source like so and then inside here I'm going to create an input.css like so and paste the code that we just copied. Save this, close it as we want needed for now and let's have a look at the next step. So the next step is to actually start the CLI build process and I'm going to explain this. So let me copy this first of all and let's paste it in the terminal. So inside here we have npx teowind.css and we are basically looking for changes every time we make a change on our HTML file which we're going to create in a second we want to basically take the input CSS file from here and and build it into a folder called dist with a file called output.css. This is the file that we will need to include in our HTML as well so this is going to be this is going to be kind of like the process file and the last thing that we have is watch me which means that we want this to keep watching for changes if you're familiar with scss is pretty much the same thing. So if I press enter this should give us a warning and the reason for this is because we actually haven't got any classes to in our HTML document and that's because we don't actually have an HTML document but what's happening here is that teowind has taken the input CSS and it's compiled or output inside here. As you can see let me just move that to the bottom as you can see we have some basic teowind styles in here which is great. So let's close this and by the way this is going to be running from now on so let's close this let's go back to the installation guide and the last thing that we need to do is create or index.html page inside the source folder. So I'm going to copy this example just to speed up the process and explain everything. Copy this let's go back and inside the source folder let's create a new file called index.html like so and let's paste the HTML. As you can see the teowind CSS automatically started a rebuild process because there was a change in the document. Every time I save it's just going to rebuild it which is great. Let me first of all explain the HTML and I will show you what's happening. So we have a very basic HTML in here and we have a link to the output.tss which is in this this folder. We also have an h1 tag inside here which has three classes text 3xl, font bold and underline. So technically speaking we should be able to run this project and view in no browser and for this I'm going to be using an extension so if you go to extensions the extension is called a live server you can install it basically kind of like saves you time so you don't have to refresh the page every time you make a change. So I'm going to be using this to start a local server. Let me just go to explorer and I'm just going to click go live this is going to open the browser somewhere here we go and as you can see we have had a world and if I was to inspect the page you will see that we have some basic teowind classes in here which is great. All right let me close this let me zoom in and let's go back and let me explain a few other things. As I said every time we refresh the css is being rebuilt and one thing that I wanted to show you is that the teowind css only adds the classes that we are using so if you know those three classes the underline, font bold and the text 3 xl and if we go to the dist output.css scroll right to the bottom you'll see that we have those three classes in here so these are only added because we have them in our html file. Let's close this okay before we begin writing html and css I just wanted to show you a super useful extension that you can install which is called teowind css IntelliSense here you can go to extensions and install this and I'll show you why this is super helpful to have so if I close this super quickly and if I go back to my project and if I hover over on any of the teowind classes it actually tells me what this class does. Obviously underline is very descriptive so this one adds text decoration line underline, font bold adds font weight of 700 and text 3 xl adds a font size and a line height so this is super useful it also shows killers and so on speaking of killers let's have a look at how we can use them. So if we go back to the teowind documentation and if you want to do a quick search you can do control and k so what I'm going to do is scroll down and I'm going to show you under customize click on killers and inside here you will be able to see the full library of killers that teowind css comes with. So there is a lot of choice in here and if you want to use any of those killers you can pretty much choose the name so for example let's say blue and you can choose the number so let me show you if I wanted to make the background of or page blue I can do I can give this body a class name of bg as a background and then dash blue and then dash the number of the blue that I want so I think I wanted like something like 700 and as you can see the extension is already working for me it shows that this is a blue color and if the rebuild process is successful we can go back and you will see that the page that we have is blue obviously I've zoomed in quite a lot that's why the font is so massive but that's how we can use the colors so for example let's say I wanted to change the text to be that cn 50 so what I can do is I can do text dash cn and then I can choose 50 and as you can see the extension is already working for me here and it's giving me a lot of options and I can just choose from this so I'm gonna put cn 50 save this and if I go back you'll see that the color has changed and you can pretty much do this with anything for example border colors anything that you can think of that you can put color on you can do that obviously you will have to go through the documentation as you work on your project and find the things that you need I'm not going to be able to cover absolutely everything but that's how you use the colors now in most cases you probably already have branding colors in mind all right if you go to colors and scroll down quite a bit there is a lot of examples but this is one of them so if you want to use custom colors this will completely replace the ones that come with terwin css and that's absolutely fine if you have your own branding so I'm gonna use this as an example and also make sure that you put your transparent color in here and current color because that could become useful as you are developing your website so I'm going to grab the whole thing here just to save you some time and paste this inside the terwindconfig.js and this goes under theme here I'm gonna list it like that close this and let me explain what's happening here inside here you can pretty much name your colors whatever you like and you can add a limited amount of numbers and basically give them a hex code so technically speaking if I save this my colors will no longer work from terwin css and I can only use those colors in here I can name them whatever I like and I can give them whatever and value I like let's say for example I want to give my background color of purple so I can use this name and I can just go background purple like so and that should work here we go and let's say I wanted to change the text to something else like the silver I can just grab this and I can replace it here text silver that's it here we go that's it the text is now silver which is perfect obviously there is a lot more that you can do it Killes but this is the basic over the next thing that I wanted to show you is the font configuration so if we go to team and scroll down as you can see here we can add a custom font to do this I'm gonna grab this super quickly go back to our terwin config file and just add it in here obviously I don't want this font so I'm going to change it slightly let's go to google fonts super quickly okay and the font that I want is called outfit so I'm going to click on this font here select the weights that you want so for example I can choose regular let's do that and I can choose both from here let's do that and if you go here to view selected families you will see the selected families that we have and let me zoom in a little bit and then I can grab the link from here and put that in my html festival so here it is underneath here underneath my css let's indent this a little bit like so save it and also I need to grab the name of this and this is sans serif so I'm gonna grab the name of the font family and replace it here and sans serif is the default so that's gonna stay the way it is so this is the first font obviously you can add more if you wish with a comma and that's it so technically speaking if I save this and if I save the index dot html page the font should change here it is the new font has changed I can see the difference maybe I should have used a totally different one the next thing that I wanted to show you is the breakpoints and then we're gonna build some responsive examples super quickly so for example if you go here under core concepts and responsive web design basically if you want to build adaptive user interfaces you can use the following breakpoints which come with tailwind css but you can also modify them I'm not gonna modify them now but I'm gonna show you how to use the default ones so we have small medium screen large screen excel and double excel and these are the minimum widths for each breakpoint so you can pretty much pair them with whatever you like here is an example of an image so on mobile the width is 16 on middle screens the width is 32 and on large the width of this image will be 48 let's do the same thing with the h1 that we have so what I'm gonna do here is on smaller screens this is gonna be the default value text free excel then on middle screens I want this to be text for example six excel and on large screens I want this to be text maybe nine excel like so and safe so if this has worked let me go back I think I need to zoom out a little bit for this example to work okay so this is a big screen so the font is quite big but if I scale down my browser super quickly look what happens the responsive breakpoints are kicking in so small medium large so this is how you can use the responsive breakpoint and you can use them on pretty much anything as you saw here the example with the image you can use them on everything the beautiful thing is that you can use them with pretty much everything that makes sense to use breakpoints one thing that I wanted to show you is that nothing in tailwind css is actually start as the food what I mean by this is for example h1 let's do a couple of headings so heading one and I'm gonna do heading two three four five let me just change this super quickly so we have five headings one two three four five and if we go to the website you will see they will look the same so obviously I'm zoomed in quite a lot now but as you can see they will look the same so what that means is you need to style pretty much every single element manually this can be a good thing but also it could result in duplicate classes and that's why it's probably best to use tailwind with kind of like a component based framework such as anglia react svelte view and so on so saying this we can definitely style them the way we want just like we have in here so maybe I can do text let's say class text nine excel and maybe for the second one I can do a class of text six excel and so on so let me zoom out a little bit and as you can see then I'll start of course I can give them a text color as well just like so and I can make them responsive with the responsive breakpoint so this is how this works and now let's build a super simple header just to show you how you can do responsive web design with flexbox so I'm gonna remove all this and I'm gonna make the rest in here so let's build a super simple header and my header and I want my header to be full width this means that I'm not gonna use the container from tailwind but we'll get to the container in a second so let's start a header so I'm gonna use html5 and start a heading here and for this header all I want is a logo so I'm gonna give it a link href with slash because this is our home page and then I'm gonna have a few classes here and this is gonna be my logo all right let's create a very simple menu and you can do this however you like I'm just gonna build it with a simple URL and inside here I'm gonna create a list with some links so inside the list obviously I'm gonna have a link and this link is gonna go it's just gonna be blank to be honest and I'm gonna be adding a few classes to the links and let's say we have home and let's duplicate this super quickly let me put in one line and let's duplicate this two more times and we're gonna have we're gonna have about and we're gonna have contact okay save this and let's have a look at how this looks so at the moment we have probably it's probably best to remove the hello world as well let me just remove it and I am zooming quite a lot but the moment we have logo and we have all links so I want the logo to be on the left side and I want the the menu on this to be on the right side and when we scale down to mobile I want to turn this into a mobile toggle I'm not gonna write the JavaScript but I just want to show you how the responsive design works to do this we can use flexbox so what I'm gonna do on the header I'm gonna give it a class of flex and I'm just gonna do justify between save this and as you can see the logo is now on the left side and we have the navigation on the right side which is great the text doesn't look great so I can do text white maybe we can give it a little bit of padding on the y-axis so something like four and padding on the x-axis of let's say eight and then that could be that could look okay let's have a look as you can see this is getting better now for the logo maybe you want to make this a little bit bolder so what we can do is use text large dash large and then maybe I can do it with font bold like so save this as you can see the logo is now bolder and if you want to style the links what we can do is also convert this into flex so I can do class flex and we can do flex row and this will hopefully put every single item on the same row as you can see but we have a little bit of an issue here where there is no space between them and to fix this we can use gap so with the gap we can just do gap and choose a number nothing specific here maybe we can go gap four there is safe gap four and as you can see this leaves a little bit of a gap and that's looking good the next thing I'm spotting is that the logo and the items here are not aligned so what we might have to do is give this a flex item center so items center like so and maybe we can also align them in the middle like so and save let's have a look at how this works think yeah I think that's now in the middle the look in the middle now which is great a little bit small but that's not a problem okay that's already looking good but let's have a look at how we can style the buttons for example so if we go to home I can give it a background of bogum which comes from hotel in config and if I save this you will see that this gives it a background of bogum now accessibility is not great here obviously I might have to change this to a darker color so I can maybe do text color to be midnight I'm not sure how this is gonna look and also the padding wasn't great so maybe we can do padding y of two and padding x to be something like four let's have a look at how this looks that's already looking good and one more thing I wanted to do is maybe we can give it a nice rounded edges and to do this we can do rounded and maybe rounded md which is kind of like a bigger rounded radius as you can see set this and let's have a look did I save here we go we have rounded corners now which is great so the next thing I want to do is when we shrink down the browser so if inspector put the responsive mode on here and if shrink down the browser I want the menu this menu to disappear and I want to put a burger menu so to do this we can actually we can hide this on small screen so because we are mobile start with mobile first what I can do is just put hidden and then the flex here I can do md flex so what this is saying is that on mobile this is going to be hidden but on middle screen it's going to be flex so let's have a look as you can see mobile it's hidden and middle screen it's coming up so in the same way I can add an icon here with the hamburger menu so let's create that what I'm going to do it's just a button for now so let's do a button and this button is going to be an SVG so so Terwin CSS has its own library that they've developed they've designed which is called hero icons okay if you go to terwincss slash resources and if you scroll down you will see these hero icons they look amazing so if we click on them no more we can actually grab any of the SVGs here and I'm going to look for menu and the one that I want to use is maybe this one here so I can copy the SVG and I can put this SVG inside the button let's save this and let's have a look what we get so this icon is white so that's why it's showing I'm not able to zoom in here maybe I can zoom in like so so you can see a little bit okay as you can see this icon is white and it's added in here but it's also not disappearing so what I want to do on when we go to medium screens I want the icon to disappear to do this we add a class to the button so class and just like here we can do exactly the same thing but the opposite so on middle screens we want to just hide this so hidden middle screen is hidden save this and to be fair that's pretty much it so if I go back and if I open the browser like so you will see that the menu disappeared and this one appeared and this is how you make the responsive layouts happen so let me show you one last example in the next example I'm gonna show you how to use the container and I'm gonna show you how to use grid okay we had our header full width in here but what about if you want to containerize your website well you can use the container class now so let's do container like so and put something inside here then like so and save it so this is going to containerize or layout and if I put maybe border 2 just so you can see how this is behaving you will see that it's full width on mobile but when we go up it you can see the break points in here and at the moment it's not in the middle and the reason for this is because we need to do that as well so there are two ways of doing that you can either do it with the MX auto which is basically margin zero auto so if I was to put MX auto this should center aligning for us and the other way of center aligning the container is to actually go to the config and you can go down here under maybe from family and add container and then you can put center to true and then maybe we can even give it a padding if you wish to your left and right so let's say padding of two ram like so let's save this and I think I broke my 10 win tss so I'm gonna have to restart super quickly and it's because I missed the comma save restart super quickly and we should be good to go and now if I was to remove the MX auto save this the container should be still in the middle and it should have a padding of two rams on the left and the right side of it so this is how the container works obviously you can modify to work however you like with the responsive variants but as a default this is how it behaves using those breakpoints the next example I want to show you is using grid so what I'm going to do I'm actually going to use this container I'm going to remove the border for now and I'm going to create a few cards so what I'm going to do is wrap all of those cards in a grid element okay let's create a div element with the class name of grid so grid and maybe we can add grid calls to be two to start with and then we'll modify so let's start by adding two very basic cards so I can do maybe let's create a div with background of white and maybe rounded mx md sorry which is around the corners a little bit more rounded corners in this case and then we can have dot padding padding to the x axis of dash four and then we can have padding of the y axis with four or something like that and then maybe we can have a little bit of border just so you can see what's going on and we can change the border color to border midnight boom just like that let's add an h2 in here just to make it look a little bit pretty so it makes sense and let's say category category and for this h2 let's add a couple of classes as well so this can be tracking why this text we can set to xxs and then we can do margin bottom of one let's create an h1 as well and then this is gonna have a class name of title font text large text gray do we have gray text text silver and margin bottom of three then we can give it a heading of the wincss and let's create a paragraph in here paragraph with the class of leading which changes the text line height as you can see let's put this as text small and margin bottom of three and for this i'm just gonna put some lower version text cut to view well wrap just so we can see and last but not least let's create a button this button is gonna have a class name of background midnight text small and then text dash white and then round it and the just so we can stay consistent padding to the x y axis for padding to the y one and and save so this is gonna be click me and now we can duplicate this card super quickly and let's have a look at what we get so we have the grid the grid the grid is set to two columns and we have two cards so if we go back you will see that we have the two cards in here the text is a little bit hard to read so maybe i need to change that and i need to have a little bit of a gap so let me do that so gap we can do gap of four we can use maybe text midnight for the headings and let's put that one in here as well and let's have a look at how this looks oh and one thing that i noticed one thing that is really good about the extension that we're using is that it tells you if you have duplicate class names so obviously this is i have i've put the text to be silver and then i've put the text to be text midnight which is not good so i need to remove the silver from here which is awesome and i need to remove it from here so i'm kind of glad that this happened and now let's save and as you can see we have two cards now let me show you what happens if we add a few more cards so i'm going to copy those cut and paste them like so and let's have a look at what happens so first of all if we go down we only have two cards on every single breakpoint but what if we wanted to change this what if we wanted to have four cards in one round on large screens and maybe two on medium and so on so for example on our grid we can do grid calls one from above and then for medium screens maybe we can do grid calls two let's say for large screens we can do grid calls four let's save this and let's see what happens so on large screens we have four columns which is awesome and if we go down a little bit like so we have two and if you go even further to mobile we have one and this is how you can use responsive breakpoint with grid it's super easy to do it takes a couple of seconds and the last thing i want to show you is how you can actually create your own classes by standing the by standing the tailwind ones so for example let's pick this button here so i can say custom button now i can use this class name let's go to the css the input dot css and inside here i can put custom button and i can extend the tailwind css classes inside here so i can actually use them by doing add apply and then i can say maybe i want the background to be purple for the buttons like so and maybe i want for the buttons to have a shadow so apply and shadow md which is kind of like a bigger shadow so let me save this and let's see what happens so if we go back to the website as you can see the color has changed and we have a little bit of a shadow so this is how you can kind of like extend make your own classes using the classes predefined from tailwind and if i wanted to do a hover for this maybe i can just do custom button and i can just do hover and i'm not sure what color to use for this maybe i don't know bubblegum i think that would do so maybe you can just apply bubblegum and maybe we can remove the shadow from so let's have a look did i save yep let's go back okay i applied bubblegum but i didn't put it as a background so bg-bubblegum and shadow md okay that's it let's save and as you can see now we have a hover over and now i can apply this class pretty much to anything and that's pretty much everything alright this is gonna be everything from this tutorial i hope that you found useful it's kind of hard to cover absolutely everything but this should get you started i hope that you enjoyed it i hope that you learned something new consider subscribing to my channel and give me a comment below thank you very much for watching