Blazor & Tailwind CSS 🔥 Quick Start Guide

hello my dear friends welcome back to the channel and welcome to this little introduction to Blazer combined with Tailwind CSS first a short disclaimer I am another designer and I am also not a Tailwind expert I'm really a beginner regarding Tailwind CSS but maybe this is still then a good way to learn because from beginner to beginner you know maybe I can explain this a bit better than being an absolute Pro and then going back to this newbie level I think you get the idea now what we're going to do is really just install a Tailwind CSS and see how to work with that maybe a little explanation what Tailwind really is but I do not want to go way too deep into that for that there's the documentation you can read what utility classes are what the utility first approach really is but what I want to do here is provide a jump start for you meaning we install tailwind and then already use the utility classes in a Blazer project and how would that actually work and the for me most important part really how can you use pre-built well not components actually it's just pre-built Design Elements Dom elements with a tailwind and use them then in your Blazer applications I think you know what I mean again I am not an expert at this if you have questions or you know more then please write them down in the comment section but then again ubt newbie maybe this is the best way to learn and if you learn something I would really appreciate it if you hit the like button maybe even subscribe to my channel thank you very much for that and maybe you want to check out my newsletter for more.net and Blazer stuff and now let's start with this quick start guide so I created a Blazer empty solution here Blazer webassembly empty template it is and when we run this this is everything we see here right and we can even strip this down a bit further for instance I don't want this error message here so save that restart the application again we get the hello world and the loading screen this is everything I want so far and now regarding installing Tailwinds please don't stop the video here I want to use and recommend the CLI there's this the Tailwind CLI you can use and for that you need node.js I know I know we're using Blazer here.net we really don't want to use anything JavaScript related right but sorry about that it's still I think the the best way as far as I know to use Tailwind so please node.js it is just Google for it and then download the windows installer and then you can leave this page again but then when you got this installed you open this folder in the file explorer here the client folder if you want of the Blazer client project and here then we simply open the terminal and have to enter some stuff and the first thing is npx again I know I know and then Tailwind CSS in it now we're not using npm maybe you heard the term already but npx the big difference is we don't get a node modules folder which is typical for World node.js apps and I guess you don't want that a node modules folder and I certainly don't want that so npx uses something like a cache on your machine and if you've already downloaded Tailwind then it'll use it from what you have downloaded but it won't end anything to your actual project so this is great just run this and if you haven't downloaded Tailwind it would now ask you to download it but in my case it already did so now you see it created a table in CSS config file for me this is the very first thing that is happening and here at root level we now see this Tailwind car config JS now regarding the config file we want to tell Tailwind where to look for the used Tailwind utility classes so in the case of Blazer and by the way I will talk a little bit about the utility classes in a minute but in the case of Blazer where it should look now these would be a Razer and HTML files so here in the content array we add the following we just want tail went to look for every razor and HTML file through the complete structure of this project and this then would look like that I hope this should work and with that we now create an input CSS file right there we will enter a little stuff and then Tailwind then we'll compile this into an output CSS file and this is also why we need the terminal here with npx node.js and so on but don't worry in the final product then you don't need that anymore you've got your final style sheet CSS file so you don't have to worry about that at all but here now let's just create a new folder first call that Styles maybe and here we add a new item and call this app c s s all right remove the body element here and now here we will add three directives so first one would be Tailwind and then base the next is Tailwind components and already the last one is Tailwind Italy utilities that's the one now we need these directives to make Tailwind work in essence utilities are the utility classes of Tailwind with injecting base we make sure that everything works across different browsers for instance and with components we can use the add apply director for instance which which makes sure that certain Styles will be applied for every element you want we will also make use of that for instance for the H1 or H3 tags all right so I think that's too much for the beginning so let's just make sure you've added these three directives if you're coding this along with me and now with that we want to compile this this input file into an output file for that we go back to the terminal and here now we enter npx Tailwind CSS again but now we write Dash I for input file and this thing can be found in Styles and then fcss and we want to use the following output file www root CSS and then app CSS and then the great thing is we can also add some kind of hot reload with dash dash watch not hitting enter but you can already see we've got this app CSS file here right and this will now be overridden so let's just hit return and sit here rebuilding and as you can see it is warning us that no utility class is very detected detected in our source files if this is unexpected double check the content option all right well so far there's not much going on actually but you see that the fcss file has been changed right so now we've got all these classes here not only not classes but the regarding the elements we've got some CSS stuff happening here all right so that's that I'd say we save that if not everything has been saved and then we should see nope it's not rebuilding but when we now I don't know for instance in the appraiser just hit save yeah it is rebuilding and it's done okay so now you see hot reload is actually working and with that we could already change some stuff now so for instance let's go to the um pages and then index razor so now here's only Hello World thing is we just start with class and then we enter anything we want but first maybe we just check out how this page now looks so let's open it again and here you see it already looks a little bit different right and we can inspect this thing to see okay font size inherit now we go to compute it and here we see the font family is now UI Sans and we can go there where comes this where is this coming from from our generated app CSS and here we see in HTML this is our font family all right this is nice but now I want to change that the first thing I want to change is I want to make this in H3 because when we create new pages then by default these are also H3 so now let's go back here nothing really changed right okay but uh now let's say I want to make this look a bit differently for instance we want to make this bold make the text a bit bigger so what we can do now is we can use the utility classes from Tailwind CSS so here we write class and then font extra bolt for instance text is a bit bigger so text Dash 5 XL and let's just say that's already it so let's go back and we already see that's the result I think this is already this already looks nice but when we do that right you see that you have to know this stuff you have to know what classes exist and this is the stuff you have to learn when you want to use Tailwind CSS but then again when you use bootstrap which is here by default when you're not using the empty template here in Blazer then you you just have to know the bootstrap classes right and if you don't know them you have to look them up if you want to use plain CSS then you also have to learn CSS so I think there's not a big difference here to other libraries the let's say the the older libraries the old style of libraries where you have already finished classes for you right so the great Advantage then here is that I see utility classes as we're using here are meant to only change a little off your element meaning when you are creating a button for instance with a bootstrap right and you would see a button down here what you would usually do is you create a button like that so I am a button and then here you would say something like class and then BTN and then BTN primary for instance right again you have to know this and you also have to know how this thing then looks now here of course we have no bootstrap so this looks like that great thing is it looks like actually like nothing there is no change in here right now with the approach of Tailwind in this utility first approach meaning you we have classes that will only change the the single Styles as you can see here with the H3 is that you know how this thing will look in the ends right because you see what you're actually changing here in the markup but of course if you want to learn that and use that you have to go to Taylor and CSS and then maybe to the documentation and here then when you scroll further down there's lots and lots of stuff like the padding for instance so what we can do here as you can see these are the classes for the paddings so let's just go back here and say we wanna add the padding to something like that and then let's go back to our application and just put the tab here and you see we already have a little padding here nice so this seems to work now what about border I think there yeah there's a border and now we can go to border style and then you see here already that you've got some examples now the thing is when you're lazy as me and you don't want to really learn every single class here and think well isn't there something similar to a component Library something similar to bootstrap maybe where we got already components that look nice and that we kind of just can copy well of course there is something like that here for you and you can just go to components and then you see we get two Tailwind UI and these are the buttons for instance we've got a slider here lots of stuff we can already use problem is this is not for free all right so when you want to for instance go to application UI and then we've got uh let's see way further down navigation elements then you go to buttons and you see okay this is a button that looks nice you have to get the codes and then you have to pay for that stuff all right so that's a bummer but of course there are other Solutions out there for you and I just want to show you some of them now I've got Mumbai UI which is when you go to the main page Kickstart your next website in minutes remember UI is a free open source collection of UI components and templates based on Taylor and CSS great stuff so browse free components we go to button and then you see this is a basic button and now we go to HTML and we see oh great this is a perfectly fine button we can just copy this and then we go back to our app and paste this down here and we have this basic button here all right so this already Works another library is hyper UI for instance pretty similar stuff right you've got alerts batches and so on and another one would be flow bytes and really I'm not related to any of these I just found them in my short research and I really like them and I especially liked that this is usable for free now regarding flow byte there is some stuff you have to pay for but you can also just go to the docs and again just to the buttons for instance and here again you see the default button we can also see how this will look in the smartphone mode or the tablet mode whatever and again let's just copy the classes here right and then go back to our code and then here we say this is now our button remove this button here save that and we go back and here's now our default button and I forgot to remove something okay and now this should look better yep that's great what I don't like is the padding here or spacing here actually of the complete page so maybe we can fix that as well let me just go back to the input of the main layout and here we can for instance say class already got that right margin in the x-axis let's say four and this looks a bit better I think so now we've got this button here this is great but now when we do it like that the big question arises well now we changed the style of the button right so these are a lot of classes that we have to use here the Texas wild all right we we understand what this is doing right BG background blue 700 okay on Hover we've got a blue background with a shading of 800 and focus we've got the ring right we we can see that this works but do I really have to write all these classes or copy and paste them whenever I want to use a button well this is the great thing now when you're using Blazer you can of course create a component out of that so let's do that real quick together so we just add a new um a new folder first call this shared again and here we just add a razor component call this my button for instance and now we go back to the index razor copy this old stuff put this here and now the beautiful thing is of course this now will be our text parameter and I hope you know that already and here um on click we will also use an event call back here on click all right so here now you just add a property which is a string and that'll be the text let's just say by default this is well simply button and now also another property which is an event call back and this is called on click and both parameters all right like that and now we should have our component and now in the index you just say my button maybe we import that or add that to the Imports here so using like that now we can go back my button great and here now we say the text is I'm button again and on click we call our click me function that we will write in a sec okay we add our code block and now let's say avoid click me and here we simply console log something I was clicked great let's restart that and hopefully we see this thing again we can click on this and it works great stuff right and now this is really really clean and we only have the classes here and we also see directly how this thing looks we can change it we don't have to use any CSS files so far I really like that now another thing I told you was actually applying these classes to elements these H3 Elements by default how would you do that now real quick don't forget the Web Academy opens soon again for enrollment maybe you want to check it out in there we dive deep into building web applications with net meaning a dotted web API Entity framework Azure git and on the front end of course Blazer web assembly so maybe you want to check it out thanks a lot for considering the link is in the video description and now let's continue well this is also pretty simple what you can do here in the config file now is simply add this element this is in essence not a CSS class right this is only the element here and now we grab this and we don't have to add the class here at this now to our H1 elements in the input file and we use the directive apply all right so now let's save that we go back here and hopefully when you use the correct element here it should Yip now hot reload worked it changes that thing and now when we open or create a new page by default the title is H3 then you will see that this will also work let's just say we add a new razor component and we call this about for instance and this is also a page so the link is then about we reset the application so here's our index in essence and we now go to the about page we see this also works just fine and you see we haven't added any classes here alright great stuff so we covered this with components we covered the apply directive right and now the last thing that I want to show you and that was a question that I really had now what about actually designing right so what we see here in this empty Blazer template well we see the hello world text we see the button this is nice we can we can use it but now I really want to build something with a navigation bar right how would you do that well I just went again to flow byte in this case again you can also go to Mumbai UI hyper UI whatever you want to use you just Google for some free component libraries or if you want to paste something of course you can go to Tailwind UI and get that then but let's just stick with flow byte in this little example here and you've got a mega menu for instance that you can really use and also simply a navigation bar here and as you can see okay because of the the zoom here we actually don't see um yeah now we see now we see the the actual menu and again now we can toggle the mobile view and the tablet View so if you even got the Toggler now I can already tell you that the toggle button here won't work out of the box so we would have to code something here but maybe you can just copy and paste that from the default Blazer template but again what I really like is actually the look and we can simply again copy this so let's just copy the whole thing and now we go back to our project and here we've got the main layout now we could of course create another layout file but it doesn't really matter because it's only about the navigation up here and now what do we have here well lots and lots of classes of course we also have the flow byte logo here but maybe we can change that and let's just say this is my app remove the logo and regarding the URL well let's just go to the index page and now down here we have lots of links but let's just say we wanna have a link for the about page and this is also already called about this is great and now also here this is the home page let's just have a look and go back and here we already see great stuff right we have a navigation bar with the home link and also the about link this is really really great and it really doesn't stop here because now what we can do is when we have a look here again let's just go to the mega menus for instance and they have great examples here with even a separated button for the login and signing up and I think there was also stuff with avatars and uh yep that was see that I just love this so you have the uh images here of the user that is probably currently logged in of course you have to code still lots of stuff then but again just regarding the design there's already a lot of stuff that you can use I really can only recommend to have a look at tailwind and then the free component libraries to design your page make your Blazer Page look differently and not having this Purple Gradient on the left with a sidebar this is just great stuff in my opinion and I will definitely continue playing around with tailwind and if you want more tutorials about Tailwinds going a bit deeper maybe you have questions then please tell me that in the comments I'd love to create another video for you and if you like this one maybe you also like the ones you currently see on the screen would really love to see you in another video thank you very much for watching see you next time take care

Channel: Patrick God

Views: 6,132

Keywords:

Id: tj4dNN2jQt0

Length: 26min 53sec (1613 seconds)

Published: Tue Jul 11 2023