Tailwind CSS For Absolute Beginners

so welcome again this is sebastian from codings a smart way comm and i'm back with a new tutorial today and the topic I'm going to talk about today is tailwind the CSS and tailwind is a new kind of CSS framework which is very popular at the moment and comes with a little bit of a different approach if you compare it to traditional CSS frameworks like for example bootstrap or material a CSS so the main difference here is that table winter CSS comes does not come with predefined components or predefined elements it comes with a set of utility classes instead so CSS utility classes and those utility classes gives you a lot of flexibility when it comes to applying your own custom design because you are using no predefined elements you're just combining a set of utility classes which makes it extremely easy to style components on your website on your web application user interface and this is what tail with the CSS is doing for you and in this tutorial we will start from the very beginning I will give you an introduction guide you through the process of setting up a new project getting tail wind installed setting up a CSS build process which is required for tailwind and I'm going to cover some practical examples of how to style various elements on a website so you will be able to learn everything from scratch no prior knowledge about tail wind is required of course you should be familiar with CSS and HTML and that is all what is required and we will start with time went from scratch so I hope you will have a lot of fun and let's get started so first of all let's take a look at the pro website and you can find it and tail with CSS com so that's website you can find a link to the get started tutorial you can read more about tailwind you can even access a screencast if you like and here at on the start page you can find a quick example of how you can style by applying a set of utility classes a set of tailwind utility classes dealer design a custom component here as you can see which is optimized for running on different screen sizes so this is already a first example and we will use this website later on because when it comes to applying tailwind CSS utility classes if you quickly need to look up for example if you want the posit text huh - enter class here you would like to look after the corresponding documentation quickly you can start typing in the class name here and find a reference for that utility class very quickly here and you can see it's directly linked here with the documentation you can find examples of the users here and examples of how to apply responsive behavior for that class and yeah that's how you can access this documentation very easy and very quickly but first of all we need to to get started we need to SAP a new project from scratch and that is what I'm going to do in the next step now so back here on the command lines the first step I need to execute the set of a new project is of course create a new project folder by saying mcdeere naming it tail in wind - sample of a one like so then I'm changing into the newly created project folder and here now I need to create an initial package J'son file because I would like to use NPM as a package manager for managing my dependencies for using NPM scripts later on to run server and for all that a basic requirement is to create a package JSON file and this can be done by using NPM init init and - why for answering all the default questions just with yes so that this process is running quickly without any interruptions here and you can see it here that is the content which is now available in a package.json file which should be a way well here in my project folder you could see it here pegye start raisin that's the only file which is a Weibull so far and that is the content of that file okay now we can use the node package manager for installing some of our dependencies we do need and the first thing I need to install here is of course the tail winter CSS package and that is being done by using NPM install of a package name here is table when to CSS like so hitting or turn and you can see now the installation is running its downloading tail into CSS into a node underscore modules folder which is being created here as part of this process and once this is finished it is done and we can come to the next step okay great so next thing I would like to do here is to open up the visual studio code visual studio code is a code editor I'm using here of course you can use any other code editor you may like and opening up studio code here shows me the content of my project folder so far we have the package.json file here which is already opened here and you can see the dependency we have just installed the Tailwind CSS package is already listed here in the dependencies section of my package JSON file and we also see that we have the note underscore modules folder away well here and that is a folder where all the dependencies are being downloaded and installed into and the next step I would like to do now here or to perform here is to create a new folder here within my root project folder and that that subfolder I would like to create here is called CSS and inside that folder I am creating a file starts dot CSS and that file has been used for bringing in code which is needed for tailwind CSS so I need to bring in three so-called CSS directives tail with CSS directives and this is being done by using the @ sign here and then the first directive or it all starts was at tailwind and then I needed to specify which style package of tailwind CSS should be covered by the directive and I'm starting with the base package here and then the next one so let me quickly copy that here insert it a second and a third time and the next style package here is components and the third one is utilities and the reason why I'm doing that here is because this style statuses file now is that three directives inside is processed when executing the CSS build process here it's process was tailwind and tailwind is then going to replace those placeholders here those directors was a corresponding CSS code which is coming from the base camp and utilities package so that is a just placeholder and this placeholder is being replaced as part as of the build process which is later on executed and then the tail wood CSS code which is comprising all the definitions of the table and utility classes is being inserted right here okay so the next thing I would like to bring in here is a tail wind configuration file and I can create a tail wind configuration file by returning to the terminal or instead just using the integrated terminal and visual studio code which I'm opening up here and what I need to do here is I need to execute NP x tail wind CSS and then use option in it to create a new tail wind configuration file here and this process is just taking a second and you can see it's now completed and it's stating a created table configuration file table with config dot CS you can see to you I can find the Tailwind config dot ICS file right in my root project folder and opening up that file shows me the default content which is just containing an initial structure here but all the settings are empty later on we'll see a first example of how you can use that file here to to add pieces of tailwind configuration which are then being taken into consideration in the build process but that needs to be done later on and for now we will leave it in the initial structure here will not change the content and just move on because now we need to set up or further set up the CSS build process so that our project will be able or will be will contain the configuration and the dependencies which are needed to execute the CSS build process with segments so to to be able to SAP the build process which is required to use tailwind the CSS I'm installing two more packages two more dependencies here and I'm doing that from was in my integrated terminal here again and I'm using the NPM install command once again and the two packages are do need you are first of all the post CSS Eiffel CLI package and then the auto pre fixer package okay so let's run that command it's downloading and installing those packages both dependencies into the node underscore modules folder again at the same time it's adding those dependencies to my package dot JSON file as well and this just takes a second to complete so let's wait for this process to finish so here we are everything has been finished successfully the new packages have been added to the project and because I have installed post a CSS CLI I can now create a post CSS configuration file and post CSS is a tool we are using to execute the CSS build process and yeah just to configure the build process we need to create a new post CSS configuration file and that is what I'm doing here so let's create such a file and I'm naming that file post CSS config dot J s like so and you can see it here is this file is being created here right in the root project folder it's empty right now and now we need to bring in some initial post CSS build confer raishin right here okay so let's create the configuration here and I'm starting by saying module dot exports and I'm assigning an object here so I'm starting was in dirt in curly braces and inside of those curly braces I'm adding a property which is called plug ins right and I'm assigning an array here which is containing the list of plug ins I would like to use to execute the CSS build process so I need to insert brackets here like so and then I do need to say you require and then specify the name of the plug-in I would like to use and the first plug-in I would like to use of course is a table and CSS package and this table with the CSS package which is now attached to the CSS build process is Zen making sure and that for example the starts dot CSS file later on can be processed the directives can be recognized by tailwind and the corresponding CSS code coming from the table and CSS you packages can be inserted in the corresponding output right and I do need to insert a second package here and that is the output Pro fixer package like so this is making sure that needed prefixes are attached if if if needed and this is always a good idea to edit here to the CSS build process so I'm saving it here and now of course with that configuration file in place I can set up a build script and our dude in the package JSON file because a package.json file is capable of containing scripts which which can then be executed using the NPN command on the command line and I can now set up a script which is using post CSS and Xia was using of course this configuration file we have inserted here in the project and then the script can be used to execute the CSS build process here for my project so so let's open up the package dot JSON and you can find here in the packet dot J's and configuration file a section which is called scripts and that is exactly what I'm looking for and here we can just replace this default script here as a test script that is not needed we can just remove it and instead endured a script which we call built and the script is containing the following instructions or the following commands should be executed when running that script and that is a post CSS command here so the post CSS command takes the first parameter here that is the CSS input file which should be processed and we have just created the Stars dot CSS file which needs to be processed here so we are passing that over and I'm saying CSS styles dot CSS and then we need to specify a separate output file with option o so - oh here and the output file has been inserted in a new folder which is called build and we're naming it starts dot CSS so we have clearly separated the input files of starts dot CSS file inside the CSS folder from the output file which is starts dot CSS in the build folder so this is what is needed here so let's save it and now when we need to execute this script here we can simply go to the command line and say npm run build so built is the name of our script and hit return and now you can see the build process based on post CSS is running and there it is and you can see once a build process is being finished here and you folder is appearing here is adds as a build folder and the output file has been generated and inserted here in the build folder and I can now open an abscess tiles dot CSS output file and if I scroll a little bit down you can see here a lot of CSS code is inserted here and that is exactly what is coming from the table into CSS packages we have to file defined by bringing in our directives here so the base components and utilities tailwind package so those in this output file those directives have been replaced by the corresponding CSS code which is coming from tailwind okay so great so far our project just consists of CSS files configuration files and not to make use of CSS file CSS classes which are now available here in Styles dot CSS we of course need to bring in an HTML file next and I'm creating a new HTML file right here in the world folder and this file is named in tax dot HTML like so and I'm just inserting here a basic HTML structure here and then I'm going to say s as a title here let's say tailwind CSS demo and what I need to bring in here of course is I need to include the Stars daughter CSS file here from the belt folder of course because that is my output file with all the table winter CSS utility classes in the side and to be able to make use of those tailwind classes I need to bring it in here by using a link element here and I'm bringing in a stylesheet of course and the file name is passed out to CSS from that folder and so I have included here and now in the body section I can just bring in a little bit of content making already use of just a few tailwind utility classes just as a very basic first example so let's start with div element and I'm assigning a class of H 564 to define the the the width of the element here so inside that div I'm using another div here and this diff gets assigned a class of p5 for to define padding of four and an M - for a class as well to define margin here and then we're assigning a greenish background I would say and this is being done by using the utility class bTW from green - let's use a 600 class here so and then I'm bringing in some headline text here by using an h1 element and this text size is determined by using the tail winter CSS class text - chilly Excel to display the text in a larger font size it should be both so I'm using the font - bold class here and it should be displayed in white color so the text - what class here and the text is Taylor wind CSS demo like so and maybe let's add another div section here and again we will bring in a petting and bring in a margin again and a background color of green this time I'm using the BG - green - its 300 class - to assign a lighter green background here and I'm using the H - full class like so again a headline element an h2 here with text on green - 900 and the text here is have much fun using tailwind the CSS so this is the content I'm using here as just a very basic first example it's let's say fit like so and now I would like to just see what we get as an example by applying all those utility classes here in in this HTML code so to self this content to the browser I'm using a local web server here with life reloading capabilities and the name of this web server is life server and if you haven't used last server before it's just an NPN package and you can install it by just executing the npm install - g for installing it globally on your system command and then using the name live server here that is the name of the life server package and i have already installed live server so I do not need to execute this command right now instead I can directly use live server to surf the content here of my build folder and this is being done by these I'm using so my server command here and passing over the built folder so executing this and now it's saying okay serving at localhost port 8080 and I can directly click here on this link and to my browser Chrome is opened and it's pointing to port 8080 and you can see that is what I'm getting back so this is what is achieved by just applying this set of tailwind utility classes here I have already a very basic layout here of this website I have the headline here is a table and CSS demo and I have the text included here have much fun using tail went to CSS here was two sections displayed with a green background color the first one was a darker green and the second one was a lighter green so this is the first example and now we can keep live server running because if we are now going to change code this content here in the browser is being reloaded automatically and we can directly see the results of our code changes that is the advantage of using live server here okay however now we have the basic setup here we have seen a first example and now we can dive a little bit deeper into using tailwinds CSS utility classes and see how we can for example style various components by using a set of utility classes because just remember tailwind has no predefined components so you will not find a predefined button class for example or a predefined cut class for example like you will find it in bootstrap but instead we can combine utility classes in the same way we have done it already here for the first example in a similar way we can combine those utility classes to apply our own custom layer for example when it comes to styling a button and that is exactly what I would like to show you now so that you get a better feeling of how to apply those Tailwind CSS classes and style components was your own custom design your own custom styling by just using tailwind CSS classes okay so let's start was styling a button therefore I love turning of course to visual studio code the life server is still running we will keep that running in the background and opening up again index dot HTML and right here in this section in this second section I'm going to add a button now and of course I'm using the button element and I'm going to assign classes here and the button should be colored in blue so I start adding a class which is called BG - blue and I'm using a value of 500 here and each time the user is moving the mouse over the button as a blue value should get a little bit darker and to achieve that I can use Coover Curran and then assign a different class here which is b3 blue and this time a value of 700 so the text should be colored in white some using the utility class text - white here it should be a bold font and some using font - both here that's a corresponding class now I would like to assign a padding a padding of 0.5 wrap to the bottom to the top and to achieve that I'm using the table in class P or - - like so and I would like to assign a pairing of one ram to the left and to the right and that is P X - 4 and the button should have rounded corners so I'm using the rounded class here as well okay and now the button needs of course get text my tailwind but okay let's save it let's return to chrome again and you can see it here that's my Buckner that's a button with the styling applied I can Hoover over that button and it's changing the blue color a little bit into a darker blue and if I move the mouse away you can see it returns to the lighter blue and now you have a button component here and this button component is not start with a predefined button class instead we have applied that set of utility classes here and introduced our own individual button styling and you can now change it very easily by let's say use a red color here instead what save it let's return here it is browser and you can see now you have applied that styling which is now including a red background color for that button so very easy to apply those table into CSS classes and that's the first example now the second example should be for example a notification bar because in other CSS frameworks like bootstrap you have also pretty fun classes for styling navigation bars navigation components and now let's see how this works out and tabled by simply using again a set of utility classes no pretty fun notification bar component of course is existing integrant we have to combine utility classes again and this is what I'm going to show you next okay so let's switch back to visual studio code and back in index dot HTML right underneath of the button implementation let's insert the code which is then needed to implement the notification bar right here and it all starts with a div element again and here I'm assigning first of all on the Sun as a class of BG - blue - 902 just place a div element here with a blue background and I would like to send text inside the div so I'm using the class text - Center so and then we need a padding on first the padding - to the top and to the bottom I would say which is done by using the p1 class - 4 and we'd a pairing for larger screens I would like to to assign heading to the left and the right as well and to apply it only to larger screens and above I'm using energy here and then I'm applying the class P X - 4 like so ok so this is the diff element which is the basis for our notification bar implementation and inside that div element I'm using another div element here and this div element gets assigned again classes we will use a pairing of 0.5 rm4 all borders so left right top bottom this is being done by using the class P - 2 and we are assigning a background here again BG blue let's say a little bit of a light blue let's say 800 here instead of 900 s seen before then I'm using the atoms - Center utility class this class is used to send Affleck's items along the containers cross axis because we will use a flex layout here and next would give us a text color which is being done by using text - blue - let's say we use a hundred class here then we need to specify that the line height of the element should just be one and this is being done by saying leading none and I would like to assign a border radius only in cases we have larger screens so I need to use energy here again and I'm assigning the class of rounded 4 to assign about a radius of the maximum value which is available here then of course we do not need to forget to assign the Flex class here because we would like to use a flex layout here and then again in case of larger screens I would like to use inline flex layout instead and as is being done by saying lg4 larger screens here and then assigning in that case across in line - flex okay this it looks good okay now we have two nested if elements here for the notification bar the outer div element which is just giving this area here a background color and centering everything and then we have the inner div here which is an the notification bar div itself and the content or the child elements of this inner div element are now to span elements because the notification bar should consists of of two items the first one is just yeah a badge just printing out the text new or anything else what you may like to include s text information in this leading batch and then the next spawn element is a span element which is used to output the notification text okay let's start with the first one so let's say spawn here and again I need to assign a bunch of utility classes here all starting with a flex class again to apply a flex layout here and then I'm saying around that full again to to give that element rounded corners next one is a background color again a blue color here so BG - blue - this time we're using 500 here then I would like to print out the text for this batch element in uppercase letters only and this is being done by applying the uppercase utility class here next one should be let's say we printed out in bold so fond - bold and like so I'm assigning a padding to left and right with P X - to padding to top and bottom was P Y - 1 and then the text should be printed out in small letters so text - X s like so and then we meet a margin to the right I will leave a margin to the right so mr - 3 which is assigning a marching to the right here okay then we're printing out new and new as a text here okay like so okay let's see inline flex I need to adhere the roll attribute and set it to alert for the inner div as well so and then we can come to you the next span element and that is the span element which is printing out the notification text so again spam and then we have the class font - semi bolt to print it out in a semi boat like so a margin to the right again then the text should be moved to the left which is being done by applying text - left and then we will use the Flex Auto layout like so and we do not need to forget the notification text itself which is saying use take well to CSS queue implement your own custom design so let's save it and we can now check because the live service - running we can check the result in the browser and you can see it has already updated the output here now this is our notification bar with the notification in included here we have the badge here and we have the notification text and now you can see of course now I'm using a larger screen here so the classes are applied which which have been added just for larger screens and above and if I reduce the screen size here or reduce the size of the window a little bit you can see the layout is changing so it's responsive and you can see how easy it is to apply responsive layout responsive design by using the tailwind responsive prefixes here okay maybe we can add a little bit of a march into the top here let's say March and top let's say 10 here let's save it check the result here in the browser again okay let's see oh no Martin to the right is empty is marching to the top of course and let's switch back so we have a margin here and we can also assign a margin to the top for the button as well to bring a little bit of spacing in okay so this looks better now we have the button here we have the notification area here and we can move on to the next example and yes next as a third example I would like to show you how to assign the cartel amount with various elements inside with an image inside which text information inside and maybe you already know card elements from bootstrap and now in the next example we will just use again tailwinds years as utility classes to apply our own styling and just to guide you through the process of how to a style such a card component okay so I have already placed an image here in within the build folder I have created a subfolder which is called IMG for image and ayah and I have a file here a way bow which is called title dot PNG that's just an image as you can see here and this is the image I'm going to use for implementing the cart component because the cart will consist of an image text and so on and that is the image I'm using here so let's return to index.html right here underneath the navigation bar implementation and let's start to add the HTML code which is needed to implement a cart component with tailwind CSS utility classes I'm starting again with development here just to assign the MT of 10 class here and then I am using another Nestor div element here and here I'm assigning a bunch of classes first of all I'm going to use max - W - s and class I'm using the rounded class to give it rounded corners the overflow:hidden class shadow - l g+ and a BG of white class to assign white background here like so if there is a class and you would like to read the documentation about that class to be sure what design aspects are achieved by applying that class you can always use the class name here for example the max WSM class go to tailwind website as explained earlier just pass in the class name here and you can find the class a reference documentation right here and now you can see this is a utility class for settings a maximum width of an element and if we use the SM class here we set it to 24 Ram you can see it here so that is a corresponding the CSS property which is applied when this utility class is used and that is how you can look up things and the documentation we can do it for for example the shadow our ji class as well just to give you another example of how to look it up you can quickly pass it in here just hit return and you can see that is a utility class for controlling the buck shadow of an element and here you can see for example for the shadow Haffner LG class the corresponding CSS attribute here is box shadow and the property or as a value for this property which is applied the following so here you can see that this a lot easier just using those predefined utility classes and typing out the data CSS code here which would be needed instead it's much easier to just use it a short class name here and to achieve a box shadow for that element in our layout okay so let's move on so the first thing I would like to that card element which is described by that div element here is the image and I'm using an image tag of course here and the image I would like to display here is located in inside the image folder like shown before and the name here is title dot PNG and I'm using an alternative text information here as well which is saying tailwind CSS for app to delude beginners and to displace this image with the full width width which is a Weibull here was in that cart section I'm assigning a class as well and the class I need to use here is a W - full class - just make sure that the image is displayed with the maximum width a Weibull and the maximum which is of course determined by that class here okay so the next thing to add here is is text information the card element underneath of the image should display a headline and a text description which is just a longer text and I'm going to add another div element here and the classes I need to assign here first of all is to introduce some padding for the text area we will have a padding to the left to the right and I'm using the P X - 6 class here and we will have padding to the top and to the bottom as well I mean using the P Y - for class so this is a div element containing both text elements the headline text and the description text okay first of all let's add the headline here let's start with another different element here and the headline should be displayed in bold font some using the font - both class here it should be displayed in in a larger font size so I can use the class text from Excel and again if you would like to know what font size is applied by using the text - Excel class we can again copy it here just to give another example passed it in here and you can see it's a class a utility class for controlling the font size of an element and in particular the text - Excel class is applying the font size of 1.25 REM so you can look it up okay then we will use a class which is assigning some margin to the bottom so MB for margin bottom - - and the headline here is tailwind CSS for absolute beginners like so okay let's save it and let's move on and the next thing we need to add here is a description text okay so I'm using a PL Amanda paragraph here and here I'm assign two utility classes the first one is text - ray - 700 display it in a grey text color and asks a font a size I would like to use one Ram and since the chief pipelines a text - base class here so so the text I would like to output here I'm fasting in that text it's a longer text just for demonstration purposes so this is a description text and the last thing I would like to add to that current component here is a section where hash tags printed out and to do so I'm introducing as a diff section here and I'm assigning again the classes PX 5 + 6 + P Y - 4 to assign headings and within that div element I'm printing out or showing three hash tags each hash tag is covered by a span element so I'm using span here and the classes I would like to apply here first of all is in line with lot for the layout then BG - gray - 204 giving it a light gray background then rounded I've full again for displaying it with rounded corners and padding P X - 3 pound P 1/2 + 1 it should be displayed in with a small font size I'm using text - SM in Z me bold so the class formed - the Zeeman bold is the part here as well and that the text should be displayed in in a grey color as well here we are using text hive hooray - 700 so it's a darker Grayson's background of course and a margin to the right which is applied by using the M our class - - and here was in that spawn element we can now print out a hashtag which should be hashed at the table doing CSS and now I can copy that section here that spawn element and injured it a second and a third time and just change as a text here - hashtag CSS and for the third element here - hashtag web development like so so great life server is still running so we should be able to check the result in the browser and here we are you can see now we have assert search component a Weibull here in the browser output and that is our card component with the image the headline the text and the batches which contain the hash tag hash tags you can see it here but you can see it here of wires that is not the layout we would like to have here as that's somehow strange so adduced adducing we would need to remove the padding here we can quickly do so and let's remove some padding to the left and - and to the right here by removing the P X - 6 class here for that diff element the div element which is containing the spawn elements here which are outputting a Z hash tags and let's switch back to the browser again and you could see ok it looks much better that's what I want to achieve here now we have such a card component and it's always a custom layout you have seen how we need to combine various tail with CSS classes to achieve sadly that lay out here and this is our third example first the button second to the navigation bar search is a card component all with just applying table into CSS utility classes and no predefined components so we have already learned that element CSS is providing us with a large set of utility classes that help us to apply styling quickly and implement our custom design was easy however if your project grows you will end up most likely in a situation where you are repeating the same set of utility classes over and over again because just think of a situation where your web application is containing multiple buttons and all those buttons should share the same design the same styling and if you use table and CSS utility classes you have to apply the same set of button utility classes over and over again and if you then need to change the styling of all those buttons for example change it from a red color to blue color if you would like to update you design you have to make sure that all those buttons are changed and everything is keeping zinc so you have to to go to to to to several places in your code and change it in the same way just change from using a red background to a blue background for example and this is of course not what we want to have because if your project grows this approach becomes increasingly difficult to make then sure that all those elements share the same design and are in sync and to solve that problem table with lets you extract CSS components by using another table and directive and let's see at apply directive and how to use that directive to extract components and make components reusable we will do another example and I will show you in the next step how to do the extraction okay so I need to go back to the starts dot a CSS file here in the CSS folder which is containing already our three table and the directives here and that's the place now we can do the component extraction by using the apply directive and it's important to do it here right between the add tailwind components a statement and as yet tailwind utility statement so right here and let me start was a basic example just extracting the styling of a blue button and what I need to do here is first of all define or declare a CSS class so let's name that France BTM - blue like so and then inside that class definition here I can now use the at apply directive and after the add apply directive now I can make use of tailored CSS utility classes again and what I need to use here is something like BG I've been blue - 500 to give it a blue background color the text should be displayed in white so I'm using the text - white class I would like to have a bold font here so found both a margin to top and bottom some using py-o-tu and a margin to use the left and to the right I'm using px here for a little bit of more spacing here and I would like to have rounded corners here so I'm using rounded here Dima : okay so and then we can define a slightly different background color if we are hovering over that pattern by using the CSS syntax for that so VTN - blue and then we are covering so whoever stayed here and for that I'm using Z add up a directive once again and this time I'm applying a different background class here and that is this time BG - blue - 700 so a little bit darker the blue color here and then a semicolon okay and that's our definition here now we have the BTN - blue cross defined based purely based on table and CSS utility classes so with that class defined I now need to go back to index.html of course and just let me find the button here that's a button we have defined here and now instead of using all those utility classes directly here I would like to use the button the BT and blue class we have just extracted here so just get rid of everything what's in here and then Stella I'm applying to BTN blue class here so let's save it and let's check what we can't see here in the browser and you can see that obviously not a correct design for our button it's just outputting the text so no blue background color so the BT and blue class seems not to be working and that's quite clear because we have included it here in the initial start dot CSS file which is containing all those directives here and now we need to execute first of all the CSS build process once again because we do need to let the build process run so the Tailwind CSS can can read that file find all the directives and replace those directives with the corresponding CSS code and generate a new start start a CSS file right here in our build folder so that although those BTN - blue class becomes a Weibull in the stance toward CSS file here right in the bill folder okay so therefore I'm stopping the live server which is still running here for just a moment and running the CSS build a process once again we're using NPN run built so that's a script we have defined a package.json which is executing post CSS and post CSS is of course as part of the build process using tailwind the CSS for processing the start CSS file and it's outputting again to build this build folder here as you can see here so let's wait for that build process to finish this takes a few second okay here we are now we have a new file starts dot CSS and I can run my server for the build folder once again so starting it up and now you can see that's the output and now you can see it's about an S blue we have the Hoover effect here and that's exactly what we have defined for our BTN - blue class so the class is now available we have defined it centrally and you can use it across your HTML code wherever you need a blue button and if you decide to change the design of that button the styling of that button you only need to do it in one place in the Styles dot CSS file and then run as a CSS build process once again and then you have updated all the components on in your website which makes use of that extracted class so there is a second way of how you can predefined components or component classes here was table into CSS and there's a second way involves the usage of the table in configuration files so Tailwind config dot j s and this is what i'm going to show you next so let's open up is that file tailwind config j s so you can see it here that's the initial file basically empty no settings included yet we have generated that file when setting up the project and you can see it here it has one property already included and that is named plugins and plugins gets assigned at the moment just an empty array so there are no plugins but we can overwrite our own plug-in and use this plugin to add a predefined component class for example a button class again and to do so we will use that tailwind config dot JS file here and implement our plug-in right here inside of that file so first of all I need to end as a line of code here at the top and I need to import a plug-in which is part of the tailwind a CSS package and I'm doing that by saying cons plug-in is equal to require and then I need to pass in the name of the package that is tailwind the CSS slash login like so now plugin is Weibull and we can extend that empty array here and yeah bring in a plug-in and to define that new plug-in we are using the plug-in function we have just imported here and we need to pass over in the call of that function another function like so and that function has a parameter here and we can extract from the parameter the add code opponents function we will use the later on to add our component and this is being done by using curly braces here and then say add come at components like so okay and then we can implement a function body here and first of all we have to create a new object and naming that object buttons here and that is an object so I need to add the braces here again and the first first element here is the name of the class I would like to define and this time I'm naming that close BTN red to this time define a red button class and here I'm assigning another object to that property and this object is containing all the CSS properties and the corresponding values assigned to the properties I would like to add to that new class okay let's start with some padding here this time we cannot make use of the Tailwind CSS utility classes instead we have to use pure CSS attributes here and corresponding values so to the font padding I'm adding first of all a padding of 0.5 M and depending of one rep like so and then I would like to define a border radius like so and what a radius should be let's say zero point - five REM okay like so then we need a font weight and I'm setting it to a value of 600 and a background color of course because we have a red button class so we need to set the background color here and the color code here I'm using is es 3 3 4 2 F like so and then we have foreground color here and so with a color property and this is just what okay and to set a different background color for the Hoover state I'm adding a property in the following way here so again using CSS syntax and then adding for that case a background color property and the value I'm using here is CC 1 F 1 a I think that's it okay so great is that as buttons object this is defined and then finally we now we can use the add components function we have extracted here from the parameter to actually add everything what's a Weibull here in the buttons object as components and therefore I'm calling add components here passing over buttons the buttons object which is containing the definition of the BTN Red Cross as you can see okay well let's save it like so so where's that new class defined I can switch over to index.html and change for the button here from BTN - blue - Lydia - red like so and let's see how this looks like and now we have the same effect that's seen before the styling is not yet applied at the button that has no red background the reason again is the same we have made changes to the Tailwind config dot reyes file this requires us to execute this year's as-built process once again so I'm stopping my server here and saying npn run build who once again and let's see what's happening here it is running again and outputting and updating everything in the build folder in the Styles dot CSS file so great now we can run life server again for the build folder and here we are now you can see is a button house again change to red because now the class is applied which is adding by using our plugin in the configuration file the class is fully working the styles we have defined here in tailwind dot config dot the C's Jas are applied and that's just a second option to define predefined components and make those components as classes Weibull then in our HTML file okay so with those examples covered here in that tutorial you now have a first idea of what 10 with a CSS is how you can set up table and CSS for your project establish a CSS build process and make use of tailwind utility classes to introduce your own custom design very quickly and e define a design which is responsive and corresponding to the screen size which is applied so as SSE approach here was table and CSS now with that basic overview feel free to just implement your own examples if you have anything which you would like to look up for example utility classes options for utility classes you can always go to the tail winter CSS website and just use the search function and the documentation is very comprehensive and very very good for getting started and getting into visited various classes and they always apply your own design your own custom design so have a lot of fun and start using tailwind as CSS maybe for your next project if you like it so this one is about Sam from coding the smart way dot-com Sang's it very much for watching I hope you do add my videos if so please don't forget to subscribe to my channel on YouTube please also don't forget to take a look at my website at coatings of smart Wacom and I hope very much to see you in one of my next videos until then have a good time stay tuned bye you

Channel: CodingTheSmartWay.com

Views: 21,991

Rating: 4.8764043 out of 5

Keywords: Tailwind, Tailwind CSS, Learn Tailwind, Learn Tailwind CSS, Tailwind Tutorial, Tailwind CSS Tutorial, Tailwind CSS Framework, CSS Framework, CSS, Web Development, Frontend

Id: j_5-LISy9Qg

Length: 72min 33sec (4353 seconds)

Published: Sun Mar 08 2020