Tailwind CSS in Blazor server with Rider

Avatar
Jonas Karlsson
Created

Hey,

I'm trying to figure out how to use Tailwind CSS in a Blazor Server project in Rider. I have followed this guide for some tests: https://www.jetbrains.com/help/rider/Tailwind_CSS.html#ws_css_tailwind_install

Following the guide step by step didn't work, I had to modify a bit to get step 6 to work. In the guide, you should add: content: ["./src/**/*.{razor,html,cshtml}"], but I needed to change it to: content: ["./Pages/**/*.{razor,html,cshtml}", "./Shared/**/*.{razor,html,cshtml}", "./Components/**/*.{razor,html,cshtml}"],. The problem I have is that I always have to "rebuild" my project to see my Tailwind changes in the browser. Is there a way around this?

 

Thanks in advance!

 

Votes

0

Share

2 comments
Avatar
Tao Sun
Created

Hello Jonas,
 
Thank you for contacting JetBrains.
 
To use Tailwind in Blazor Server Apps, you'll need to decide how you prefer to load postcss and render it in the browser. By following the article you mentioned, all Tailwind class tokens will be processed and packaged into source.css during the project build stage.
 
When using hot reload in Rider, it doesn't rebuild the project every time. As a result, the changes in your files might not be immediately reflected in the output.
 
You have several options for observing Tailwind's real-time changes in the development environment:

  1. The simplest approach is to switch to using the Tailwind CDN instead of the postcss bundles in the razor pages. Configure Tailwind on the client side without invoking postcss during the project build stage.
  2. Use the Tailwind.Extensions.AspNetCore NuGet package to launch the Tailwind JIT process. With this method, you should be able to see real-time changes when Rider's hot reload is enabled. You can refer to this blog post for configuration details.

 
Let me know if you have any further questions.
 
Regards,

Tao

0
Avatar
Jonas Karlsson
Created

Hey Tao Sun ,

Thank you for your reply. 

  1. I can't change the Tailwind installation to CDN because we will install our product in offline environments.
  2. This sounds like a better option for our need. I will check the blog post and get back to you if I have more questions.

 

Regards,
Jonas

0

Please sign in to leave a comment.