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.
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.
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 TH-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.
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.
@@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. 😃
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.
This video is super helpful, thank you so much!
Glad you liked it. 🙂
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.
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.
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 TH-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 👍
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
Great video 👍🏿
Thank you! 🙂
Nice Video!
Thank you! 🙂
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.
Thanks.
Thanks for watching and engaging. 🙏🙂
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. 😃
Hi ,Sir