Building beautiful Blazor apps with Tailwind CSS - Chris Sainty - NDC London 2022

cool hello can anyone hear me all right nice one uh thanks for bearing with me very quick change over there so um welcome to my talk um i'm going to be talking to you today about blazer and tailwind css um these are two technologies that i'm pretty enamored with at the moment um uh yeah i've talked a few times about blazer it's it's possibly the best technology that's ever been invented ever and the solution to all front-end problems now i'm joking um but yeah they're two technologies that i'm very very sort of enamored with and um there's also two technologies that we use at the the company i work for so i'm gonna talk to you about this as well from the perspective of someone who's actually doing this for real and these two technologies um are definitely very interesting things um just to quickly introduce myself so my name is chris i'm a principal software engineer at deployed we're a uk-based startup as i mentioned we're using blazer we're using the whole.net stack and we also use tailwind as well i'm a microsoft mvp i have been for about three years now i do do some blogging at chrissani.com but i've i've kind of not been doing much of that for the last two years 18 months two years because i've been i've decided to write a book because that's a that's always a fun thing to do and that's finally finished now so that that's good um and that's actually going to be going to print in the next few weeks so so that's nice to see that project come to an end um and i also do some open source work so i have a various packages under an organization called blazid um so there's local storage stuff in there there's modals and toasts and what have you to to help you build sort of applications with blazer a little bit easier um so anyway enough about me let's get into things so um we're going to start with the basics here so we're going to talk firstly a bit about what tailwind is and why it's different to other css frameworks you may have used and then we'll move over to visual studio and we'll do some uh we'll do some code demos so we'll actually look at how we can integrate towerwind into a blazer solution because tailwind's a little bit different to to other css things um and yeah we'll see how that works and we'll see if we can build some interesting stuff with blazer and tailwind so what is telling css well tauwin css is what's known as a utility-based css framework so what this means is that tailwind is full of lots of atomic style classes okay they're very small very very focused usually they're focused on on a single css property okay so you add a single class to manipulate a single property now this is different to other frameworks like bootstrap is probably the obvious one to compare to because most of us have probably probably used bootstrap at some point which i would i would class that as a component-based css framework now what i mean by that is when you go and use something in bootstrap you usually go to the docs and you go and get a card component you copy the markup and the classes and you get a card that looks like it does in their docs if you want an alert you go and copy that markup with those classes you get alert that looks like it does in their docs same for buttons okay this kind of leads to the scenario that happened which is where every bootstrap site or every site ended up looking like bootstrap and that is one of the issues with using pre-built css frameworks that you end up sort of using components relatively as is and things sort of start to look the same that doesn't really happen with tailwind because towing doesn't actually ship with any pre-made components okay the idea with tailwind is that we compose these atomic classes together in order to create a unique design now if you're not particularly into design this can sound a little bit intimidating which is fair enough but tailwind actually does have some pre-made components available to you as kind of a separate thing so there's some free community options um and then the actual tailwind people themselves have another product called towel and ui which is some paid for pre-made components so you can invest in those if you want to but what i really like about towing css is i i do like to do a little bit of design work and it's nice to be able to create something that's a little bit more unique the other thing that i tend to find when i work with tailwind it's actually very very quick to work with compared to other frameworks now the reason for that is that in tailwind you pretty much never write css which is really interesting sort of thought when you're building front-end apps um i've never been able to use bootstrap as is i've always at some point ended up having to write some custom classes you have to manipulate things if you do want to do something different to how bootstrap has done it you are in a world of either editing their base sas files or you are going to be overriding their classes or whatever and that can be a real pain i do not write like say very much custom css for tailwind at all and in fact i'm going to make a promise to you on this stage right now that through the rest of this talk you are not going to see me write a single css property out inside of any of the demos that i'm going to show you later on um although we will get a little bit close on that at one point but it's technically true cool so let's have a look at an actual example of this so this is in fact the card component from uh bootstrap's documentation site and this is what i mean by a component so we have an outer div with a a class of card on it and then we have various uh chart elements after that that have specific classes to do specific things now this is a little bit customizable so like if you say don't want the image you just don't do the image with the image card image top class on it and that's fine you can add a button to this and you can kind of play around the structure a little bit but largely you're kind of going to get what you what you get so we can actually replicate this in in tailwind okay so this is what that same component would look like if we wrote it in tailwind so a little bit different a few more classes but we're going to work through them okay so on that top outer div we're going to start off by adding flex and flex coal now this means that we're going to use flexbox in order to position everything and flex call is the to do with the flex direction so what this means is it's going to stack all of the child elements up as a column okay and then you can just see on hopefully just about see on the screen there but there's a shadow underneath that card component and that's what shadow lg does large shadow moving on to the image we've got rounded t now you probably can't quite see it here but they're very very lightly rounded corners on the top of that image and rounded t rounds the top corners h40 is to do with height height of 40. now 40 isn't actually a pixel value or a rem value it actually maps to a value in a design system now that design system is a really important point about tailwind and we'll come back to that in a minute p4 is padding 4 again design system we've got text gray 800 that's the text color and the gray 800 again is to do the design system we'll touch on that in a sec and then the h5 text lg large text font semi bold mb margin bottom two and then text base which is just a text based size so what i hope you can sort of gather from this is that once you start to learn what tailwind's naming convention is you can basically read the styling of any kind of elements in your markup and this is where i feel that a lot of the productivity comes to tailwind because you don't change files if i'm styling a piece of markup i only work with that markup i just put those classes in i'm not jumping around between that and a css file writing out custom classes going back over my html applying it did that work okay you kind of really speed up that loop now i mentioned design systems tailwind is basically one big design system okay and this is a really big selling point because design systems are good they can strain us because when you've got sort of any and every option available to you sometimes choosing something can be very difficult you end up in analysis paralysis but tauwin's design system gives you some constraint also means that you can get some consistency okay one of the things i tend to find with bootstrap based sites is when you do start writing these custom classes if you have an app that gets big you tend to find that the same things get replicated what you also find is the values don't say consistent so you might agree on a certain level of padding okay but then someone does it at 14 pixels and then someone does a class three months later and that's 16 pixels and then you get another one that's 12. but it's in a ginormous css file that's 300 400 500 lines long and nobody's scrolling up and down to to check that consistency with a design system you can kind of use that constraint a lot more and because everything's in the markup it's very easy to find something to compare against the other nice thing is if you do have a design team you can actually work with them to codify your design language okay and you can sit down with them you can codify it into tailwind's configuration and then you can be much more confident that you're using the right color okay or the right spacing or whatever whatever it happens to be this design system however does make using tailwind slightly more complicated than something like bootstrap okay so with bootstrap you can just basically take a css file you can add a link to it in your in your html and you're good to go you can just start writing out your your your styles that's not the case for taowin tailwind has to be built okay and the reason it has to be built is because taiwan can generate i think it's a 20 meg css file if every single option is turned on and this was the problem with tailwind prior to version three which came out at the end of last year so what used to happen with towerwind was that you had a set of sensible defaults turned on okay and that would generate a css file in dev that might be around sort of three four five meg something like that and you could obviously turn on any other bits you needed and then when you wanted to actually go to production you could do some stuff called purging where you can pass in the files that have towing classes in them and tailwind's compiler would basically look at what you use and it would strip out everything that you don't use and you get a smaller file okay but that will change with tauwin v3 they move to a completely different engine for doing this they move to what they call the jit engine now this is really cool because what it means is every option is turned on by default what you do is when we configure tower wind initially we have to pass in the files that it should watch for the where we're going to basically apply the the utility classes to and every time we apply one and save that file the jit engine picks that up and it on the fly recompiles the the css file to include that new utility class so what it means is when we're working in development we're actually working with the same file that we would get in production okay so it's quite cool but it does mean that we've got some extra steps so in terms of what we can configure there's color palettes in tailwind okay so this is an example of one they range from different shades so we have 50 which is the lightest shade of any color and 900 which is the darkest ships for 22 colors by default so it gives you a pretty good starting point you can cut as i said you can customize all this so you can either override the existing palette cancel it all out and just put in the stuff that you want or you can extend it so once you've kind of configured this up in the configuration file various utility classes can then use colors so using them looks like this so if i want to say i want to color some text in a certain way i just say text color and whatever shade i want to use same with background i'll just do bg color and shade okay spacing that's another thing hopefully it's just about big enough so this is what i was talking about the mapping so on that first column on the left hand side there that's the number that you're going to reference in your markup okay so that's that h40 that i mentioned earlier and that then maps to a a rem or a pixel value depending on which particular one you're using um the nice thing about this as well is like i said it's all centrally managed so if you do ever decide that 40 shouldn't be uh i don't know whatever it is by default it's about five rem or six rem or something like that you want it to be eight well you can just change it in the design system you don't have to go and change all your markup because there's a bit of an abstraction there so that's quite useful and again this is how you'd use it so this is you get various um utility classes that can then access this this spacing scale so padding width height margins all those types of things the other cool thing that tailwind has in it is variants okay so what are variants well variants are things like pseudo classes so you would know them as things like hover effects odd even effects on rows first last stuff like that you can do all of that with tailwind okay so again we can configure all the variants that we'd want these are kind of there's pretty much everything you want is pretty much there out the box now with with kind of v3 and the jit engine this is a lot of the stuff that you used to have to turn on but it's there by default now which is quite cool and they're just used like this if i want to do a hover effect for example on a button i can just say by default i want my button to be red 500 but on hover i want it to be bg red 800 and go a little darker okay that's all it takes to do a hover effect and i can even do dark mode stuff as well so i can say well by default i want my background to be white except when i'm in dark mode and i want it to be gray 800 all right and like i said this is all configurable so there's a tailwind config.js file where you can set all this up you don't need to do any of this because like i said there's a lot of sensible defaults there and um certainly where where i am at deployed we've made very few changes to the default settings but this is kind of what you do so this is an example of overriding the color palette so theme colors and then i've got various colors here that i've put in if i wanted to extend it i would have an outer object between theme and colors which would say extend so that would extend what's there with that new set of colors so really what this uh could be summarized as is that tailwind is essentially just lego blocks for ui design okay you just compose them together to create the you know the look that you want if you don't like something you just swap one out for another one okay so i'm just gonna take a drink and we'll talk about this in a second now if you're what's the word seasoned like i am and you've been around for a little while you'll know that there was a period where inline styles were all the rage and then we realized they were pretty evil so we shouldn't do that anymore um and this is usually a question that people have when they're first introduced to tailwind okay this looks like inline styles chris then they're evil what's what's what's the crack well let's talk about the limitations of inline styles so firstly inline styles are essentially just magic numbers magic strings depending on what property you're manipulating okay you're gonna add a style tag to an element you're gonna type in some properties and that is it they're fixed on that element and if you want it want those styles somewhere else you're gonna copy and paste them somewhere else and then if you want to change them you're gonna go to every place where they are and you're going to manually change them right so that's pretty rubbish you can't do pseudo states either okay so variants in tailwind right so no hover effects or anything like that no no odd and even you know color changes on your tables or anything like that that's not possible with inline styling and the probably the biggest one in in modern web development is you can't do media queries so if you have any need of responsive design which most people do you can't do that with inline styles either so so these three things are pretty debilitating if you're trying to build modern web applications but none of these are a problem in tailwind because tailwind is still using css classes okay they're just very very focused like i said at the start they're basically focused on a single css property and manipulating that one value so let's talk a little bit about how we actually integrate this with blazer now so the first option i'm going to talk to you about is the quickest and the simplest and that is uh integrating using tailwind's new play cdn all right so with the play cdn it's really really simple we basically add a single script tag with that url and then we just start writing our our style classes okay we can just get going now what's really nice here is um all of the functionality you're gonna get from local development still works and this is what i think is really cool about this cdn so it means all the customization stuff that i mentioned earlier you can still do that with the play cdn all right you just open up a script tag you create the tailwind config object and you just write out whatever custom configuration you want as you would do with a tailwind config.js file in local development and it just works so you can create uh this is the extending of the color palette palette okay so i'm going to add this blazer purple in and then i can just start writing classes that use that color and it just works all right plugins also work so tailwind has a rich plug-in ecosystem there's various plugins that are official and there's a lot of third-party ones as well the play cdn only supports the official ones but they're still quite useful so in this case you just had a query string with plugins and then you just list out the names of the plugins that you want to use so this is really cool it's a really good way to get familiar with tailwind it's a great way to prototype it's a great way to decide if it's for you and your company or your project or whatever the downside here is that it's not for production use okay so the tailwind guy's like no you can play around with it you can try it out but it's not there for production use so if you do want to do production use if you want to build this into a real project what are you going to do well we're going to go for option two here and that's the tailwind cli now the tailwind cli historically has always been uh there through npm okay so this means having node installed um using npm to build stuff now i know that sometimes when i talk to dot net people they can be a little bit worried about node okay and npm i get that i appreciate that i've spent a lot of time in the front end world it doesn't bother me but i definitely understand why however what i will say is that it's still probably the best way to use tailwind so what i'm going to do is i'm going to compromise them and show you a way of using it using the modern versions or modern tools in npm okay that means we're not going to have to have a big node modules folder or anything like that we're not going to have a package.json file anything like that at all okay however if you absolutely do not want to have node in any way shape or form involved in your in your machine installations or whatever then that's cool as well because if you go to the releases page of tailwind's github page they now do a standalone cli this is standalone executable okay you can download it for mac linux windows um and you can just run that instead now the reason i'm not going to use that and i'm not overly keen is because you then have to if you're using a ci pipeline for example you then have to deal with getting that in your pipeline and executing it and whatever it just becomes a bit of a pain whereas i think the npm version is a lot simpler to do cool so on that note let's uh let's check out some code and see how we can actually get tailwind integrated into into a new project so right where are we at here cool so this is a blazer web assembly project okay um it's a little bit modified because if you've sort of been following blazer or anywhere near as much blazer as i have you're probably getting quite tired of the uh the standard template okay that purple gradient starts to starts to really get to you after a while so what i've done is i've reimagined it okay i've i've tried to redesign it make it look a little bit more interesting so i put very i've ripped out all of the bootstrap stuff that ships with the default template and i've applied a load of utility classes already for styling just because watching me do that it's not gonna be overly interesting um but what i've not done is set up towerwind okay so we're gonna go through that together and see what that looks like so the first thing as i mentioned earlier is that we do need a towel and configuration file so we're going to use before i say that one set i have installed node okay so that's the first thing i'm going to use a command called mpx okay so it's slightly different to npm if you've ever used that before the nice thing about npx is it's not actually going to download anything into a node modules folder okay it works through like a machine cache so i'm going to ask it to execute certain packages and it's going to store those in a central cache on my machine if i've got it already it'll execute it from there otherwise it goes to npm and downloads it if i need to but it doesn't put anything in my actual project all right so i'll execute that first of all and that's going to create me a tailwind um configuration file so that's now at the root of my project this is what the default uh configuration file looks like not got much in it which is it's cool um the only thing we really have to do with this is tell it where to look for the files that contain the tailwind utility classes okay and we do it in this content array so all we have to do here is add in the path so this is just going to say scan my directory structure and just find any files that end in razer or dot html okay and that's where my tailwind classes will be being applied so that's the configuration file done the next thing we need to do is create an input css file okay because tailwind's going to compile this into an output css file so i'm going to add a new folder so we'll call that styles and we'll add a new a new style sheet to that and then i'm going to pop in these three lines so these are directives okay um and basically tailwind will take these and it will convert them into the various utility classes it needs to um it does some other stuff as well so like in the base stuff there is things like css resets to make sure that everything is even across browsers and stuff like that but the actual workings of this you kind of don't really need to care about at this point okay um so we've got that that's cool so now we can go back to our command line and we're going to run a different command this time so i'm going to still run mpx tailwind css so i'm going to still execute the tower in cli but this time i'm going to say take this input file so starsapp css and then generate me an output file and i want you to put that in the wwe root folder css app css okay now what i'm also going to do here is i'm going to pass in a flag of minus minus watch so this is basically tauwin's jit or hot reload you can think of it that way so it's going to watch both that input file so that styles app css and anything that's in that path that we passed into the content array okay and it's going to watch for changes and then regenerate that output css file every time something changes so we'll get that going so that's running and if we go into the wwe root folder and we can see that file here okay so this is that output generated file so you can see some classes that it's already generated here from what's already in the app so the last thing to get this running is not that is to go into the host page and then i just need to put in a link to that output style sheet all right so that's it i've now got tailwind integrated into my application so let's run this and see what we get cool so i'm just going to reset the zoom on that a bit so this is it this is the the new template so it doesn't look overly interesting at the moment and that's because we do a bit more styling together so we can see sort of some of the basics of how tailwind works but it certainly doesn't have a big purple gradient down the left so that's that's progress as far as i'm concerned um so what we're going to do is we're going to start off looking at the headings so there's that very small hello world welcome to your new app so we're going to try and make this look a bit more like uh or the hello world bit might look more like a heading and the welcome to your new app look more like a paragraph so just going to do some basic styling this time so we're going to go to visual studio again and we're going to open up that index page so what i'm going to do here is i'm going to add in some styles so i'm going to say font extra bold like so and i need um i need that to be a lot bigger so we'll say text and we'll say 7xl because we want something pretty big um and then i want things to be a bit more spaced out because you know space is always good so we'll say tracking wide and that's just going to put some space between the letters to make everything fill out a bit and then finally we want a bit of a margin at the bottom because you know just to spread things out so i'm going to do an mb6 okay so we'll save that go back over and hot reloads ruining my life again i just want to make this clear i have a very very hate-hate relationship with hot reloading in dot-net at the moment as you can see and it really does depend which way the wind's blowing as to whether it actually loads or not there we go anyway um so that's it that's now a styled heading okay so a few classes later and i've got something that looks far more like a heading okay so we can do the same thing with the p tag as well although that's going to be a little bit more more simplistic um so i'm going to pop some bits in there so we'll say text text excel on that one and uh this one wants a big margin because of what i've done with it so we'll put mb20 on that cool so that's now slightly changed we've got slightly bigger text now for that paragraph and a big margin at the bottom okay so that's just some very simplistic stuff and i'm just showing you that just to give you a feel of what it's like to do sort of what i would call day-to-day styling all right throw some classes on there when hot reload is actually working that's a very quick process and it kind of blips through very fast so let's do something a bit more interesting that panel over the there's a panel there over over the right-hand side that you won't be able to see very much at the moment so it looks very bland but we want to make this stand out a bit now this is a good opportunity to do something that i can never remember how to do in css and i kind of consider myself relatively decent at css but i can never remember the syntax for doing background gradients all right it's just one of them things that i always end up googling um so let's have a look how we can do this in tailwind so this is the markup for that particular uh piece of ui so i've added three classes here bg gradient 2br so that means it's going to be a background gradient and it's going to go to the bottom right it's going to start in the top left so it's going to go diagonal and it's going to start with green 400 so from green 400 it's going to go to blue 500. all right so we'll save that and that's it i've now got a background gradient all right on my best day i cannot code that quick enough in css i cannot get over to a css file create a class google put that copy and paste off stack overflow and get back to my application okay so this is one of the really cool things i think about tailwind it makes this stuff really trivial let's look at another example of something that can always be a bit interesting is manipulating elements so that means twisting them around moving them about that kind of stuff so this kind of unstyled text here is actually the the survey prompt that you get um in the normal template so we want to make this look a little bit more interesting um first of all so let's open that up i'm going to replace what's there with some more interesting stuff there we go so this now looks far more like a banner that's helpful it's got a again a bit of a background gradient there we've got an icon and some colors and it looks more interesting now but what about if we want to skew this okay so if i want to rotate it or i want to flip it or i want to do anything like that again these are things that can be a little bit more challenging when you're doing it with with pure css so let's try and rotate this a bit right there we go two classes later transform rotate i want to transform this element and i want to rotate it and i want to rotate it by three now by default rotate is going to move it clockwise but i want to go counterclockwise so i've got a minus at the front all right so we'll do that we'll go back over and now we've got a skewed element okay so manipulating sort of elements spatially is like say it's always one of the things that's a bit more tricky but two classes into our wind boom we're there so at this point i want to address something that usually people are new to towerwind uh start to think and that is well that's cool chris but haven't i now got a copy all of those classes you apply to that h1 tag to every h1 in my in my app and the same for my p tag and what am i you know when i'm styling common elements that are on every page i've got to put this stuff everywhere that doesn't sound much better than inline styles right which is a fair point um the other thing is that um you wouldn't have seen these checks having it haven't showed you but this big panel is actually on every page and again it's got no styling on these other pages because i haven't copied those styles over so that's a bit of a pain as well so we've got two problems here we've got elements that have repeated uh markup that need to be common across our app uh sorry styles that need to be coming across our app and we have repeated markup that needs to be common across our app so we've got two problems and i've got two solutions for you so the first thing that we're going to look at is going to be dealing with elements um that are common across an app you want to style central links you just don't want to replicate this stuff across all of your all of your various pages so to do this i'm going to open up that input style file okay and i'm going to pop in a couple of a couple of bits of code hold on there we go that one and then for good measure we'll do the p tag as well so it's where i said i'm kind of skirting close to what i said in my promise earlier i have not written a css property i've technically declared two classes but i haven't written them properly so i was right technically right which is the best kind of right i think so the apply directive is a really cool feature of tailwind because what it does is it allows us to use all the power of that design system and all of the kind of speed of those utility classes okay but i still don't have to write css properties all right i can get reusability so i can say now all my h1 tags apply those those utility classes and all my p tags apply those utility classes so we'll save that if we come back over here i might need to reload this but let's have a look yep so we've got the class showing with the various styles that we put on it originally so if we go back into the index.razer we'll get rid of all that because we don't need that now so we've got it centrally styled same on the p tag save that cool so everything looks the same we can now see in the browser tools we've got no classes okay all centrally styled nice get maintainability we can change things easily this is really useful for for headings it's really useful for anchor tags it's really useful for paragraphs okay and it's a way of avoiding all that repetition so that's the answer to the first problem the second problem was repeated markup okay so this is where we've got this panel that's replicated across all the various pages okay so how do we deal with that well this is where blazer comes in right so blazer is a component-based framework like most other front-end frameworks and this is a perfect example of where components are useful so what i can do is i can create a new component here so i'll add one in we'll call this tailwind and then inside of here we'll put in the same markup that we've got replicated across the various pages right so once we've got that i can save that component i'll get rid of these other files because you don't really need these anymore and then i can just replace what i've got here with that component so i'll do it on i'll do it on the index page we can do it here on the counter page as well and also do the same on the fetch data page so let's scroll down we'll get that cool so there we go so we've now got the same component being displayed across all three pages we've got all that duplicated markup now in one place and we can restart this however we want okay so those are the two solutions to those two problems and they're pretty cool i think there's a nice simple way of dealing with those so everything i've been showing you up till now has been relatively rudimentary i think okay so you're probably like okay i can't do something a little bit more cool fair point so let's talk about animations all right so animations uh usually involve things like javascript and they can be a bit fiddly and like how do you actually go about doing them and getting them time right and whatever um agreed so what i thought we'd do is we will build a component that allows uh we can wrap mark up and make it slide around right that'll be a cool thing to do um so let's start that so what we're gonna do is this big panel on the on that we've got over there on the right hand side we're going to make that slide in okay because it'll just make the page a little bit more interesting when it first loads and it's a good demo so we're going to start off with adding a new component and i'm going to call this imaginatively the slide in component and then let's put in some markup so there's a few things going on here so let me highlight the important stuff to you first of all we're going to be using a timer a net timer all right none of this is going to involve javascript there's no javascript interrupt going on whatsoever here um and this is what's known in blazer as a template component okay so what this means is i'm going to wrap some content and i'm going to want to capture the content i'm rendering so i can put it somewhere in this component's output and i can manipulate it and in blazer we do this by declaring a component parameter with the name of child content and a type of render fragment that's a convention and then what happens is when i wrap it i can then output whatever's wrapped wherever that where on line five where i'm outputting child content all right so that's going to basically output inside of that div okay now we need to style this div with some bass uh stuff so first of all i'm saying h full so i want this to be the height of whatever it's in all right so take maximum height that's not overly interesting the next ones are the ones that are fun so transition duration 500. so the way we're going to do this is we're going to manipulate two css properties okay we're going to change them from one value to another now with transition when you do that you can transition those values check those value changes over a period of time and that's what duration 500 is going to say change those values over a duration of 500 milliseconds and this is what's going to help us create an animation effect we've got transform on there as well because i'm going to want to move this element around okay what i'm going to want to do is slide it off the screen when i when it first renders so i can slide it back on all right so that's why transform's there and then i'm outputting the value of a private field here called animation styles all right so we haven't got anything in that at the moment so we need to put some stuff in there to get this going so um the first thing we're going to want in here are the two uh classes that we're going to start with so translate x full okay is going to move whatever we wrap 100 of its width to the right okay so if we jump back onto our site it's going to push that off the screen okay to the right hand side and then i'm setting opacity to zero now this doesn't mean it removes it from the dom structure it's still going to take up the physical space it just makes it transparent okay so it's going to start all the way to the right and transparent so what we now need to do is fill in a few of the gaps so first of all i need to set up my timer so i'm going to set this timer up in uninitialized okay it's a life cycle method on blazer components it only runs once you can think of it a bit like a constructor and in there i'm going to set my timer to 300 milliseconds and then i'm going to say when it elapses call this method trigger animation all right now we haven't added that so let's add that now so trigger animation is kind of the thing that does the cool stuff so what it's going to do is it's going to update animation styles and it's going to overwrite what's there by default and it's going to change it to translate x0 and opacity 100. and this is the bit that is kind of going to make all this hang together okay because with transition we're still manipulating the same css properties okay under the hood so what it's going to do translate x0 is going to move it back to where it was first rendered before we push it off to the right and opacity 100 is going to make it visible again okay but it's going to happen over 500 milliseconds and that's the key point that's what will create the animation effect so the last thing we need to do here is actually trigger that animation effect so we're going to do that using on after render which is another life cycle method in blazer and we're going to make sure we only do this once because we don't want to get like motion sickness with this thing flying in left right constantly that's going to be bad so we're going to start the timer on the first render and that's it and i've also set it to auto reset false so that's our sliding component done if we come back over to our towering component we're just going to wrap that like so so let's save that and let that reload and we've got a sliding component so that wasn't too bad i've not used any javascript or anything like that i've just combined c sharp and tailwind in order to create this effect now it's almost sort of um although it's not doing it oh yeah it's on the screen hold on wait okay windows 11's toolbars being joined so if that toolbar was out of the way you'd see that actually what's happening at the moment is when i swap between pages it's actually putting a horizontal scroll bar there okay and that's the browser trying to be helpful because it's going oh there's something over the right hand side out of the viewport you probably want to see that i'll get you a scroll bar but obviously we don't in this case so um we can make a little fix for this so in my uh index page the host page um i can just add overflow x hidden okay to the body tag and that just means anything that's not in the viewport it's not going to create a horizontal scroll bar for all right so that just fixes that problem although my lack of the the toolbar hiding is is kind of ruining the effect of that but take my word for it um so anyway that is how we can do simple animation effects okay um with using blazer and tailwind together now this is obviously a very simplistic example but hopefully you can see how you can extrapolate upon this and create something a bit more interesting a bit more reusable you could define other parameters the set which direction it was going to come in from you could have a parameter to change the duration so it did over a longer or short period of time and stuff like that this just kind of gives you an idea of what's possible so next thing dark mode a must have for every modern website app or anything so dark mode is something i'm a big fan of um and um this is not dark mode this is very very light so let's fix that okay let's make this into oh let's have this site have a dark mode option um this is actually going to be relatively painless so i'm going to come back over to visual studio here open up the tailwind config and i'm just going to add in an extra bit of uh configuration here so uh let me find my snippet oh that's not it that's not it that's it so dark mode i'm going to set oh actually no i'm not going to sorry i'm jumping ahead of myself i don't even need to do that i'm just going to come in with browser settings and i'm gonna set to my system default which is dart mode and i've got dart mode that's too simple even for me for a minute there and i wrote this talk um so the reason for that is that as i mentioned at the start we're telling v3 in the jit mode every variant is turned on by default and dart mode is a variant okay like i showed you earlier you can just put dark colon in front of any class and it will get applied when dart mode's active now by default dart mode is turned on based on system preference or browser preference whichever one you you have to be using um now i've already styled this with dark mode classes okay so that's why this has happened i i'd love that that wouldn't be sensible enough to somehow generate magically at a dark mode site but unfortunately i did actually have to do this so i haven't uh started the title bar there so let's quickly just go through that just so i can show you exactly what what goes on um so you can see the outer class here we've got bg white and then on the links um they've got a certain color of purple and stuff like that so we basically can just replace that uh with some slightly different markup and there you go bg white but now you're saying when it's dark mode do grade 700. all right that's that's what you that's how you you get these dark mode alternatives um so if we do that let that reload and now we've got dark mode header all right so that's how you apply those classes by saying watching me do that is not going to be interesting um so that's cool but the kind of downside about this is that you are kind of stuck with this based on system preference having to go into your browser sort of settings and toggle between light and dark mode is a little bit of extra work that we don't want to necessarily have to do so it would be much nicer if the user could just decide if they want light or dark mode with the toggle so let's build a toggle component in order to make this a bit more friendly for user choice now to do this this time around we do have to go to taiwan's config file and we do have to add in dark mode class so we do this because like i said by default it'll work off your system preference but when you set dart mode to class what this means is that there needs to be a class called dark somewhere in your html structure and any elements that are chart elements of that will then have their dark variants applied all right so now i've applied that you can see that the cli has kicked in it's done a reload and now i'm not getting any dart mode stuff applied all right because it's not got that class anywhere so if i open up my browser tools and let's just come up here to the top and where i've got this h full if i add a dark class like that then it goes everything goes back into dark mode right and that is basically what we need to do with our component we need to write a component that is going to toggle that class on and off okay when someone interacts with with our with our toggler so let's go and have a look at that so first things first let's add a new component call it dark mode toggle and then we'll pop in the initial markup okay so um i'm injecting some stuff at the top there um the key one at the moment that i'll point out is the igs runtime unfortunately this time around i am going to have to use some javascript there's nothing i can actually do about this i just can't manipulate that html element from blazer it doesn't have any sight or control of that so i'm going to do that with with some javascript um the local storage thing we'll talk about in a minute after that we've got the div which is actually the thing that's going to render our little toggle switch so there's a lot of markup here that's going on but the key thing um that makes this work is that we're using a trick here so we've got a label with a four tag and we've got a hidden input okay that's attached to that label so the label is gonna be the thing we click that's gonna look like a slider but it's actually just going to pass that click onto that hidden input so that's a check box and over here we're handling that event so the whether whether that is toggled on or off is going to be based on whether this dark mode property we've got is true or false so the checked attribute is set based on that value and then whenever that checkbox value changes we're going to call this toggle theme method okay and that's going to be the thing that's going to do the work to actually add or remove that that class cool so if we just save that for now and let's actually just quickly have a look what this looks like so we'll add this into the markup cool so up there top right hand side you can just see there's a little toggle going on so it starts to look like a toggle and everything and we're going to click that and it's going to swap back and forth based on whatever whatever preferences we have so let's actually do something to make this work so the first thing i'm going to do is i'm going to get the javascript bit out of the way so i'm going to add a new file here come down find javascript and i'm going to use a new feature in dot net 6 which is called co-located javascript so this is pretty neat so i can say dark mode toggle which is the name of my component dot razer dot js and then visual studio is going to very nicely nest it for me over there and what's cool about this is i get to keep my javascript with the component that's using it right this is a pretty cool feature and then tied in with the support that blazer has for js modules um i don't actually have to put a reference to this js file anywhere in my application blaze is just going to load it for me dynamically whenever i actually try to import the module all right so let's put in the initial markup so i'm going to export a single function out of this module it's called set theme it takes a theme as a string if it's dark it adds that dark class to the html element or if it's not it removes it okay very simple that's it that's all the javascript we're doing so we'll get rid of that now so we now need to import that module into this component so we can actually call that method when we need to so let's add in some code to do that so first thing i've got a private field here i js object reference as its type that's how we store references to javascript objects in blazer and then i've got on after render async this is where you should always do all your javascript interop and inside of there i'm using the js runtime and i'm calling in vocatesync and then i'm calling a special a special function called import okay and then the second argument i'm passing here is basically the the path to that particular file right so that's gonna import that file into my app so i can use it inside of this component now being a responsible programmer i'm also going to implement my async disposable because when i'm doing anything with javascript object references i need to make sure i dispose of them properly so i don't get memory leaks so we'll do that now quickly um so we're gonna say if the theme module isn't null then we'll we'll dispose of that so that's the responsible programmer bit done um and then i'm gonna update this toggle theme method so this code is kind of quite straightforward really um what we're going to do is we get the value from whatever the checkbox value is okay and then we're going to set the dart mode property field based on that um if we're in dark mode um it'll be it's going to pass down the string dark otherwise it's going to pass down light and then we're just calling that set theme function with whatever the value is all right so now that's done we've now got a working toggle all right so we can click on that and that's going to switch us between light and dark mode and that's all it's doing is adding and removing that dart class on that on that html element so that's pretty cool um the only downside here is that if i set it to dark mode and i refresh the page it goes back to light mode and that's because there's no mechanism here for it to remember what my settings are so that's a bit rubbish because i'd have to toggle this on all the time so we can make a slight improvement here so this is where that ilocal storage service comes in this is a shameless plug for blazered local storage one of my packages um so this allows you to interrupt with the local storage apis okay using pure c-sharp you don't have to do any javascript stuff so install the nuget package register the service and inject it in and you can just start interacting with local storage so what we can do is we can just in the toggle theme method after we set the theme um we can then just call local storage and we can set a new key called theme with whatever the value is okay and that'll just persist that into local storage for us so we can then uh go and get that next time so that's what we'll do finally in this on after render we'll go up here and we'll actually add in the code to go and get that out so on the first render of this component we're going to go into local storage in i'm going to look for a key called theme we're going to get the value out and then we're going to set dart mode based on that value and then finally we're going to call set theme so we set it initially to whatever the you know the save value was okay so if i come into my app now and i set to dart mode and i refresh it stays in dark mode okay so if i come over here to my app you can see that i've got this theme key with a value of dark and that's where it's pulling it from so as i toggle that you can see that value change as i go so that's pretty cool we're now to create a nice toggle component we've been able to store the values so we don't have to toggle it back and forth each time so that's pretty successful i'm i'm quite happy with what we've got here in this site so the final thing i'm going to talk about is how do you actually go to production with this all right how do you integrate this into a ci build or whatever well you've got a couple of options um if you're going to go uh the npm route and i've been i've been showing you you could just add a new step into your build pipeline okay so you could install node you could run uh npm and you could run that same command i showed you in your pipeline and then you can go on to the step that actually builds your project so that's one way of doing it but there's also another way you can do it which i'll show you here quick which is that you can do this using ms build so inside of the cs proj file i'm going to add a couple of targets here so the first one this top one here has kind of a bit of a safety check that all that's going to do is run the npm minus v command to make sure that node's installed so if that isn't if node isn't there it's going to fail the build all right and that's because otherwise you won't get an output css file the more interesting one is the next one okay so this this build css target so this is going to run before the compile step so this is going to run before the app gets built um and what it's going to do is it's going to run that same mpx command that we were running from the command line and it uses the same input so we have the input of the the input style file and then we have the output style file the difference here though is at the end instead of using minus minus watch i'm using minus minus minify and that's because obviously i don't need to watch this file i'm not doing more development in my pipeline um but i do want to minify it okay and the cool thing about the cli is it comes with minifying built in and that's because under the hood it it's actually using post css okay so towing is a actually a post css plugin which means a lot of other post css plugins are available to you and minifies one of them and they've bundled that into the cli so you don't have to do extra stuff um as a bit of a sanity check as well i have put a condition on this to say that only uh execute this target if we're in a release build all right so when i'm doing local dev this isn't going to accidentally be be going off so if we put that in place we can hopefully see this working so um if i go over to my terminal i'll cancel that watch that we had before if i change over to release mode now and build and then we'll go have a look at that output css file and there you go we now have a minified version of our css file all right minified and as small as it could possibly be um nice one um so on that note what we got time wise uh that's my book if anyone's interested i'll just get this out the way there is a discount code if you do want to buy it um and stuff but otherwise the slides in the code you can get that url thank you for watching if you have any questions i think we've got a minute or two um but yeah otherwise thank you very much enjoy the rest of the day [Applause]

Channel: NDC Conferences

Views: 11,936

Keywords: Chris Sainty, .NET, Web, Blazor, Tailwind, CSS, Framework, App, Application, NDC, Conferences, 2022, Live, London

Id: GKbTgovP-VU

Length: 55min 30sec (3330 seconds)

Published: Mon Aug 01 2022