Jumped feet first with Blazor and TailwindCss


 


 I watched an incredibly good presentation by Chris Sanity on using Tailwindcss with Blazor. Chris had it look so quick and easy. I was so impressed that I decided right then I had to learn how to use it. This post is about the experience that I went through to learn Tailwindcss and whether I still think it is worth the effort. Spoiler Alert: It is very worth it.

 

So, to show that I could use Tailwindcss on a real application, I took the standard Blazor Server template and created an application. There are three pages, Index, Counter, and Fetch Data. I then removed all references to Bootstrap. I wanted to start with just the HTML code.

I have broken this post out into "Lessons Learned", "Pros and Cons" and "Style changes I made between Bootstrap and Tailwindcss. 

 

Lessons Learned

  1. If you do not understand native CSS, you should not use Tailwindcss.
    1. Since Tailwindcss is a set of utility classes, you must understand the underlying CSS commands you are working with. This holds true especially for Flexbox and Grid.
    2. After of few frustrating days of trying Tailwindcss, I had to stop, go back, and really understand some of the CSS commands I have been using, but not really knowing what they did.
    3. The more you know native CSS the easier and faster Tailwind is.
    4. I started a routine of doing some Tailwinds coding every day, so I do not lose what I learned from all this.
    5. Every blog post and video I watched learning Tailwindcss, said this.
  2. Start with no HTML or C# code.
    1. I started out just matching the Bootstrap CSS element by element. This was an unbelievably lousy idea. But to be honest,  that is how I have been using Bootstrap for a long time.
    2. Once I took a step back and started with a blank HTML file, things took off for me.
  3. Tailwindcss is a build system, not a CSS framework.
    1. Do not expect your page to refresh with your style changes automatically or via a browser refresh. Tailwindcss only includes the style you are using. If you add a new style you have to rebuild the output file.
    2. There are several resources that explain this and how to "automate" it. It works well, as long we you remember to start the watcher.
    3. I did lose some time making changes and wondering why they did not show.
  4. Always have a design document, no matter how simple you think the UI is.
    1. In addition to starting fresh, I started using the basic application as a "design document".
    2. In other words, not as a step-by-step instruction, but more of the wanted end result. This freed me up to "think outside the box"

 

Pros and Cons

Pros

  • It's fast to use
    • Once I really understood the native CSS, it took less than a day to style the app. 
    • For me, that is unheard of. I have sent a week on just a log-in form
  • Allows a lot more creativity
    • I did not deviate too much from the basic app look and feel, but it would have been easy to embellish it
    • This is true with working with the Fetch data page
  • Easy to use
    • I followed the instructions I learned. You start at the top of the page and style working your way down the page.
    • I even got to the point where I did not have to look up the Tailwind commands because they just made sense.
  • Simplified my CSS
    • You are using a utility class, so it is easy to use the same size of your styles. For example, you can set a margin and it is the same everywhere, not 1.24 rem here, 24px there, etc.
  • Standardized my CSS
    • I did not use the @apply feature, but this would make it amazingly easy to make default styles for various parts of your application and all really be the same.
  • The resulting application is a smaller
    • Bootstrap project source file size: 781Kb
    • Tailwindcss project source file size: 40Kb
      • This is the result of only including the styles you use
      • It is also a result of switching open Icon to Font-Awesome

 

Cons

 

  • It is a build system
    • I talked about this above
    • It turns into just a minor inconvenience
  • Separation of concerns
    • This is one of the agreements against Tailwindcss.
    • Since you are using utility class, it starts to look a lot like inline styling, which we learned years ago is bad.
    • This was a hurdle for me at first. But I realized it is not really like that. You just use more classes.
    • It is similar to Bootstrap.  For example, you btn btn-primary, etc.
  • Lots of classes in the HTML
    • This is a true statement.
    • After a while, I just got used to it.
    • I do like the fine granular adjustments you can make easily

 

