Create Beautiful Blazor WASM Tailwind Apps

in today's video we're going to look at the blazer tailwind template and working with the tailwind ui components to quickly create great looking custom uis for blazer web assembly [Music] blazer gives us a modern front-end framework that enables developers to work completely in c-sharp when combining this with back-ends like server stack we get to re-use our back-end models giving us completely typed end-to-end services and while the default blazer templates from microsoft are built using bootstrap more and more developers are making great looking applications using tailwind css tailwind is a utility first css framework that makes it fast to compose styles using consistently named utility classes so rather than trying to encapsulate a complex set of styles into a larger css class you can apply them directly in your html the utility classes are just css styles meaning it composes into your application as expected but the brevity improves usability without creating a leaky abstraction another big reason tailwind has become such a popular framework is the first class support for mobile responsive layouts for example styles can be optionally applied at responsive breakpoints using sm colon and md colon prefixes for small and medium displays a dark mode can also be supported either by a native os setting or manual switch by using the dark colon prefix tailwind itself is free to use but they also offer a commercial set of quality pre-made components the use of these components can be a huge value to a team without a designer since they can be heavily reused and target many different use cases when you purchase an account you get access to all the html used to create a growing collection of well-designed components that can be quickly incorporated into your applications even when using blazer you can of course still use tailwind and the blazer tailwind template without their commercial components and it provides a great basis for building uis with css that follows a predictable and consistent naming convention in this video we're going to create a new project from scratch using the blazer tailwind template show how blazer and tailwind work with hot reload and incorporate a tailwind ui component into our application before we get started we'll want to have a few things installed that includes the.net 6 sdk node 16 lts with npm and the serverstack.net x tool if you don't have the server stack.net x tool installed you can install it using the command.net tool install hyphen gx to create your blazer tailwind application we can use the x tool using the command x new blazer hyphen tailwind space the name of your project this will create your project in a folder with the specified name here we are using the name blazer tailwind once created we can open the solution with your favorite.net ide it's worth noting that at the time of recording visual studio has the best support for blazer development opening the solution we have the standard four server stack projects of apost service interface service model and tests as well as the client project which is our blazer webassembly application running our application for the first time we can see it has several example pages and functionality built into the template all laid out using tailwind css which is cleanly designed and responsive by default while our application is running we can edit our blazer pages and for most types of changes they are updated in our browser automatically however for example if we try to make our text bigger for the counter page heading by changing the text to xl to a text 8 xl the text actually gets smaller this is because of how tailwind works and even though text 8 xl is a valid style it isn't in the application style sheet automatically the tailwind cli works as a node process that scans your files for uses of known tailwind css and generates a css file of all the used styles that your application references this reduces the size of the full css that's needed to only the styles that you use in your application the tailwind cli also watches these same files for any changes and regenerates the required css as needed the template is set up with npm scripts to run tailwind and watch for changes you can run this script with the command npm run ui colon dev from a separate terminal in the client project now if we make changes which includes styles that haven't yet been used in your project tailwind will detect those styles and include any styles in the output css which have been referenced by our application now that the tailwind cli is running and watching our solution let's utilize the tailwind ui components to change how the bookings page looks and behaves navigating to booking's crud we have a new bookings button that shows a new form at the top pushing down the list of existing bookings in the ui let's say we wanted to change how the new bookings form was presented to the user we can open up the tailwind ui.com site and browse through the components to use in our own application scrolling down we can see a section called overlays which has a slide overs collection instead of pushing the form down we could have it on the right hand side tailwind's ui gives us examples to test it out and once we've found the component we want to incorporate into our application we can click the code view to see the html with tailwind classes applied taking the first side panel we can copy the html and add it to our bookings create.razer the tailwind ui components have comments and suggestions on where to use optional animation css classes and where to put your own content here we will just move our create form into the content area of the panel and update clicking the create form now we have our create form already laid out as a panel on the right hand side the new provided close button doesn't work yet but our control already had this functionality so just by hooking in the existing close function to a new panel we get a functioning side panel for our create booking this literally took less than a minute to do and we have no additional dependencies because tailwind uses consistent named utility classes we can just drop in the html as provided in the component and it views as expected interactive behavior is commented and the documentation is provided specifically in the code we copied as well as more generally described in the documentation on the tailwind website let's do another one on the call hello page we are populating some green text down the bottom with the response from the server let's turn this into a simple notification bubble again we start by looking at tailwind ui.com for some example components and we have a few to choose from grabbing the code from the one we want we can paste it straight into our call hello page at the bottom as suggested by the comments in the code next we can populate the dynamic content from the api response by checking if the response.result has a value otherwise don't show the inner html just as the comments above suggests within the if statement we display the api values we want which are bound to our blazer properties as well as binding an on click event to clear the result which will subsequently hide the notification and again a few minutes of work and we have a nice looking notification bubble for the response of our api message without any external dependencies we get all this with hot reload support to provide an extremely fast development environment for building great looking blazer user interfaces with a minimal of hassle the blazer tailwind template gives us the blazer development workflow we love with tailwind styling which can make short work of building a great looking new project by utilizing tailwind and tailwind components we can pick and choose the functionality we need with the components that provide a consistent visual design freeing us up to focus on the functionality we need to build for our application well that's it for this video if you have any suggestions or feedback about our templates or videos let us know in the comments if you want to know more check out our other videos and join us in the server stack community through our discord and github discussions server stack is free for individuals and open source projects so anyone is welcome and as always thanks for watching

Channel: ServiceStack

Views: 7,000

Keywords: blazor, blazor wasm, wasm, web assembly, .net, c#, servicestack

Id: 3gD_MMcYI-4

Length: 9min 12sec (552 seconds)

Published: Mon Jul 25 2022