To lean Tailwindcss I decide to take the basic Blazor Server Application template, remove all the stying and re-style it using Tailwindcss. I saw Chris Sainty give an excellent talk at a conference about using Tailwindcss and I had to try it.
The only way to really learn a new technology is to get your hands dirty and just use it. I felt this was a good project to start with.
Using Tailwindcss looks to be very easy and quick to style a page. And after spending the time to learn it and native CSS, it is a lot easier and faster.
-
Clone this repository
git clone https://github.com/CodingWithDavid/BlazorBaseTemplatewithTailwindcss cd BlazorBaseTemplatewithTailwindcss -
Open in Visual Studio or Visual Code a. With Visual Code you will need to install the C# extensions
-
Press F5
- The basic Blazer server application styled with Tailwinds
- The use of Font Awesome with Blazor and Tailwindcss a. For this open source project, I used the cdn link for Font Awesome used to demonstrate the idea of
- A rebuilt Nav Menu component a. The default Nav component was heavily tied to the Bootstrap styling b. Had to add click events to handle the page navigation and setting the style for the active link
- Changed the H1 into spans to keep them showing focus on page load