How to Use Tailwind CSS in Blazor | Quick Start

in this video we dive into the world of Tailwind CSS the popular styling framework and we will replace the default bootstrap CSS framework within the Blazer project template while this website is not picture perfect I'm no CSS expert nor a Tailwind CSS expert it will be a journey where we integrate Tailwind CSS into the new net8 blazer web app project template watching this stepbystep guide on how to integrate Tailwind CSS with bler will not only allow you to understand how the different parts play together but also help you if you need to troubleshoot any issues in the future and with all that you'll be set to build stunning looking and very well-designed user interfaces with Tailwind CSS and Blazer now let's start by creating a new blazer web app based on the new net 8 project template we choose net 8 no authentication configure https and select auto as the interactive render mode and per page component as the interactivity location these settings will generate a web assembly project allowing me to demonstrate using Tailwind CSS in the server and client projects we include the sample pages and create the project starting with version three of tail in CSS it uses adjusting time compiler looking at the source code of your application it means that Tailwind will only generate the CSS code required by the classes used within your application source code the compiler is part of the CLI we can either use a note based or a standalone CLI if you're familiar with node it might be the better option however I want this approach to be independent of node and therefore we download the Standalone CLI in my case I download the windows xx4 version when the download is completed we need to move the file into a location that we can reach from a console I like having my tools close to the projects and we'll use the following structure within the top level folder that was generated by Visual Studio we find the project folder and the solution file here I create a Tailwind folder and move the Tailwind CLI into that folder with that approach you have a close relationship between the Tailwind CLI and your project however make sure to ignore the executable within your git ignore settings an alternative approach would be to store the CLI outside of the project folder structure next we need to set up the Tailwind CSS configuration file we use the Tailwind CSS CLI and execute the init command from within the project folder where we want the config file in my case I use the server project of the Blazer application the generated config file looks similar to other configuration files common in the JavaScript and typescript world the basic configuration contains the content theme and plugins properties we need to change the content property to include the path to all raser HTML and CS HTML files within the server the client and any other project folders next we need a CSS file as the source of our Tailwind CSS style sheets we create the new folder Styles within the server project and add a Tailwind D app.css file the content is tailn CSS specific we add the following definition that adds the base components and utilities packages when the application runs we want to load the CSS at run time we will talk about how to generate the CSS file shortly but first let's open the app. rer file and add the following line to reference the tailwindapp CSS file from the WW root folder before we can generate Tailwind CSS code we need to use Tailwind CS in our application I replace the generic text on the homepage with the following HTML template here we use a few basic Tailwind CSS classes we set the text size to 4XL the font weight to bold and the phone style to underlined now we are ready to generate the Tailwind CSS file we use the Tailwind CSS CLI within the folder of the server project and execute the the following command it references DET tail when CSS CLI from within its top level folder the- I argument references the input file and the- O argument the output file the watch option starts a file Watcher instead of running once the CLI keeps running and whenever we make a code change it will regenerate the CSS output file we will see it in action shortly now that we have everything configured let's run the application as you can see we see a formatted text on the homepage of the component when we use the def tools we see our Tailwind CSS classes applied to the diff element in the sources tab of the dev tools we also see that the Tailwind D app. CSS file was loaded the application shown at the beginning of this video look slightly different the reason is that in this project we still have bootstrap whereas I removed it completely in the project shown at the beginning of this video I don't want to bother you with the details on how to remove bootstrap from the default project template in this video however you'll find a link in the video description to the cleaned up project where it only contains Tailwind CSS now let's change the code on the counter page to see if we can also use Tailwind CSS in client side executed web assembly components I insert the following code we use a similar set of classes to format the text and I also added a few classes to format the button using Tailwind CSS instead of bootstrap let's start the application again we navigate to The Counter page and as you can see the button is styled using Tailwind CSS meaning it also works for client side components using web assembly now let's see how a typical workflow looks like when using Tailwind CSS within a Blazer application let's quickly make a change to one of the existing components when I save the files we see that the Tailwind CSS CLI has repealed the CSS file when I press the hot reload button in Visual Studio we see that changes reflected in the browser as you can see this allows us to work pretty quickly and make changes to the code and instantly see the results in the browser this workflow should be similar to using typescript or JavaScript based Frameworks using tools such as wit the similar experience should be possible with blazer if you want to gradually introduce Tailwind CSS into a project that uses a different CS a styling framework such as bootstrap you can use a prefix in the Tailwind doc config.js file you can add the prefix property and assign a string value such as tww Dash however when you do so we also need to use that prefix on all CSS classes we add to our components for example text- for XL is now tww D text- Forex this makes the CSS class definitions even longer and if you later want to remove bootstrap you have to refactor all the CSS classes in your whole application or you'll be forever stuck on using the prefix so if it's possible I wouldn't recommend using the prefix option we added Tailwind CSS to a newly created bler application based on net 8 we used Des send alone Tailwind CSS CLI to generate the CSS on demand the watch command allows us to regenerate the CSS whenever we make a code change and therefore see the changes reflected in the browser instantly you find a link to the GitHub repository down in the video description it includes all the necessary setup steps shown in this video I wouldn't mind a star on the repository if you think it's helpful if you enjoyed this video consider leaving a like and if you want to learn more about net development in the future consider subscribing to the channel and I will see you in the next video

Channel: Claudio Bernasconi

Views: 1,909

Keywords: Tailwind CSS, How to use Tailwind in Blazor, How to use Tailwind CSS in Blazor, Tailwind CSS in Blazor, Tailwind, Blazor, tailwindcss, Tailwind Blazor Components, .NET 8, dotnet, dotnet 8, .NET, Claudio Bernasconi, Tailwind CSS Tutorial

Id: put2m4xTJ30

Length: 9min 41sec (581 seconds)

Published: Fri Jan 05 2024