On .NET Live - Building Beautiful Blazor apps with Tailwind CSS

[Music] [Music] [Music] do [Music] do [Music] [Applause] [Music] [Music] there we go and we're live hi everyone thank you so much for joining us for another live stream of on.net live my name is cecil philp and today we're going to be learning how you can plug in tailwind css instead of your laser application i have my friend here chris who's going to talk to us all about it so chris why don't you really quickly introduce yourself to folks and let them know a little bit about who you are and what do you do yeah of course first of all thanks for having me uh it's very nice to be here um so for everybody my name is chris santi i'm a principal software engineer at a startup in london called deployed um i've been a dot-net engineer for 15 or 16 years now i'm a microsoft mvp for three years i think now it's getting on for um and i've been kind of really uh sort of deeply entrenched in blazer for quite a while now uh sort of since before the first preview came out i think really um kind of fell in love with it pretty much straight away and um been blogging about it and doing talks about it and and everything ever since um as well as that well i'll also do a bit of open source work as well so i've got some blazer specific open source packages they're all under an organization organization called blazered and i'm writing a book on blazer for manning called blazing action so i think that's everything um nice i didn't know you were writing a book too that's awesome i know i didn't even think to mention that earlier but that's good to know though right like what is the book coming up um i really really hope uh just after dot net six lands so we've i've been working on it for a year um because i think everybody who's written a book knows that you think it will take about a year and then it takes back you know 18 months um so uh that's pretty much part of the course i think and then um we've had a chat i mean my development editor we were kind of talking and saying like this might land like a month or two before.net six like in terms of the rate we're going and like that would be really rubbish to publish a book based on.net five a few months before before.net six comes out so um we had a chat and we were like well we'll kind of aim for for just before november we'll get all the all the proof checks done and we'll we'll kind of co uh code and write against uh the kind of later.net six previews and hopefully not too much will change and um we can go live then uh with we can print the book um just after dot net six comes out fingers crossed so it should be nice and up-to-date as a book can be really for everybody so that's the plan watch this space to see if it happens um it should work what did you say the title of the book was again is it blazer blazer in action yeah so it's part of manning's inaction series um so other books from that uh a good uh mvp uh friend of mine uh andrew locke has got a book asp.net core in action for example so uh it's part of that series um they do loads they do like react in action vjs in action there's there's loads of them um but it's basically like a uh a sort of more realistic real world um version of a book rather than just kind of theory so we try and tackle more real world issues so how would you be build a real app um using this technology technology yeah yeah got it that makes sense awesome so we're gonna we're gonna look out for that book later this year after dot net six comes out um but speaking of things that come up before we really start diving into blazer and tailwind css because i know that's what everyone here is here for um i do have some links i want to show because a couple of things happen today that i think everyone kind of wants to know about a couple of little things yeah couple you know just a couple of things so i'm gonna add my uh desktop to the screen and now let's kind of go through some of these these things now it seems like this has been a really busy month for blazer in general like so our friends at telerik just did blazing into the summer 2.0 with telerik and i think this was last week and there's tons of great stuff here right like you know dan roth did some sessions um you know layla porter i love layla if folks know who later is she doesn't like yeah i know she's awesome absolutely yeah lil is awesome man um she did a session on signal larry blazer um again like the b unit folks were here and they did a little bit about unit testing with blazer this already yeah he's awesome man so again this happened last week but the recordings are all available so if you didn't get to see it or if you never heard about it you know definitely go ahead and kind of scroll through the page here on telerik and um and definitely check check these out and who's this guy looks like i was here too like i did a session as well with ed we also spoke about creating laser components so yeah just a lot of great free content it's all on youtube today but if you kind of want to get a like a curated view i'll share this link in the chat where you can kind of scroll through this page and see some of these other sessions about blazer now moving on a little bit more recently actually just today or earlier this morning depending on on where you live um it was blazer day right so the community puts on this event i think like once a year i believe um because the last one was about 11 12 months ago yeah and it is what tall pots feel and so they had all these great sessions with just a lot of different folks like um you know you see carol was here um sam was here i think samus also works on on telerik if i'm not mistaken yeah yes sandwich tyler yeah was it good and um yeah just a lot of folks just talking about blazer right like blazer or graphql you know this guy i don't know who this guy is but he did a session too talk something about blonde forms of blazer some stuff i heard it was rubbish he didn't know what he was talking about i mean i don't know he's talking about some stuff i don't know and then this other guy is here jeff fritz so again we have tons of folks talking about all this blazer content um so again this was today i think if you want to see it i believe you can hit this live button that's at the top if i'm not mistaken and then you can just re-watch the entire day now i don't believe that they have split it up yet into little sections where you you know you have like those bookmarks on youtube where you could just fast forward to the section but yeah i'm sure that'll be there eventually but again if you want to go and see some of these sessions those are available here on youtube you can go check those out now for the announcements some some some of y'all may or may not already know this visual studio 2022 preview one is available today right now for windows devices so if you kind of want to know what's what's new and what's going on in the world of visual studio 2022 um definitely head over here and check it out i know one of the big things people are talking about is the fact that it's 64-bit right so you know meaning it's going to be able to use more memory and hopefully it'll be a little bit faster too so you can load solutions with a thousand projects in now without any problems at all yeah i think there's a there might be like a video or a little gif about it yeah i've definitely seen that already like it was it's it's very impressive yeah i think this is it if you kind of look at it yeah look at it it's loading like 1600 packages super quick um and then you know it has like intellicode built in and like all this other stuff the maui stuff is all built in there too so again if this is something you're interested in this is a preview release this is not the final release so definitely go ahead check out the blog post and see what are some of those other features that it added into it download it on your machine because you could you could run visual studio now side by side without worrying about it messing up like the other version you have on your machine and um yeah try it out and let us know right i think one of the main reasons to to do these previews is so that we could get early feedback right so let us know i like this i don't like this this works this doesn't work you know if you if you're an extension author you might want to port over your extensions and see how it kind of feels in this new world and you know just you know open your new solutions and stuff and see how those work um but again this is a good way before the final one comes out let everyone know well hey this works for me or not and chris actually i have a question for you are you are you like the type of person that like installs preview bits on your machine i kind of feel like you are a little bit oh yeah i mean i've lived on preview bits for far too long i think i didn't have a stable version of probably net core or visual studio installed on my machine for probably best part of 18 months while blazer was coming up to ga it was just preview after preview after preview it's yeah it's what i think i always amazes me is the quality of the previews it's it's very rare that you get a preview that is just unusable or is constantly crashing i think um we hear preview and we always think oh it's really unstable it might be really like really rough and and that just isn't usually the case um i won't say absolute because it's there's always you know there's always the odd one that goes wrong but even they get corrected so quickly with a little patch and stuff i like i comfortably went for best part of 18 months without any stable in quote software and in visual studio and stuff and it worked so well yeah it i think after a while of releasing these previews so often like we're starting to get it right like we're trying to figure out a comfortable way to do it without like making everybody get mad so um again if if you folks that are watching like definitely go ahead and download the new preview of visual studio 2022 and they go side by side as well so that's the other cool thing because you can't like with it exactly exactly so you can have like i know maybe you're using um you know 2019 or you know using whatever version you have right now and you can put you know 2022 next to yours and then you'd have to worry about it too much yeah now along with visual studio we also have new versions of net six so dotnet six preview five is out um you know our good friend richard lander he always does like these really comprehensive blog posts about what specifically happened um so definitely i'm not gonna read through all these but you could try you can check it out and see what's what's going on and what's new here um along with this there's new versions of asp.net core ef core and also.net maui so you can kind of see what are some of the new things that were released for dotnet maui i know everyone's like super uh into like the new hot reload features that are happening across the workloads lots of performance improvements for ef core as well so again definitely check those out too and then also with nets with asp.net core 6 i know we have support for the new minimal apis you know updated support watch and being able to install these different workloads and all kinds of tool stuff like this there's too much for us to talk about in this little bit of time that we have to cover these links but again i'll share these links in the chat and folks could check it out and uh again these are just previews so let us know what you think so we could make sure that whenever this release happens later this year in november um that you know these things will be good to go now with that being said my screen's gonna come off because this is the time that i always say hey this is not my show this is chris's show today and we're going to kind of dive into his topic and learn a little bit more about um tailwind css in poland uh but super quick too like i'm looking in the chat i also love to make sure that i always shout out people that are here that are watching us looks like we have some folks here from turkey we have some someone here from poland thank you all so much for watching us um who else do we have in here really quick i think about cost is it costa rica as well did i say yeah we have someone here from costa rica yeah i see that someone's here from romania so we have people from all over the place watching us so again really appreciate y'all coming in and spending time with us as you have questions go ahead and drop your questions in the chat uh and i'll make sure you know we answer them we try and weave them in in a comfortable way oh wow we got egypt pakistan portugal yeah we got tons of folks here so nigeria wow yeah from iran we've got some votes from cuba nigeria yeah we love it man morocco i just opened up the floodgates now everyone's coming don't forget my country else you're gonna get in trouble cecil um yeah australia sweden there we go say again yeah i definitely appreciate all y'all joining us today um chris so the reason why we're having this conversation today is because you know every year i do this thing right where i'm like what are the technologies that i'm going to focus on for the next 12 months so you know like how people have new year's resolutions i have like learning plans right and so like this is the stuff that i want to learn because i always find there's so many little things for me to try and understand in technology and it's always it's always like shifting like i need to be able to focus and so this year i was like i'm going to learn blazer i'm going to learn graphql i'm going to learn kubernetes right so so far i feel pretty comfortable with like the kubernetes thing and i'm still working on my graphql skills but this month just happens to be blazer month on.net live tv and as you can see from like those links earlier we had tons of folks doing some other things from telerik and we had the blazer day events and there's gonna be tons more stuff happening this month but you know one of the questions i got from a lot of folks was you know how do you plug in css frameworks inside of blazer because now like css frameworks are a little bit different than how they used to be now there's build systems and npm has to get involved and there's all this stuff that has to happen just for me to like style my application and and use like the framework i want to use so obviously i wanted to bring you on because i know you're a fan of tailwind css so i'd love for you to talk to us a little bit about like how that works and yeah maybe as a beginning why don't we just talk about what tailwind css is and then kind of like just roll into it from there yeah definitely i think that's a great place to start cool so in a nutshell tailwind css why is it different to other frameworks like bulmer or most probably the most commonly used one which is bootstrap the difference is it's a utility-based css framework um what that means is that um we don't actually sort of need to go off and write traditional css classes um what we do is we apply lots of micro css classes um to an element in order to style it and we style it by by adding all of these classes to it that do very specific things so the home page is tailwindcss.com i've got this here because they have an amazing as you probably expect from a a css framework they have an amazing um design for their site and um this bit is is really cool so what is i'm just going to refresh this and they they've got this little animation that's styling it and as we as they go they're typing in um all of these utility classes that are making uh very specific styling changes to that element on the left hand side and as they do that you can kind of build up this unique style um for this particular component the reason why i have a really big love for tailwind css is because um it does allow you to create something that looks a little bit different um with a lot of the kind of help um you get from a css framework like bootstrap for example so where one of the great things about bootstrap is like they deal with things like the cross browser issues like where you know css is is getting a lot better now but you know where you used to have to do lots of very specific hacks because you know um spacing on ie was different to spacing on safari to chrome and you'd need to know browser specific you know prefixes or very specific css hacks in order to make everything look the same across browsers so one of the reasons to use a css framework is it it takes that away from you it does all of that hard work for you and you can kind of just get on with it with doing it and that's still true of tailwind even though we're using these kind of utility classes they've still got all of that functionality built into them they still deal with all the cross browser functionality for you and what whatever else um but but like i say the difference really is that that fact that with bootstrap you you have to take this hunk of html that's predefined with all of the css classes that are predefined and then you you drop that in your app and and it's there and it looks like it looks in there their style guide but that's kind of the problem for me then everything starts to look like bootstrap and i don't don't get me wrong i have no hate for bootstrap i've used it for a long time and it's a amazing framework and it's really good and of course you can customize it um but where i think as well another big advantages for tailwind is in when you're working in um when you are building real production apps and you maybe do have a design team and things like this where they do want very granular control over the look and feel of your app but you still want to get that cross you know the cross browser benefits of frameworks and all this kind of stuff this is again where tailwind for me really works well um because you can work with your designer um tailwind is very configurable so uh has a set of really good defaults for things like spacing of elements and sizing and things like this but you can customize all of that so you can make it match your designers um your designers uh kind of presets if you like um and you can mimic it and and then you can just kind of have it completely tailored to your design system for your application and and you know that you can just go applying these utility classes knowing that they they work based on how your you know your design system should work and and everything will be spaced appropriately and and all this type of stuff um and you just really iterate on design very quickly it's really good for like rapid prototyping like you that little that little animation that ran here to kind of style this out um you know you can literally just keep whacking in these utility classes and watching them build up and the the styles change as you go and um it's that really quick feedback rather than kind of going a style sheet write loads and loads of kind of properties into a css class refresh does that oh no that doesn't i'll tweet that class and then i'll tweet this clap that that property that property this property oh it hasn't quite targeted the right element i'll change my css selector and all that kind of stuff you kind of don't have to worry about that with with tailwind so um hopefully that's kind of giving you a a a rambling overview of why i quite like it sure and i i kind of like what you said in the beginning at least i kind of relate to it at some point in time like a lot of sites all look like bootstrap so it became to the point that even as a developer or even folks that aren't developers you could look and be like oh okay this site looks like this one like the buttons are the same or the borders are the same or everyone's using like that same hero thing the big banner thing that's at the top of the page like the structure all looks the same so they must be using like similar things to build the site so i'm guessing what you're saying tailwind now gives it a little bit more is a little bit more flexible in terms of being able to customize it and control what pieces of it um not only what they look like but what pieces of the framework i actually use and would actually go into whatever my final product is yeah definitely i mean we'll see this in a second when we start like looking at how we can use it in our blazer app but um again with something like bootstrap you're used to kind of having this uh sort of big style sheet that you include in your app that's got all of these styles in whether you use them or not one of the other big advantages of using tailwind is because it's utility-based you can trim out all of the classes that you don't need when you go like and build your app for production so you can get a really really small css file at the end of it so they talk about this in the documentation but essentially when you're in development mode and you have access to all of those um all of those utility classes while you're developing your css might be somewhere in the region of anywhere between four and possibly up to 20 meg depending on how much of the framework you enable um but rarely does a tailwind an app that uses tailwind um rarely does it go to production with css above 10k right because when you strip it all down um to just what you need you can get these let's say very very small files so that's another another sort of nice benefit of it that you can you can do that nice and we have some questions popping in um this one's coming in from twitch right now and person is asking what would you say is the learning curve compared to bulma or bootstrap i haven't tried bubble but you know i know bootstrap wasn't too bad over time yeah definitely i think i think it's a really interesting question because i think it the the answer to it will depend on um possibly what your your your skills are with the as a ui designer and things like this because um in terms of getting up and running hopefully i'm going to show you that today so hopefully that is going to take all of the mystery around how you get running with tower wind and how you can use it in your you know build it for production versus development time and all this kind of stuff in terms of using it well that's that's trickier because it's it's just like say lots and lots of these utility classes and putting them together in a way that looks the way you want it to look and you kind of you need to know how you want it to look and and then you can get there with the with the styles i guess the biggest learning curve if anything with it is uh kind of understanding the naming convention for all of these utilities because it looks probably quite scary i mean i um i think we can probably like if i zoom in like right in here um you can see kind of what the the kind of mix of all these utilities look like um and it probably looks a bit gobbledy-gooky like it looks like loads of random characters and numbers but actually they all kind of mean things so if we just kind of look through this and i'll maybe zoom in a couple more times as well um if we just look at this as an example we've got here we've got this md and then occur on flex and what that's saying is on a medium uh responsive uh viewport um use flexbox um the background should be gray at uh level 100 and there's like eight or nine levels of uh sort you can pick from so this is a very light gray they get darker the higher the number goes up so 900 is the darkest rounded xl means that it's got rounded corners and they're very rounded because it's xl p means got it's a padding that goes all the way around that's eight and that corresponds to a rem number and you can customize what eight means um so that that very much depends on how you configure it and then what it's also saying here is on a on a medium break point um it actually has has no padding so um you can see that um once you kind of understand what these kind of shorter terms um all mean you can actually very quickly kind of fire these in and get a very uh you can get your style starting to your elements starting to take shape quite quickly but it does take a little while just to kind of understand the naming and and remember all of these names the good thing is when you're using something like visual studio um or you're using uh vs code or jet brains rider um they've all got kind of intellisense for this um and again right at the end i'll talk a little bit about vs code and jetbrains riding so they've actually got tailwind specific plugins that that make this really really um really easy um there isn't one for visual studio but visual studio's got very good intellisense css anyway so it kind of it picks most of it up um so so yeah that's what i'd say anyway awesome and we got a bunch of questions in here that are asking about like customizing um tailwind so i think what we'll do we'll hold off to those because i'm guessing you're gonna get into like you know how to do that a little bit later on but um one question that i thought was interesting that i figure i would ask you now before we move forward was um this one is coming in from youtube and the person is asking is tailwind faster than bootstrap while html is being rendered now i'm not a css guru i suppose but like i don't know i don't know how to measure performance for css frameworks i guess that depends on like the complexity of the rules i suppose so yes how to answer that question that's really interesting i don't think i've i don't think i've ever i don't think i've ever done that i don't think i've ever measured that that kind of thing um i would expect there's probably no difference because ultimately these are these are utility classes but ultimately it's still they're still css styles that are in a style sheet that are the style sheet has to be loaded and then um obviously the the page will be styled um so the regular kind of browser rules would apply so if the um if your production minified tailwind css file is significantly smaller than a bootstrap css file for example and you maybe have a user on a slow connection the css file will download quicker therefore the styles will be rendered quicker so i guess from that perspective tailwind is probably always going to be slightly quicker in the in that very kind of niche scenario i think for most people who are on like a broadband connection or 4g or or any kind of remotely decent connection i think both of them the files are still so small that really you you probably aren't you're probably not going to really notice much of a difference yeah and i figured that the the like you said like the differences are probably minuscule but it probably would be interesting if someone that's you know familiar with like performance optimization or or measuring render times across different sites do that i know like the chrome developer tools or the edge developer tools have like some performance measuring things in there particularly when it comes to rendering time so maybe it might be interesting if anyone's familiar with that type of stuff shows um how you could measure that and we could we could do like a you know apples to oranges comparison of what those things kind of look like yeah definitely yeah yeah cool so what do we what do we go ahead and move on and like maybe you could show us like like how do we get started like kind of plugging this stuff in because i think that's what i want to know about yeah let's start at the beginning let's that's that's uh let's get going and uh yeah how do we actually get so i'm gonna show you this first of all right because this looks ugly at the moment so what we're gonna do is we're gonna make this look decent hopefully and when i say decent i'm saying that with a pinch of salt because basically what what we're going to do is um use tailwind to re-imagine what the blazer file new new project template could look like so this is uh this is basically the the file new blazer project i've stripped out all of the bootstrap stuff that ships by default with that template and i've basically gotten it ready for for tailwind now i've already applied a lot of tailwind styling um but what i've not done is actually set up tailwind with this project yet so we'll do that together now to understand what's going on so once we've done that this should come alive with a much nicer view rather than this very plain view that we've got right now so if we go over to visual studio um this is the the index uh page so this is the home page for for the template you can see already some some um tailwind styles going on here you can see this utility stuff um like i said it's not working at the moment because tailwind's not there so i'm gonna walk you through the steps of getting this set up so the first thing i'm gonna do is i'm going to create a new folder in this project and i'm just going to call it styles you can call it whatever you want but i'm specifically keeping out of that www root folder and the reason i'm going to do that is because this isn't going to be a this is basically a bit like a source file this is this is a css file that's going to get compiled by by tailwind build system into a final css file that will be put into our www root folder and we'll get with our application so i'm going to add a style sheet now and it's about here and i'm just going to call this at css cool so i'm going to pop some directives in here so these are tailwind directives and believe it or not these three lines of code are going to generate quite literally hundreds if not possibly thousands of utility classes and that's going to be done by by talwin's build system we can also add our own styles in here and i'm going to come into i'm going to come back to that later and and talk about that uh specifically but for right now these are the three lines that we need to put into this into this css file so really quickly for folks that you know aren't like css ninjas um is is that valid css or is that like some tailwind specific functionality that's happening there yeah that this is tailwind i'll be honest i don't actually know if this is technically valid css um yeah it's certainly um visual studio is is unsure about what's going on here which it kind of should be because um this is going to be uh what tailwind uses to deal with this is a is an npm package called post css which is a css processor and that's what understands what this directive means um so yeah it's a good question if that's i expect it probably is valid just because i find that most people who are building frameworks like some front-end communities tend to usually do things yeah they don't tend to break the standards too much so um but i i don't know for sure so don't don't quote me on that okay so that cause that kind of answers a question that we had in the chat as well and joseph was asking does tailwind use sas or you know something of that effect to you know kind of convert things over to css so taiwan doesn't use um sass itself what you you can actually use sas with tailwind as in um like i'll come back to this a little bit later but if i wanted to add my own uh because i can mix pre-made css classes so i can do like the traditional create a new css class and put in my properties and then reference it in my code i can do that tailwind doesn't stop me doing that um and if i wanted to use sas with those styles i could and it will still work with tailwind and they do have a section on their uh documentation about how you um work with the sas build system to run because you run sas you run your sas build system first output your css then the tailwind build system would run and bundle that in with all the utility styles but that's on their documentation so um i think it's like docs.tailwindcss.com um and that that kind of explains that there got it okay cool so we've got our app css file so the next thing we're going to do is something that i know makes net developers shudder slightly i'm going to add a package.json file okay oh there's a node in here we're going into like npm and node and stuff so let me let me just get that in here first so uh i'm gonna add a new item and i'm gonna just add in uh i suppose it could be any javascript file to be fair uh or json file even the yeah there's a json file there you go and you know to be fair i think i think we've all accepted now like 2020 2021 they're like you can't do web development without node.js i think it's just like we've accepted it it is what it is you know what i mean at some point in time it's going to show up somewhere whether it's using webpack or like tailwind css or some type of build utility to transform our typescript javascript css sas whatever at some point we're going to need to use node.js so we just you know we should just get comfortable with the idea yeah definitely and i think i'll be honest i don't know if it's going to use it while i just don't find it that scary i i understand i think i understand when you're coming from the dot-net world especially because obviously our back-end tooling is so good um it possibly can feel a bit like it can feel a bit weird but i i i think it's just different approaches for because they it tackles different problems and yeah and stuff and ultimately the the front end tooling is is still just light years ahead of of where we are at the moment specifically here talking with blazer because you know as as.net you know blazes our foot into that front end world um and we we've only you know we only barely put our foot down at the moment like we're so new into this um and i i'm sure i thought you know we will see tools come out of the dot net community that possibly help with some of this stuff and and things but uh hopefully i'm gonna show you today will show that it's really not that scary and and you know i can um i can hopefully convince you it's not too bad so we'll we'll see how i go right so what i'll do is quickly just mention so this is um basically just going to bring in a few npm packages for us so i've got some dev dependencies here so um the the kind of key ones that you need when you're first setting up um tailwind are these four at the bottom this um this one here is ver for something very specific i'm going to talk about in a second a little bit later sorry um but these are the four you need um which is tailwind css um and post css cli post css and auto prefixer and again this is all documented in in in tailwind getting started guide so um you can kind of go and see what goes on there the other thing that i've got in this package.json file is a build script so i've got this script section in here i've got this build css dev script and that uses post css and what i do is i pass it that app css file that we've just created with those tailwind directives in it and then i say so i want to output the kind of finished version into my www root folder css app.css and that's going to output that compiled css file at the end of it um so that's what's going on in that file hopefully it doesn't look too scary and and hopefully makes sense so the next thing i'm going to do is i'm going to add i am going to add a javascript file this time so i'm going to add a post css config like so and i'll pop some code in here now this is all you really have to do in this file is all it does is it it configures post css to use tailwind css plugin for it which basically allows it to know what that tailwind directive was all about in that source css file so that's kind of all that's going on there and some setup for auto prefixer and things um we can kind of save that off and we can kind of forget about that now we don't need to worry too much about that the final thing we're going to do is create a tailwind config file as well so let me pop that in there okay and so then kind of as you're doing that kind of just to recap so you have tailwind installed right so it's installed using npm and then kind of just going through that tailwind documentation there's some like utility things you need to get like so you got the post css thing there's the auto i think it's called auto fixer or auto preview right and then now what you're doing pretty much you're just setting up configuration files now so you have your package.json which brings in the npm packages but then now you have to configure tailwind and you have to configure the post css so that's why you have those two additional files right like the tailwind config file and then it was also the post css config file yeah exactly correct yeah exactly um so we'll we'll be visiting this tailwind config css a couple more times as we go along because we can use this file to literally customize every single part of tailwind so we can literally customize anything we want about it and what's also really cool about tailwind which i didn't mentioned earlier is that if there's something that you want that it doesn't do out of the box there's plugins as well it has a plug-in model and there's like loads of really cool plugins um that some of them are just really cool for dev um so like you can get one that will display on your uh in your web browser the uh like the the uh media query that you're at so as you resize your browser it will always display what level of media query so when you're doing like uh that md colon um utility that i showed earlier where it's like on a medium break point you can you can see if you're on a medium break point or not and if that style's applied and and whether you want to maybe change that to a different breakpoint size and things like that you can do other stuff and i'll show one later that does like some text shadowing and things like that so it's it's got like i said it's got loads of cool stuff to it but anyway get us going this is the basic conflict this is all we need to do we just kind of put this bit these bits in and and that's it now i've done all this copy and pasting you can actually do this with command line as well if you prefer with the command line i mean i think like me and you were talking earlier i i sort of mentioned i actually work daily on a mac so i'll be honest i use a terminal a lot so you can do like um you can do like temp uh there's some npm commands you can run that generates these files for you so you don't actually have to do them um but it's whatever you're comfortable with so that's the npm side of it and the javascript kind of tool chain bits but what i'm going to do now is show you how we can integrate it with kind of our net stuff so that we don't have to run like separate npm build commands and all this kind of thing so what i'm going to do is i'm going to open up my cs proj file and we're going to add in some new build targets here so i'm going to um pop in a kind of chunk of code here i'm going to work through this and i just want to be clear before we start that i'm by no means like a king of ms build targets and all this kind of stuff this largely is very confusing to me and i've i've kind of cobbled this together through uh reading documentation stack overflow and various bits of vlog posts and bits and bobs so um if there are any gurus who've ever built tasks and things they will they might find a more like succinct way of doing this but this seems to work fairly well um so so yeah so i just want that disclaimer in there um but anyway so what i've done is there's three targets in here and they're gonna run sequentially so and all of these three are gonna run before our the main build of our project runs so the first one that's going to run is this first one called check for npm so what this is going to do is it's going to uh run a command npm space minus v which is going to print out the npm version in a terminal now what happens here is if that errors because npm isn't installed um it's going to create this uh error and then there's a check here to say that basically if we have an error then we're going to stop the build and we're going to say print out this kind of message to say that you must install npm to build this project so that's kind of like step one for you know if you've got this on a developer's machine who hasn't installed node and npm uh just to stop because it obviously can't be built if that one passes and everything's good there the next one that's going to run is this npm install so this avoids just having to go to the command line run npm install or anything like that it's just going to run automatically when we build our project now this is going to rely on something else as well this is going to rely on an output from another part we need to add in here which i'm going to do this now actually before i forget so i'm just going to come up here i'm going to add in uh this npm last install what this is going to do is um basically when npm install runs it's going to create this file dot last install and it's just going to create it as an empty file doesn't have anything to it but it's basically just going to be used to check when the last time npm install was run um and it's going to compare that against our package.json and it's going to say if the package.json hasn't been updated since we last run or that since the that dot last install file was modified then we don't need to to run the npm install there's nothing nothing's changed if we have updated our package.json file then it will rerun npm install because we might have added some new dependencies and it will then download them for us so that that's kind of what's going on there so that's kind of interesting and i've actually never seen that before so is that something we just have by default or did you have to like install a thing to get that so this is all this is all ms build magic right now um this particular method i found on stack overflow post when i was googling about how do you run npm um as part of um basically and someone mentioned this technique so i feel really bad that i don't know who that was because i'd love to give them credit i so i i just want to be clear that i i've not some come up with some genius way of doing this this is this is traditional good development stack overflow development right here i call the floor copy paste i get it exactly um so what i did do though like any good stack overflow copy and paste i immediately went to the docs to understand what each bit did so at least i knew what my copy and pasted code was doing um so when i when i'm on a show like this i can actually explain it rather than just go oh it works don't worry about it um but yeah it's really i was actually really impressed that you could do this i didn't have a clue that you could do this kind of stuff so it's really cool nice so at this point we've now got all of our npm packages installed for us so the final thing that's going to happen is the build css target is going to run and that's just going to do one thing it's going to execute that build css dev command that was in the script section of the package.json file so if we go back over here this script here that is going to build that app.css file and generate our final css from the from the tailwind build system so that's just going to get executed and that's just going to be done by calling npm run and then the name of that script so at that point that should be it that should now allow us to hit build on visual studio and it now should do our npm install then run our build script and output our tailwind css file okay so then and then and then while you're doing it and having that build so would you say at least for this part of it this is pretty standard right this is standard you know setup because i saw some folks in the chat and they were asking wow can can this just be a template and can we just do file new tailwind with blazer or blazer tailwind and then just have this yeah i mean there's if you if um if people google there's there's um a couple of people who have created tailwind um templates um because obviously now the template system in net is is really easy to create templates essentially you can just kind of create a new solution modify it however you want and essentially i think you just put in like a template.json file and that's kind of like all you need to do to make it a template and then you can install them with the.net cli and you can package them put more nougat and things like this so i think there's some already out there um i actually keep toying with adding one to my blazer packages um where all of this work is already pre-done um so you can just do if you want to use tailwind with blazer um basically what i'm showing you would already be pre-done for you so um yeah i i i might if there's enough if people are really interested now i'll probably put that together because i've basically already got out i just need to add a template json file so um so yeah i can i can look at that but if we jump back to our output window we can kind of see that things should have kind of worked so if i like if i zoom down here um you can see that in our build output um you can see that uh that npm minus v command has printed out the version of um node that i've got running on my npm that i've got on my machine here you can see that we're calling that build dev uh build css dev command there with post css and that's all being done so everything's been outputted kind of like as we expected which is kind of good so fingers crossed like this has worked hopefully so we have a css folder we have a css file and hopefully if we open this up there we go we have a lot of css now so as i said that those three lines that we added into that other file now that is a lot of css yeah 187 000 lines that's a ton of css so that's a lot of stuff so um if we just take a look at this because this is definitely worth looking at for for uh before we look at things later if we i've just got my uh obviously my file explorer here as we can probably see and i'll just zoom in we're running it like 3.9 meg for that css file so this is by no means tiny at this point like yeah that's a pretty you know that's a pretty hefty css file we've got going on there and it's not surprising that's a lot of css we've just created but that's like every single kind of uh where it's not actually ever believe it or not this is not every single combination of css utility that taowin could produce this is oh yeah yeah this is a sensible default um i think adam and i i hope i get his name right adam waltham who's the guy who kind of made tailwind css uh he talks about it he talked about this recently uh in terms of their new feature called jit which i'm going to show you as well in a little bit and he basically said if you turn on every option in tailwind csf you get a css file that's around 20 odd meg and basically if you try to develop locally with that it literally slows the browser down the browser literally lags loading all the css um so they they've tweaked tailwind to have sensible default so this is a level that the browser can cope with and be really responsive and while you're you're doing it but you can manually turn on any other stuff you need in that configuration file as well so um so yeah anyway we've got our uh we've got our compiled css now so this is great um the final thing i'm going to do is i'm just going to add a reference in my index.html so this is the host page my blazer app to that that compiled css file so i'm just going to pop in a link here to that that outputted css file so i've got that now um everything's in there so fingers crossed if we go back over to um the browser we hopefully have something that looks a little bit nicer yeah that looks a little bit better already that looks a little bit better it's definitely not perfect we've definitely got some bits that are still missing here but you know it it looks yeah it looks a little bit better we've got our counter page and we can click our counter and that increments and we've got this fetch data page which looks really rubbish so we probably will do something about that um but yeah most of it's okay this is still a bit weird because that should say tailwind um but we'll look at that in a bit as well because there's there's something we can do there but you know overall it's looking it's looking a lot better so now we've got that done let's kind of move down a bit and talk a bit about actually using tailwind now to kind of style our app a bit i'm not going to labor this too much because i think there's far more intricacies in how you kind of get set up and working rather than actually just applying lots of utility classes um so i won't labor this too much but we'll just have a run through of it so in to do this i'm going to um jump over to that fetch data page so we we we saw that a second ago uh here it is it looks pretty rubbish at the moment this should be a nice table and it it it's not so let's go and see if we can improve that so the first thing i'm going to do up here is i'm going to just add in some some styling for this header so um what i'm going to do is i'm just going to say the text here should be 4xl i want it to be quite big because it's a heading i want it to be uh have a bold font and i also want to have a margin on the bottom of four now like say four doesn't it doesn't um mean four pixels or four rems or anything like that it's part of tailwind's uh sizing system and it scales it at a set rate so um uh four will equate to something like it will end up being something like 3.8 rem and then five would be 4.2 rem and it kind of scales kind of linearly like in a in a sort of nice curve um and things but again we can look at how we customize that in a bit so that that's kind of that bit so we kind of add some sliding to that header so we jump back over uh we'll see this will reload in a second i'm not using.net six here by the way so i haven't got the hot reload but you can see how it's reloaded and we've now got like a much better looking header on our our app so that that's better um so the next thing we're going to do is we're going to style this table because at the moment it's just kind of a regular table that's not doing a lot so um the first thing i'm going to do is i'm going to start styling these these these headers uh if i actually know sorry i'm going to stick some styles on the table first so the first thing i'm going to do is i'm saying this tail should table should auto scale based on what the content is so the columns should resize based on what's in them that's what table auto means as a utility it's the width of the table should be three-fifths of the width of the page that's what this means i'm going to say it needs a margin on the top of four and it's going to be and this mx auto is to do with margin so it's margins on the x-axis so that's the horizontal axis and auto basically means it's going to center it it's going to also apply margins left and right so that it sits in the middle of the page so that's what's going on there i'm going to put some styles on these row headings so these are as you can see relatively uh relatively verbose and this is kind of something that i think sometimes can scare people a bit with utility-based frameworks they kind of see all of these styles going in and it's like wow that's a that's a lot of stuff that's a lot of markup um i'm gonna again we'll we're gonna address a technique with this with repeated uh kind of utility styling in a second but just to whiz through this this is basically saying each uh header is going to have a padding of two it's going to have a boredom border on the bottom of four that board is going to be purple and it's going to be 600 level of darkness the text is going to be left aligned it's going to be uppercased it's going to be small text and this tracking wider is the space between the letters of that text so just adding a little bit of um letter spacing on the words just to make it look a little nicer so that's what's going on there and then i'm just gonna do the same with these cells so all i'm gonna do on each of these cells is just give them all a padding of two um just to give them all a little bit of room to breathe a bit of space so if i save that now and we go back and wait for this to reload and hopefully this should look a hell of a lot better than it did or that it does right now so cool so there we go we've got a much nicer looking table now it's got a bit of room everything's a bit more spaced out you can see that we've got that big purple border going on the bottom of our headings they're all in that uppercase they're all bold and stuff like that and we've got a bit of padding around each of these so that this is good this is looking a lot better um now the next thing i'll show you is something to do is like a hover effect because that's something that we you know that's something that makes pages feel a little bit more kind of interactive i could sort of have when my cursor goes over one of these rows i could highlight the row my cursor's over so i can make it easier to read and things like this so we can do all that with our win really easily so what i'm going to do is on this table row i'm going to add a couple of classes or i'm going to sorry i'm going to add a class but it's got a modifier to it so what i'm saying here is when the cursor is hovering over this element apply a background that's green and it's 100 level of brightness so 100 is quite bright 900 is the darkest so that every time my cursor hovers over it i'm going to get a green background on that row so if i save that when this reloads this time um we'll be able to see that in action there we go and now when i hover over i'm getting this green background and this is where i think the real impact i think is with tailwind doing something like that writing those properties into css class manually can be a bit laborious um just literally that one that one class bang a few seconds later you've now got this lovely hover effect that's that's happening and you've not had to do a huge amount there so we've got that in there pretty easily so i think hopefully what that's giving you a feel for what is how quickly you can build up a decent looking style using these utility classes now i know i'm i'm kind of pasting in snippets of code there but that's mainly because no one wants to sit here and watch me type out each individual class but you know once you get used to those styles you can really rapidly like fire these through um which is is um is really useful sure and so we got a question in the chat really quickly that i wanted to to send over to you um this one's coming in from youtube um and the question pretty much is so in case we have lots of generated css does blazer server model efficiently send this over on demand on signalr so he's pretty much asking how the diffing works um with with blazer server specifically versus like just laser web assembly yeah definitely um the answer that is is probably yes um the algorithm and the compression that's used on the signalr connection for blazer server is like ridiculously efficient i mean the job that the blazer team have done with building that i think is is very very impressive the speed the and the size and the messages that go back and forth um are very very very tiny um i think um you very rarely see uh message messages going back and forth over that signal our connection more than like 100 bytes it's it's really really really really compressed so i wouldn't expect you to see any issues with performance in blazer server with with doing um generated like generate tailwind classes like this um i i'm guessing specifically that question is about when you're using uh like your c sharp logic in your blazer component to control when these classes are applied because um like these ones here for example they're all in that generated css file so they wouldn't be going back and forth over the wire the only scenario that would happen is if i had some logic where i said well i only want to apply like these three sets of utilities when a variable is true um so but but like i say it's very very um efficient when it's when it's doing that so so yeah that shouldn't be a problem awesome and then there's a lot of folks here saying how much they love your they love this presentation so far so we're going to keep it going right oh cool well i'm glad everyone's enjoying it that's that's that's good um so what i'm going to do now is show you something and i mentioned obviously obviously to say like when we were we were talking before is this is something i decided to throw in without without testing because everyone likes to you know run untested code in a in a live situation if you don't do it exactly if it doesn't break it's not live so um that what we're gonna do now is um i'm gonna enable a feature in in um tailwind which i think a lot of people really like at the moment which is dark mode everybody loves a bit of dark mode um so let's have a look at how easy it is to kind of add in dark mode starting with with tailwind so what you've noticed here is that uh what you'll notice here in the tailwind config is that dark mode is set to false by default now part of that reason is because it's going to generate a load more classes which increase the size of that app css file that's generated so it's off by default but we can turn this on it's got two modes media or class now media is is kind of probably the one you may want to do which is it's going to um depending on who the user is and what their system set default is set to it's going to inherit that so for example my my system here is set up with dark mode as the operating system default so this is going to pick that up and it's going to enable dart mode automatically if you want programmatic control over that you can use class and then you have to do a little bit of manual work in your app to toggle it on and off basically so um you can kind of cover good scenarios there but um basically what we're gonna do is replace uh this line here with um this one here so all we're doing is um changing dart mode from false to media so it's just going to inherit that so i'm going to save that i'm going to do another build because that's just going to rerun that build system again um and what we will try this out on because that was the point i haven't really thought about where a good good place would be to try this it's probably going to be on the body tag and we could probably see if we can get like this background to go like a dark grey when it's dark mode and then white when it's uh like not dark mode so let's let's have a go at um let's have a go at doing that so if i go to i'm just going to do this because i noticed there's a that probably didn't rebuild so if i go in here what i can do is say on my body tag for example um i could say um okay part equals and i can just say dark and that's kind of my prefix for saying apply this style if dark mode is active so i can then say like right bg uh and we'll that's that can be gray and i don't know we'll go we'll go i don't know we'll say like gray 700 or something like that so if i say that off now and we go back over to uh ah i will just need to do a build because that doesn't always get picked up there you go let that go through and then when this refreshes oh boo it didn't work so unless i i sometimes do this i may have spelt grey wrong is it gray that way round aha oh there we go that works it's just my bad spelling so as i said because my operating system my browser and everything is set up here to use um let's say used art mode you can see now that it's applied that style now i'm not 100 sure if it's if it's just the browser so i think like if i went to settings here now and said on appearance i want i don't know i've already got set like mode here so it is picking out from my my actual windows machine um so because i've got that set to dart mode um it's there now uh i was just thinking actually [Music] if i minimize that just trying to think now where dark mode set colors ah there we go light mode back to here refresh oh that's weird i thought that would i thought that should just pick that up so i just want to double check my settings here that's light not any caching going on no unless less i need uh that might be what i need actually thinking about it let me try to put that in now um and doing a rebuild could be caching it too so maybe you need to do like a hard reset yeah we'll see if they say oh no it's not having it oh that's weird but then this is what happens when you do untested demos so um that's kind of entirely on me okay cool well i'm going to put that back to dark mode because it's like the light mode is burning my eyes um it's weird they applied it did apply our dart mode which is it's kind of weird that it didn't then go back to to the white but you know um sailor v i called it before i started so you know i said it was going to be a dodgy demo so um it rang true so now we've kind of uh played around with with the the kind of half working dark mode um that we had um we'll get back to a bit of customization now so we've kind of looked at everything so far with um oh someone's just said i think in the chat put bg white before the dark mode declaration that might that could have been it actually maybe that's a good thought yeah that was a fair that was fair play um so i've obviously showed a bit about like just using it directly so how do you actually customize it because um while you can do a lot without the box um you probably do want to customize certain things as you go and things like that so um we're going to just add a variant into the tailwind config so what i want to do here is i'm just going to check that i've got the right bit of my demo yeah so what i want to do is on this fetch data page what i think would be really cool is on this table every odd numbered row was styled slightly differently it gave a slightly different background color so this is something that again can be quite tricky to write when you write manual css so again towing can make this quite easy for us um but we do have to do a little bit of configuration on this one it's something again it's something that's not actually enabled by default so um in this variance extend object i'm going to pop in this background color and what i'm what i'm basically doing is saying i want to enable this odd pseudo element which is a css pseudo element on the background color styles that are generated by by um by tailwind so i'm going to do that and let that rebuild and rebuild those classes and then once i've done that i can go back over to my fetch data page and now i'm there i'm going to go on to the table uh i'm gonna go on the table body here oh actually no sorry i don't want that there do i want the table row and i'm gonna pop in this um this um class so what i'm saying here is on every odd row apply bg purple 50. okay so that's what that's doing um so if i if i say that and we go back over hopefully when this refreshes in a second we'll get some nice purple rose on every odd colored element there we go so you can see now we've got kind of this light purple on every single odd element now if you've ever had to do that man like writing that with manual um sort of css properties and things this can be a bit fiddly um i can never remember remember the syntax i'm always googling the syntax and stuff so this type of stuff again really trivial with with tailwind um we just kind of just enable it and then we can just use it it's it's um yeah really useful got it so another thing there's a lot of those little prefixes right like so you have hover you have odd so i'm guessing there's a lot of those little prefixes that you could just add semantically to add meaning to my css so kind of like what you said like it's a little bit more succinct for me to do it this way versus like the option that some other you know css frameworks have yeah exactly exactly right exactly right um so another thing we're going to do here as well is extend the color palette so what one of the things that's cool with tailwind it ships with a really awesome color palette so if i just kind of jump back over here and reset this to a more palatable size we jump over to the documentation and go down a bit we can see there's this color section now this is the color palette that tailwind ships with by default so you see me talking about these uh color numbers so you can see it ranges from 50 which is like the lightest shade all the way to like 900 which is the darkest shade so you can use these numbers to create like um they're really useful actually for when you're doing uh want to create like accessible buttons and things where you want like colored buttons and getting a good contrast ratio things like that um you can do like a really light colored background with a really dark color of the same the same color and it will kind of work really well for accessibility and things like that so um having this huge array is really is really useful they also have a like an extended version which is down here which is like even more and you can enable all of these as well if you want to but they're not there by default so because again this creates hundreds of variations for everything so they're not turned on by default but in this instance we actually do want to turn one on because what we want to do is have this tailwind the word tailwind here using the kind of teal that tailwind uses so we're going to turn that on in the configuration next so in my tailwind config file first of all i'm going to do an import up here i'm just going to import those colors so that's that full colored palette from tailwind css so i'm just going to bring that in here and then once i've done with that i can extend the theme and i can just say i want to extend the colors that sit that tailwind has so there's two ways you can you can configure tailwind you can replace what's there or you can extend what's there so it's you know really useful in that regard and what i'm saying here is i don't want to ditch any of the existing power i like that i just want to add to it so all the colors that were there before are going to stay there but i'm also now going to have access to this cyan so that's going to generate a load of utility classes based on cyan now so i've added that into my configuration so now i've done that if i uh sort of just rebuild this i've already um and let this go through like that cool so i'll let this refresh and there you go we've now got tailwind being put in in cyan i'd actually already put the utility class in on this one um but obviously it wasn't being uh wasn't interpreted properly because cyan wasn't added to the palette so we've added that to the palette and now we've got tailwind showing up in in kind of more of the tailwind sort of teal color so we can extend our color palette that way you can obviously put whatever you want to in there as well so this is using this um this is using the colors that we've imported up here but you could as well just easily put hex colors in so um i can i can quite easily at this point um put i don't know i can give a random name so i'm calling my red and then i can uh put like a some kind of like hash code in there and and that all works fine so i can really customize this however i want to customize it that's nice so you could essentially define your own calls if you wanted to exactly yeah yeah you can you can do literally whatever you want to do with it totally define your own custom palette ditch the existing one or build on top of it it's totally up it's totally up to you the other thing that we can do here like i said is it's got a built-in spacing system so um this is quite useful i'll just uh go shoot back to the docks for this you see where i put like things like margin like mb-4 mb you know mt-3 um this is all using their built-in spacing system so um the spacing system like say gives you these numbers that go up in value but they they kind of can relate to any um any measurement you you want them to so um tailwind ships with with kind of sensible defaults for all of this stuff so if i sort of scroll down to the bit of the the docs that talk about uh margin and padding for example by going to margin you can see earlier we're talking about like a margin top of four so if we look at like what four means four is like a margin of one rem that's what the default is but we can customize all this and we can tweak it and we can set it to whatever we want to set it to so how do we do that well basically um when we're in our theme extension bits here we can we can just kind of extend the theme with more stuff so i'm saying here i want to extend the current spacing i'm going to add some extra ones to it so by uh by default out of the box um tailwind goes up to a spacing number of i think it's 96 is the highest spacing it has out of the box so um basically what i'm doing is adding two additional ones on top of that of 128 and 144 so um by doing that i'm giving them uh i then say what particular measurement that then translates to for me so 32 ram and 36 ram is what those two values would mean in my spacing system um so once they're in there um and i've built that all any uh utility that that uses spacing will now have those two spaces as an option so margin padding uh width any of those types of things will now have that as an option to it so if i go back to my like index.razor page i can now go like mt dash i can go like 128 and you can see now in the intellisense it's appearing in my list of available um utility classes uh because it's now been generated for me um by that not what i wanted um by adding that extra configuration in so uh if we go back over here now let's uh let's quickly rebuild and refresh and i'll go back to the home page you'll see we'll now have a whacking huge uh sort of gap at the top um above our header because that's put in that huge 32 rem uh spacing in so let's say you can customize this system as much as much as you want to and i think that's again one of the really strong points of using tailwind to build out your apps i'm just going to get rid of that because that's that's pretty bad cool so we got a lot of folks in here that are asking about not only the customizing of it but like now that you would customize all these styles and we have like these different options that are generated how do we like bundle this down right because i think initially when you showed us the css file was like what was it eighteen thousand something like yeah it's 187 000 lines of code and it was about 3.9 meg or something like that i believe yeah so that's a lot of css right and obviously not what we want to ship yeah yeah like things yeah and i think the important thing to point out here is we've enabled dart mode now we've added in some more spacing and we've added in uh some extra colors and background if we jump back over to that file look where we're at now so we're now at 7.4 meg so you can see like how quickly that css file can like balloon when you and we've only turned on a couple of extra things here so this can get really big um what we're gonna what um what i thought we'd do is i'll talk about two other little bits and then we kind of loop back around to the the sizing issue and we'll deal with um we'll deal with that certainly the the production bundling minification bit i'm going to deal with right at the end um but i'm going to show you another feature of tailwind which kind of almost makes that a null and void thing as well so we'll we'll get to that sec okay um what i thought we'd talk about next is uh because because just like you i asked on twitter like if anybody had questions and one of the ones that came up was around uh repeated styles okay and how how basically how or how how can i deal with like having these really long kind of chains of utility styles in my in my apps um personally i don't really have too much of an issue with this here but um what probably i do have more of an issue with is the fact that i've now got like four repeated sets of these things so if i want to change this um it's quite laborious i've got a change like each row and everything be far nicer i could somehow kind of put them together a bit like a traditional css class would the good news is i can do that and i can still keep the kind of awesomeness of utility styling so what i'm going to do is i'm going to jump back over to um that original file we created that original style file we created um oh sorry app css file we created with those tailwind directives in it and inside here i'm going to add in um i'm going to add in a style so i'm going to add a regular css style here called table dot table header okay but i'm going to use another tailwind directive this apply directive and then i'm just going to actually put that same list of utility styles that i had in my in my table there i'm just going to put them in here instead and what's going to happen is tailwind is going to translate that line into a final css class for me i'm not going to have to get involved in it so i'm going to get the benefit of a kind of centralized class with all for this for this style um but without having to write any properties manual css properties myself i can still keep using that utility which i i think is i i love this feature i think it's so cool so if i go back to fetch data now um basically what i can do is i can i can sort of select all of this and get rid of it like so and i can just replace it with that um that table header class that's been defined over here so i've got my table header class now and i can just use it like it was a regular a regular css class so if i if i come back and we'll we'll just let this finish reloading and basically with this um if i jump over you can't see any difference nothing's changed because what i've done is i've still got the same styling i've just moved where where it's been applied so if i uh right click on this and inspect and go in my browser tools you can see now i've lost those utility classes here i'm just using that single class that i had before um and what that's done is over here you can see it's generated a class with all of those prop those regular css properties in it translated from those utility classes that i use for that apply directive so i just think this feature is awesome it's so cool because you get all that nice flexibility of utility styling but when you do find a repeated style you can just bundle it in a central place and then just reference it and then if you do want to change that style for your app you do it in one place it affects everywhere that references it so it's a really it's a really cool thing now so real quick too another question coming in from the chat this one popping in from youtube is it possible to define entire color palettes or perhaps apply depending on the system mode so i'm guessing you're talking about like you you showed us that tailwind css that config file so yeah i'm guessing he's talking about yeah yeah definitely so um yeah basically um you can you can literally do whatever you want in here so as i mentioned a second ago what i'm doing here is because i put put colors inside of the extend object i'm what i'm doing there is specifically saying i want to add this to the existing color palette and i've like so i've defined a color here called cyan and that relates to this cyan that's being imported from the tailwind css colors package uh like i said to you i can uh or like i showed a second here i can just define my own name so like i said i could my red and then i can i can then just say right my red is is gonna be like this hex code and i can then just create my own palette from there and do whatever i want to do and that will be based on top of the existing one or i can move this color i can take it out of extend and put it directly in the theme object and then it becomes the color palette and it will ditch what's there already and only use what i've i've supplied so like i said it's totally flexible and down to what you want to do so you can totally control it 100 yourself or you can just add to what's there and and sort of tweak it however however you however you see fit i think is that that covered that question didn't i think yeah that should query i'm just checking to see if there's any other questions but yeah that that i think that makes a lot of sense yeah that's cool so yeah so we've we've we've done this with the table head and we've done that one thing as well i just probably want to point out is that you don't also just ha you don't have to use kind of like the regular uh you don't have to use these you can use like regular um like selectors as well like css selectors like you would do in a in any other style file so i've used a class here but i could also do like table chevron uh like tr and or td sorry or whatever or th in this case um so um what i can do instead is like say instead of doing that um i could do this and say right um my if i've got a table that has a class of weather table for each table header in that table apply this style so um that all works as well so basically what i just want to show there is that you don't just have to limit it to only css classes like that you can still use selectors so so that all works and that that's good um another uh thing you can do here as well is you can just style as well straight html elements so like my h1s in in this app are all using the same three combinations of utility styles so again i could do the same thing i can say for every h1 element in my app apply these styles and then i don't have to apply them um manually i can just write my my h1 tag and just get on with it and not have to keep repeating that code so um all the kind of regular ways you do this is is still going to be supported you can still do it so so yeah i just want to show those two kind of bits as well and make make that point really right right um quick question coming in um i think i have the answer to this but i'm going to make you answer it uh nicholas is asking can you swap themes at runtime uh so like as in like complete color palettes and and everything i'm taking from that so you could have like one set of colors for one environment and one set for another one that's the way i'm interpreting it uh i i i guess so i mean so i know a little bit earlier you showed how you could swap teams based on the um like the system right like so or whatever cases so can i can i have other ones can i have like distinct themes that i have right and then based on whatever is happening can i say i don't know like this is an admin theme so like the admin login is red hypothetically right and then you logged in as a regular user so your regular login is blue you know like like something of that sort yeah so basically kind of defining your own like pseudo element piece so like that hover colon that's actually a really good point thinking about it off the top my head i actually don't know the answer that i would expect you probably can um but you can definitely um you because this is um this tailwind config is a javascript file you can just perform regular like logic around some of this so you like you can like you could um also have like two versions of this so you could have like a tailwind config for dev and a con and one for staging and like one for production and you know use a different one depending on what environment you're in um and that could contain them different styles uh or different configurations for your theme so you could then um you could have like a uh like like say like i don't know this is a bit abstract here but like this color is is cyan and that relates to a particular hex code but you could then say well actually where i say cyan in dev i want this like hue of it but in staging i want a different view of it for example and you could do it that way um but defining your own actual pseudo-elements like i'm not i've not actually tried to do that before that's a really good question i'm going to take that away and have a look at that because that actually be really quite useful um that could be cool and then i see some folks in the chat also talking about allowing the user to switch themes so you know you've gone to some sites and maybe like the top right corner has like a little drop down and then you you know select option x right of available themes i'm guessing i'm guessing you could probably do that but could you would you need to still have multiple tailwind.config files or could i do it with a single config file you may do like so i think i definitely would i definitely uh would feel i definitely want to check up on this on this one because i it's definitely i've definitely not tried to do this yet like like i said with with the dark mode specifically you you can do that and certainly the um the tailwind docks uh actually describe a few ways that you could do that as well um and they talk you through how you can have uh what we saw which was kind of the inherited one where we use media uh or you swap it to class and then you you can then have that toggle like you see on websites don't you wear like toggle dark mode on and off and you can do that and you can build all that with tailwind and it's got uh they've actually got like an example of how to do that toggling in their docks so that can definitely be done with dark mode yeah um i think it's yeah i mean she can always use dark mode as a bit of a way of doing it as well like you could say like dark mode and then because you're saying is when dartmouth is active apply this particular style doesn't mean that actually has to be dark like it could just be you have a theme toggler and you know just use dark as the the wave trigger the dark tag is the way of triggering that other theme um so yeah you could do a few ways but yeah i'm definitely looking for that other one though that that first way um cool so uh yeah we're getting through stuff here so i just want to show you quickly a plug-in um as an example of how you can then extend towing to do more stuff that it doesn't do out of the box so i'm going to do a text shadow plug-in because like tech shadowing is quite hard and i think shadowing's shadowing anything with css is quite hard like it's quite a like quite a gnarly statement you have to write for the property to get shadows and it's it's um it can be really hard to read and understand and things like that so um talwin provides a load of shadowing out of the box for like shadowing of div or stuff like that but tech shadowing is kind of like a different problem and there's a plug-in for that that allows you to do that so um what i'm gonna do is go back to uh the package.json file i'm just gonna add in another plugin um so um let me go down to my extending and i'm just gonna pop this in so this is a tailwind css plugin called text shadow so i'm going to pop that in there and then i'm going to go into my towing config and i'm going to replace the plugin section and what i'm saying in the plug-in section is i'm going to require that particular uh that particular package that i've just i've just referenced in the package.json file so that's gonna that's kind of all i need to do now that'll import it now different packages uh can also let you do configuration so this is one of them you can actually tweak some of the shadow stuff um other plugins like again you can just be really like you really take full control of what they do and really tweak stuff um but i'm just going to show you a real kind of basic uh sort of implementation here so um if i do that i'm just going to rebuild that and that's just going to uh bring in the new npm um package let's run a you can see just quickly see at flying by the npm install running as part of that build target we we created earlier um so that's all gone through and it's rebuild everything so what i'm gonna do is in the uh i'll go back to the app very quickly reload what we're going to do is drop a little we're going to put a little bit of a text shadow on this blazer word because just to make it kind of stand out a little bit more um so in my shared folder i've got my main layout so um this is the this span here is is that um that word blazer there so i'm just gonna go in there i'm just gonna add in um [Music] so this is a utility class that's provided by that plugin so text shadow excel so i'm going to pop that in there i'm going to save that and then when this rebuilds if we keep an eye out around that blazer word you'll see it will get a nice shadow behind it now which will make it pop a little bit so you can see there now we've got that kind of text shadow going on behind and i'll just zoom in you can see it just makes it stand out off the page a little bit makes it just just feel a little bit more interesting makes everything feel a little bit less flat um and stuff so so it's a small thing but you know when you're creating sort of more rich uis and things like that these little effects can can really make a difference to users and and kind of uh the look and feel of of your application so um yeah and it's cool to see let's say how you can then extend these features of towing and obviously if it doesn't do something and there's no telling plugin for it you you know you could always write your own as well which is scorebox so you know you need to know quite a bit of javascript there because it's all all javascript based um yeah i can definitely see how it adds more dimension to the text too and i think when it comes to things like accessibility for a lot of people being able to like very clearly identify the text or you know have it have some more substance definitely makes a difference yeah yeah definitely definitely so that's the extending part now um the last kind of a few bits that i want to talked about so there's a feature that got released recently and i think is actually technically still in preview for tailwind which is called uh jit which it did just in time compiling of css now this is a really interesting one because what we've been doing so far is we've been taking those three lines of tailwind directives and generating that massive huge uh css file that's like bloom to like seven and a half meg now with all of those classes in it now most of them we're not going to use our app is using an absolute fraction of um of the of the styles that have been generated right um what jit does is it will look at our app and as we apply styles to our app it will then regenerate our app css file with that new style that we've just added so basically what what happens is we only get the utility classes appear in our final css file that we're actually using in our app now what why this is really cool is a couple of things firstly you could turn on every configuration available in tailwind um and you will get a zero sized css file until you actually use a utility and then it will only add the one you use so like i said earlier you can't turn them all on by default because it will just kill the browser really with too much stuff so that's really cool it also enables some really interesting extra features that they couldn't do when they were just kind of pre-building these these um utility classes so what i'm going to show you this in a second when i enable jit instead of having to go into the config file now and create like new spacing um ranges and and like i showed earlier i can actually just do it directly when i'm creating the utility when i'm writing the utility class in my html and it will automatically generate it for me on the fly so that is just like such a cool thing and i can change stuff together i can chain before and all this kind of stuff so um let me turn on jit and it will make all of this hopefully come alive so just to kind of refresh uh recap sorry before i do that this app css file at the moment 7.4 meg okay with with where we're at right now so we're going to turn on jit and see what happens so um to turn on jit i'm going to go in towel and config and i'm going to pop in a few bits so um there we go so the first thing i'm going to do is add in um a couple of extra bits onto this module so first of all i'm going to declare that i want to use jit mode with tailwind css that's the first thing i'm going to do the next thing i'm going to do is i'm go i'm going to declare this purge array now what purges purge.css is used or purges used with post css and what it's going to do is it's going to look at we give it a list of all of the files in our app that use these utility classes so in our case it's going to be the index.html in the in the www root folder that hosts the app the blazer app and then any of our blazer components so anything that's got a dock razer extension on it could potentially hold utility css classes now what's going to happen here is the jit compiler is going to look through those lists of files and strip out all of the utility class that we're using in them and then make sure that they're the only ones that find their way into the final app css file so one more time just to recap 7.4 meg for this app css file at the moment so if i if i save that right now um and if i uh also then go over to my package.json file i'm going to update this build script as well so i've had to do basically i've just had to add in an environment variable here so what i've done is i've added in this tailwind environment this tailwind underscore mode environment variable and i've set it to build okay and this is something that you need to do because that tailwind understands what this means it means basically do a one-off build using the jit compiler um tailwind does have a mode where it doesn't watch um but that kind of doesn't we we could do that but because um net is also doing a watch and doing a rebuild um we kind of might as well just do these one-off rebuilds it just kind of works a little bit better with the with the net build system and it kind of makes things a bit slicker what i do want to point out though and this is a pain point for people and and um i feel that pain because um when i was trying to get gip working for this demo um because i'd done it on a mac and it just worked on my mac when i came to windows it didn't work and i literally spent hours like trying to work this out and people told me it didn't work on windows and things like this the reason it doesn't is because the way we set node environment variables in windows is different to how we do it on linux-based os's so in um in mac os or on linux um if i if i remove this first bit i could just have tailwind mode equals build and blah blah and it would just work but on windows um i need to i'd have to use the set prefix on windows to set a node variable so instead of cross end i'd say set and then tailwind mode and that's how you do it on windows however at my where i work at deploy we work across platform um so i've developed on a mac another developer developers on mac another developer has a windows box we deploy to linux servers so we need stuff that works across environment and there's a node package called crossm that allows you to set environment variables um regardless of of the particular platform that you're building on at the time so that's why i'm using this cross m package down here and that's what this cross end bit is in the command i could take this now and run this on a mac and it would still work absolutely fine i could run it on linux it would work absolutely fine um and obviously it's gonna work on windows because i'm now about to show you that so that's probably a real key point if anyone's tried to do this um on windows and and failed that might this might be why so i just want to really highlight that one yeah that's a good point to share too because i'm sure a lot of folks like you might build on windows but maybe you deploy on linux or you run on something else and the last thing you want to hear is oh it works on my machine right but it didn't work on like the production machine for whatever the case is but you know because the environments are different we might have these types of scenarios yeah exactly right so um all we've done so we've done all that updating everything there now i'm gonna save that now just going to do one more check still 7.4 meg so let's do a build and see what happens okay so you're doing a full-length ms build build yes well incremental build at this point but it's going to run all those three targets we created and run up it's going to run our full kind of uh javascript build system if you like at this point look at that people whoa nice 13k from 7.4 meg that is so cool i like it it's so cool um what's really what's really cool about this as well is that and why again what i really like about the jit system is that now we're working with the file that would be the same in in production so we don't end up with two files either so we don't end up with a scenario where we're using loads of utilities in dev um but when we we go to prod something might have gone wrong with the purge and now we've got a small file but things don't work this is actually the same as what would happen in in um let's say in production and and it's it's really quite cool um i think i saw someone on uh youtube just say can you show us the css file so this is the css file and if you remember before it's 187 000 lines yeah it was a lot of css it's now 610. that's a couple hundred nice so you can see as well look that's that table header class that we we created in our uh one using those that apply directive so you can see that's being translated now into the final css and then you can see this has got basically a load of resets going on here so this is all um sort of a basic reset that's going on and all the utility styles that we use from tailwind will all get added to this as we use them within the app and the they'll get kind of picked up as we as we go um so i'm just gonna um let that go through and let that go there now what i did notice and again this is not only unexpected at this point i do know sometimes i i hit some caching issues with this so sometimes it won't catch the styles and i did find another problem and it may have uh it may have triggered this one uh and it might have done it this time by the looks of it and that is when you're building through visual studio it sometimes kind of plays havoc with the jit system and it doesn't always pick up the files correctly and that usually seems to be because you're using it with ios um so what's happened here is if i go in that app css file it kind of already had it i should have probably called it out straight away if you look uh this is all the css reset stuff going on yeah and then we've got our table header class and we've got nothing else none of those utilities that we've used in our app have been applied to this file um so it's not basically what's happened is when it's run through the jit and it's done this part of it it's just not picked up those styles properly and i say what i found after a lot of pain with this was that if you use the net cli which i do on a mac exclusively pretty much it doesn't happen and what i did find was changing this to use um kestrel directly that also seemed to sort of problem so i really hope it sorts the problem this time so um yeah see what happens oh it's kestrel now and um let's run this and and see what happens when we run it with kestrel it's so funny you said that it's someone in the chat um from youtube is saying use a different browser but now you're using a completely different web server i'm using open uh yeah i'm going completely different web server now so i've really gone all the way out there on it okay so this is struggling this time around unfortunately um so it's not it's not picked up those changes um i think it's probably fair to say this i reiterate at this point the jit mode from tower wind is still in is still in preview um okay i definitely have left problems with this on my mac so i'm not hating on windows and v and windows vs absolutely no windows shared at all right no shade at all but um i i definitely hit some problems with this while i was working um working oh what what happened i've got two purges in so before i i'm definitely not throwing shade on oh okay 100 there that's my bad okay let's let's rebuild this again and uh there you are talking all this smack about ios i'm talking about the bst gonna come after me now with pitchforks and stuff like windows and oh no so uh let's see what happens if we actually i'm going to close that down before i go any further so let me i'm going to close that one down as well let's just let's just take a second here we'll close down kestrel uh we'll get rid of that i'm going to switch back to iis because you know as trash and is express not working properly you need to do a rebuild or are you should you think you should be fine but this should go through again it should go through this and oh look it's working now it works awesome so it turns out if as a developer you don't make a crucial error with your configuration it turns out everything works fine let me just go like mia cooper to to visual studio to the is express people like um i love all of you you're working amazing please don't take away his mvp please don't take away my injury yeah but cool so anyway um now we're working again if we go back over here as well we can see like over the network if we just refresh this again um when all the various files come in um we have knock our things let me do a hard refresh on this you can see our app.css coming in over the y now 6.6 k so um with the compression of bits and bobs it's like you know it's got dramatically smaller because we've been using this so um so that's a a huge benefit of using jit because it's more real world uh sort of example of what's going on um if we kind of come back over to our app now um you know i said to you a minute ago about when i watched create new sizing and things i had to go into tailwind configure that new size and then rebuilding it it kind of generated this right this is where like jit's like pretty cool so what i can do instead is i can do arbitrary styling right so i can say i want a margin top and then i use the square bracket syntax and i can say i want a margin top of 111 pixels right so i just i literally just write that i don't i don't go and do any configuration i save that i wait a second come back to my app my app refreshes and now if i go in here i've got this margin top there and if we go over here oh look at that we've got oh nice a utility class that's been generated on the fly by the jit compiler of 111 pixels because i arbitrary said i want 111 pixels it could be 112 could be 109. it could be seven i can could be i can make that number that you decide any number i want to put in there i could use rems i could use ems it doesn't matter it's gonna it's gonna build that for me on the fly and that's another sort of really cool part of jit because it can you can do these kind of on the fly things um another thing that adam waltham does when he he's got a video again on the jit section of the documentation he's got a video there that introduces jit and he actually shows you um as well another feature which i won't get into here where you can chain loads of those kind of pseudo element styles you can say like when you're hovering and it's dark mode and you're on a medium break point and like i don't know it's tuesday and it's 10 o'clock apply this style and it will just work it all out on the fly and things like that so that's definitely worth checking out as well to kind of understand like the full kind of um sort of utility of jit um but yeah so that's that's jit compiling and and that's definitely what cool so we're just going to start to wrap up here now so i'm going to kind of finish off by talking about how you would then move this to production because while we've got this tiny css file at the moment it's actually still could be better because it's not minified or anything at the moment it's just sort of all these styles but it's still sore so just to just kind of recap where we are at the moment so we go back to our currently compiled css 17k at the moment okay so we're still talking like tiny tiny amounts but let's see what else we can do with this so i'm going to talk about how we can deal with a release setup so um i'm going to go over to my package.json i'm going to add in a new a new script here to my script section so let's uh let's do that so what i've done is i've added in a new new script here called build css release i'm i'm using cross m but i'm using a node environment variable and i'm saying the node environment is is going to be production this time and this is going to tell tell in css that i want a production build so strip out any utilities i'm not using but because we've already got jit compiled with that purge setup that's kind of already happening anyway so we don't have to do anything else here and then after that i'm still running the same command i had before post css passing in our app css from styles and it's going to output one over here but this time round i want to do a bit more i want to minify it because you know going to production i want everything as small as it can possibly be um so what i'm going to do as well while i'm here is i'm going to actually know i'm going to come back to this in a second i'm going to jump back over to my cs proj file before i go any further as well so in my cs proj file you remember from earlier we set up this build target and it was just going to run our our dev build command whenever we built our our app well i'm going to replace that so i'm replacing it with two commands this time and i'm putting a condition on them which is another thing we can do with ms build which is cool so what i'm saying is when the configuration is debugged then run my build my build css dev command when the configuration is release uh run my build css release command okay so that's going to call either one of those scripts i've defined in my package json depending on whether i'm building for production or release or whether i'm doing local local development so so that's what we've had to do in the project to make it work with our build system so talking about minification i'm going to add in a another package here for that from npm so this package is nano css if you've done any bundle in minification with javascript build systems you probably know nano css it's quite popular and it's just going to minify uh it's going to minify what we do it hooks in with post css really well so what i'm going to do is go back to my post css config which we had right at the start which we kind of said we didn't need to do a lot with i'm just going to kind of replace it and i'm going to replace it with a slight enhanced configuration so what i'm going to do is i'm going to pass in the environment variable into into the configuration and for css nano i'm going to say if the environment is production then i'm going to say preset default what this essentially does is say minify the file that's basically what we're saying here if it's not production then don't do anything okay so that's that's that's what is happening there so i've done that that's all in place so you can see um up here i've got my release configuration set up my 17k file and if we just double check my app css you can see it's definitely definitely not minified at this point so now i've got my release build set let's build the solution and you know as you're doing that i'm actually surprised that minification isn't built into one of these frameworks already like i'm surprised you have to install another thing to do it okay it just seems like a common use case that i just kind of expect to be there in the box now yeah definitely i think it's an interesting one because i i think certainly i my feel from my experience and my the work sort of the the javascript community involvement i've had is that it's very much a case of like don't repeat yourself it's like if there's a tool that does it and it does it well instead of um incorporating instead of correct you know kind of remaking the wheel as it were you just kind of point people at that tool and tell them like do the cool thing with my framework and then go to this other thing to do that other thing because it does it really well rather than me repeating it and i think that's not i don't that's not good or bad it's just that i suppose different communities taking different approaches i think with net we tend to always like to have everything happen in one place i mean one of the reasons visual studio's so popular is because it's so productive because you can literally do everything i can you know connect out to my github repo i can clone my repo i can make my changes and create my pull request i can commit it and i'd never have to leave my ide and that's got a lot of benefit to it um but that does mean that it has to be able to do all these things in it you know there are other tools that you know sometimes can do a dedicated job really well and you don't because you you know you stay in one tool or whatever so i think it's just difference with communities where let's say javascript just is used to having lots of different things that do these and you plug them all together and i think that's possibly where we you know when dot net developers look at javascript it looks much more chaotic because you have to know about these packages and then you have to know how how to wire them together and again it's not necessarily a bad thing it's just difference in approaches i think yeah i'm sure but we can see here we've got a minified file so we're now down to one line of css i mean it's a pretty long while admittedly but you can see that it's all been compressed and put together and you that um that nano css has got levels of compression you can use so it can um sort of make things even smaller uh if you if you needed to if we go over to um our kind of litmus test and go back to my file system we're down to 9k now right so we've created a meter of megabytes before so now it's done yes thank you yeah 7.7.4 meg down to 9k so um you can see we've you know we're definitely using you know we've definitely got javascript build system we've got better node going on in there but i really hope with this i've showed to people that it's not that scary to to mix the two worlds and they can they can really work together in unison um you know i i definitely don't hate javascript i've spent a lot of time using it so it's you know i i've you know i've got some fond memories of it it definitely does some weird things as well but it's part of the quirkiness but um you know it shouldn't be something that should be completely involved these tools are really good at what they do and um you know i think it's for the for the little bit of configuration we have to do um i think it's definitely worth worth the effort um yeah yeah we've been here for a super long time and we've you know folks have been with us the whole time kind of just like absorbing all this information and what i think is great too is you know just because this session is recorded you know people could always go back because i think you gave a really comprehensive view of what it takes to set it up from like the ms build tasks like some of these different options that we could tweak and then now we ended up in production which i'm sure is what everyone wants to know right like how small can i get the css because again the faster our pages load and render like the better it is for you know better it is for business in general so a couple folks in the chat have been asking about this sample they want to know if they could download it somewhere or maybe you did this before and you could get it off a git repo somewhere do you have this somewhere that we could use or share with people i will i've got this uh this is on my github at the moment but i think off the top of my head um the repo is still private i'll make it public um it's not it's not private for any particular reason other than um but there'll be a there'll be a uh basically there'll be a repo um what i'll do is i will pass you uh the link that will be the address of the of the repo um i'll just make sure i've tidied it up uh before i make it public um so i'll do that i'll basically leave it how it is now with everything turned on rather than having to manually go in and paste in my code snippets um but i'll get that done um sort of straight away afterwards and that that should become public pretty soon after we're we're done great and so what i did was i went ahead and shared not the repo but i assured folks your um github account so you know people can follow you on github if they wanted to and then also make sure they they you know kind of just pay attention to see like as you're doing things and then they might be able to find out whenever you decide to post that i'll pick yeah what i'll do as well as i'll ping a tweet out as well so if you're not following me on twitter um that's my cheesy way of getting you to follow me um and i'll bring out a link to that repo on there um so i mean mainly this is it i mean i think the only the only other thing i was going to shout out uh is that visual studio is not the only way to do this stuff i mean you know one of the cool things with net now is it's cross-platform and it's cross-ide and all this kind of stuff so um tailwind has got some really uh uh sort of cool bits for it uh for visual studio code as well because visual studio code tends to be more of the home environment for a lot of the front-end world so um if you um if you do want to use visual studio code you can and there's actually a official tailwind css plugin here that gives you really good intellisense for all of their utility classes and things like that and it also helps you with the configuration um so it will do certain it understands the uh tailwind config and it will color code it and it will give you kind of help with um uh autocomplete on doing stuff here so you can see you've got kind of gold built in so that's uh something that's definitely worth it and this is definitely i'd say the the most uh kind of tailwind friendly environment in in in um in vs code because i i know that the creators of tailwind live and breathe in in visual studio codes because all of their demos are in visual studio code and all their live streaming is in visual studio code so so that's definitely like a really premium environment for it uh jetbrains rider as well if you use that there's a tailwind css plugin for that as well um i use that a lot on my mac um so um there's a tailwind css plugin that again helps with intellisense for all of the utility classes there and everything like that so no matter what ide or editor you want to use there's kind of a way into it with net and with and with um tailwind so so yeah that but anyway i think that's everything i think i've exhausted also you're probably pretty tight i know it's late where you are um on your side of the world um on my side it's it's it's just about dinner time so i think it's time for us to let these folks go um again like you mentioned if folks want to follow you they could go check you out on twitter at chris underscore cnc um i also shared your github repo so if i believe it's also the same thing just that you know with github there's no underscore but if folks want to follow you on twitter follow you on github you'll be posting the um the uh the repo so and again if folks want to learn a little bit more about tailwind css and those types of things go ahead and message chris and i'm sure he'd be more than happy to like try to help you answer your questions or at least direct you to the folks that could give you an answer if he doesn't have it himself absolutely definitely cool so with that being said thank you all so much hope you enjoy your night your evening your morning wherever you are or whatever it is wherever you are and uh i hope to see you again next week for another episode of on.net bye everybody bye everyone [Music] you

Channel: dotNET

Views: 15,115

Keywords: dotnet, .net, tailwind, tailwind css, tailwindcss, C#, blazor, webassembly, web assembly, csharp, postcss, msbuild, on .net, on .net live

Id: 9YdxhhgJvrE

Length: 118min 51sec (7131 seconds)

Published: Thu Jun 17 2021