Style Changes made

  1. Used Font-awesome icons instead of open-iconic
    1. I needed help with the open-iconic icons and getting them to be styled right.
    2. I tried the SVG ones instead of the Bootstrap ones
    3. Font-Awesome also is more popular and has more choices
  2. H1 tags changed to spans
    1. This was a weird one. For some reason, the h1 tag would get highlighted on the page load and refresh
    2. I tried the tabindex="-1" setting but that did not work.
    3. Just switching to a span tag worked.
    4. Since there are not any built-in "h1" styles, this was not a big deal.
    5. On a bigger application, I would use an @apply class for this
  3. Colors
    1. In Tailwindcss you can extend or replace colors, but I decided to use the built-in ones
    2. I got close on most.
    3. The exception is the gradient for the nav, I had to define a separate class with this background color
    4. Flexbox instead of grids
    5. Refactored the Nav component
    6. This was mainly because of how the upper left block, where the application title is, has its background overlay on the sidebar background.

Outstanding Questions

  • For my blog projects, is it concerning to use Tailwindcss in the projects? will the readers of the project still be able to understand the project?
  • For components, how do I utilize Tailwindcss and still allow the users of the components to provide their own styles? Before Tailwindcss it was easy to just let the user override the classes in the component.

 

Final Result - Styled with Tailwindcss

Index page


Counter Page







Mobile View min menu




Mobile View Expanded Menu

 

  

Summary

This project took me about a week and a half longer than I thought it would have taken. But the lessons learned help explain why. As I stated above, for me, this was a very worthy technology to learn. I do plan to use Tailwindcss heavily moving forward. 

I still have my backlog of projects to build but now I am excited that styling the application is no longer the biggest headache.


[References]





Comments

Post a Comment

Popular posts from this blog

Yes, Blazor Server can scale!

Image
From the very beginning of the release of Blazor Server naysayers have incorrectly stated that Blazor Server can not scale.  They usually state that the limit is 5,000 concurrent users. There are several misconceptions and wrong assumptions about their statement.  Let's break it down and get a better understanding of Blazor server-side scaling. What is the "limit" for users When Microsoft talks about the need to scale an application, what they are saying is that when a normal response for any concurrent user is taking longer than 200 ms, the system is not performant and needs to scale. We will accept that definition: If any normal user response is taking longer than 200 ms, the system needs to scale for concurrent users. By a normal response, we are referring to a page get, a post, etc.  Large database access requests would not be included in this measurement. What is scaling There are 2 common ways to scale, scale, out horizontally, and scale-up, up vertically. In our di
Read more

Blazor new and improved Search Box

 Back in March, I posted a new Blazor data grid with a search box ( see post ).  Since then I have found a new and improved search box that I wanted to implement.  The search part is implemented the same.  What I added was the ability for the user to narrow down the search by selecting which field they wanted to search on.  This will help the user find what they are looking for and in a large collection, the search will end up being faster. The goal of making the change was to make the search box a new component and have it handle the UI functionality part. Prep Work Here is the prep work I did before adding the search box: Started with the source code from the post listed above. Upgraded the project to .Net 5 Upgraded the Nuget packages that were out of date. Ensured every build and run. Change to a Component I wanted to create a component for the search box so I could use it in other applications.   1. Create a Folder under UIControls called "SearchBox" 2. Created a new raz
Read more

Blazor Wizard Step Component

Image
 I like using step wizards in my applications, sign-up forms, shopping cart checkout, and complex data entry, but I had not been able to find a wizard step indicator that I liked so I built this one. As it turned out, it was not as hard as I thought it would have been.  There are a couple of key parts you have to keep in mind when using a step wizard, such as: 1. What step am I on? 2. Should the "Prev" / "Next" buttons be enabled or disabled on this step? 3. What kind of visual clues do I show the user? I will walk you through how we answer these questions in this sample project.   HTML The main container has a div that holds the progress divs, one div for each "step" of your process.  Below that we have our "Prev" and "Next" buttons We will need to wire in the on-click events for the two buttons.  The buttons will need to be able to be disabled and enabled via CSS class settings.           <div class="container">       
Read more