Hi Claudio, I started using tailwind with blazor, but couldn't get it to work in a component library. Any ideas on how to do this, I would appreciate a video on the topic. Kind regards, Sérgio Lopes.
Great question, Sérgio! I quickly tried it based on the setup I show in this video, and it perfectly works. What I did: 1.) Create a Razor Class Library project 2.) Add a reference from the Server project to the Class Library (should also work for the Client project) 3.) Add a using statement to the Class Library where I want to use the shared component. 4) Use the shared component like in the Home page (or anywhere else) And it works. Tell me if it doesn't work for you, I might record a follow-up video about it next week. Great idea.
I'm a WPF developer and am trying to wrap my head around Blazor as we want to port a WPF app to a webapp so its crossplatform and can be used without having to install anything. However, our app is quite complex. It's got loads of custom controls, behaviours, custom panels and all sorts of custom functionality to suite our needs. As an example, we have a custom control for creating node graphs for users to write shaders (very similar to the node editor in Unity). I'm not sure where I'd even start to develop something like this in Blazor. Do you think Blazor is the way to go?
Good question. Let me think of it. What makes WPF the goto choice for your application? Is there any particular strength that made you develop it using WPF instead of anything else, or was it just a company management decision? The browser certainly offers the tools you need. However, rewriting from Xaml to HTML/CSS can be a challenge. One thing most people don't know is that you can write Blazor components and integrate them into your existing WPF app using Microsoft.AspNetCore.Components.WebView.Wpf (WebView). You could, for example, refactor simpler UIs as Blazor components and integrate them into your WPF app. Why start with the most complex logic when you can simplify everything else (configuration, login, etc.) first? I wouldn't rewrite a big app in one go but gradually migrate towards a more modern solution. I hope those thoughts help you make some first steps.
Hello! I have created Blazor web app and added tailwind to the server part. On the server part it is working with no problems. When I style in the client then it works only if i have the same style on the server. Ex.: Sever Some text Client : Some text If I change color on to something else it will not work. Did you have same problem or am I doing something wrong? To make it work I installed tailwind also on client side, now I have two "tailwind.config.js" and two "tailwind.server.css" & "tailwind-client.css". Thank you, Matjaz
Great question. It's been a year since I recorded the tutorial and mostly used MudBlazor components instead of a CSS library (such as Tailwind) for my production applications. However, from the demo in this video, you see that you should not have to install it in the Client project. Please try again or post you code online and ask people for help. StackOverflow is still a good place for developer-related questions. Thanks for watching and asking your question.
Take a look at the GitHub repository linked in the video description. It provides you with everything you need to use Tailwind CSS in your Blazor web application.
Visual Studio Code and JetBrains Rider seem to have extensions for Tailwind CSS syntax completion. However, I'm not aware of a solution for Visual Studio. But if you used a few classes, Visual Studio will remember them and still suggest them to you, it's just not a full class look up. I hope this answer helps in any way.
I’ve previously used web bootstrap templates from Envato elements or themeforest on blazor & my setup with the project & everything worked perfectly. However I’m using tailwind & I’m struggling with these errors : css hot reload ignoring, blazor server errors , submitting on forms don’t work correctly. Please guide me on how to install a tailwind template if it already has all the references etc : I can forward you the purchased template.
Thanks for your comment. I currently do not offer consulting on setting up custom themes via UA-cam comments, I aplogize. However, I attached a link to the repository on GitHub, which you can copy and use as a starting point. It includes everything necessary to run Tailwind CSS with Blazor. I'm sure you'll be able to figure out how to extend it with your custom code.
@@ClaudioBernasconi I worked that out. But to be honest, I could not follow you. Very unclear which directory you are running the CLI commands. I found a much clearer example. If you want the link, will send it to you. 😃
Yes, it's a great alternative if you have Node installed. I have it and I'd use it but I personally believe it's not worth installing just for this use case. I hope I mentioned it well enough that I'd suggest using npm but if you don't have it, use the standalone CLI.
This video is super helpful, thank you so much!
Glad you liked it. 🙂
Hi Claudio,
I started using tailwind with blazor, but couldn't get it to work in a component library.
Any ideas on how to do this, I would appreciate a video on the topic.
Kind regards,
Sérgio Lopes.
Great question, Sérgio! I quickly tried it based on the setup I show in this video, and it perfectly works. What I did:
1.) Create a Razor Class Library project
2.) Add a reference from the Server project to the Class Library (should also work for the Client project)
3.) Add a using statement to the Class Library where I want to use the shared component.
4) Use the shared component like in the Home page (or anywhere else)
And it works. Tell me if it doesn't work for you, I might record a follow-up video about it next week. Great idea.
I'm a WPF developer and am trying to wrap my head around Blazor as we want to port a WPF app to a webapp so its crossplatform and can be used without having to install anything. However, our app is quite complex. It's got loads of custom controls, behaviours, custom panels and all sorts of custom functionality to suite our needs. As an example, we have a custom control for creating node graphs for users to write shaders (very similar to the node editor in Unity). I'm not sure where I'd even start to develop something like this in Blazor. Do you think Blazor is the way to go?
Good question. Let me think of it. What makes WPF the goto choice for your application? Is there any particular strength that made you develop it using WPF instead of anything else, or was it just a company management decision?
The browser certainly offers the tools you need. However, rewriting from Xaml to HTML/CSS can be a challenge. One thing most people don't know is that you can write Blazor components and integrate them into your existing WPF app using Microsoft.AspNetCore.Components.WebView.Wpf (WebView).
You could, for example, refactor simpler UIs as Blazor components and integrate them into your WPF app. Why start with the most complex logic when you can simplify everything else (configuration, login, etc.) first? I wouldn't rewrite a big app in one go but gradually migrate towards a more modern solution. I hope those thoughts help you make some first steps.
Hello!
I have created Blazor web app and added tailwind to the server part. On the server part it is working with no problems. When I style in the client then it works only if i have the same style on the server.
Ex.: Sever Some text Client : Some text
If I change color on to something else it will not work. Did you have same problem or am I doing something wrong?
To make it work I installed tailwind also on client side, now I have two "tailwind.config.js" and two "tailwind.server.css" & "tailwind-client.css".
Thank you, Matjaz
Great question. It's been a year since I recorded the tutorial and mostly used MudBlazor components instead of a CSS library (such as Tailwind) for my production applications. However, from the demo in this video, you see that you should not have to install it in the Client project. Please try again or post you code online and ask people for help. StackOverflow is still a good place for developer-related questions. Thanks for watching and asking your question.
i did not found the video how to remove bootstrap :(
Take a look at the GitHub repository linked in the video description. It provides you with everything you need to use Tailwind CSS in your Blazor web application.
@@ClaudioBernasconi thanks 👌
Great video 👍🏿
Thank you! 🙂
Thanks.
Thanks for watching and engaging. 🙏🙂
Nice!
It’s possible to use Tailwind CSS IntelliSense in Visual Studio 22?
Visual Studio Code and JetBrains Rider seem to have extensions for Tailwind CSS syntax completion. However, I'm not aware of a solution for Visual Studio. But if you used a few classes, Visual Studio will remember them and still suggest them to you, it's just not a full class look up. I hope this answer helps in any way.
Visual Studio 2022 does have a tailwind css extension available
I’ve previously used web bootstrap templates from Envato elements or themeforest on blazor & my setup with the project & everything worked perfectly. However I’m using tailwind & I’m struggling with these errors : css hot reload ignoring, blazor server errors , submitting on forms don’t work correctly. Please guide me on how to install a tailwind template if it already has all the references etc : I can forward you the purchased template.
Thanks for your comment. I currently do not offer consulting on setting up custom themes via UA-cam comments, I aplogize. However, I attached a link to the repository on GitHub, which you can copy and use as a starting point. It includes everything necessary to run Tailwind CSS with Blazor. I'm sure you'll be able to figure out how to extend it with your custom code.
@@ClaudioBernasconi no problem I understand thank you ! I’ll give your project a go 👍
How is this possible ? You download tailwindcss-windows-x64.exe, but you end up pasting tailwindcss.exe into the folder ????
Maybe I used the magic wand and cut the part where I renamed the file. I hope you can still follow the tutorial, though. 😉
@@ClaudioBernasconi I worked that out. But to be honest, I could not follow you. Very unclear which directory you are running the CLI commands. I found a much clearer example. If you want the link, will send it to you. 😃
Nice Video!
Thank you! 🙂
just use nodejs npx to execute the tailwind commands. npx is command that runs from a local or remote npm package. So no download, no node_modules.
Yes, it's a great alternative if you have Node installed. I have it and I'd use it but I personally believe it's not worth installing just for this use case. I hope I mentioned it well enough that I'd suggest using npm but if you don't have it, use the standalone CLI.
We want to build an online store using BLAZOR technology, an integrated project with payment ,we hope 😊
Good luck with your project. That sounds like an interesting and challenging project.
Hi ,Sir