It's very exciting to know that we can use Tailwind so easily with Blazor together. I like Bootstrap but Tailwind gave me very productivity when I use it with to build my React apps. Maybe I'll give it a try to Blazor as soon as I can. Blazor looks really good to use, very complete full stack solution to build with C#. I think it'll be complete++ when we can use Shadcn as well.
I love that you opened with "Tailwind is fully configurable", because most people who see it looks at it and thinks it's Bootstrap but messier to look at.
I do understand why you mentioned @apply - it is a good escape-hatch for those niche scenarios, but it's generally frowned upon in Tailwind ecosystem (and even considered a regret by the developers)
You should have shown the tailwind cli tool. It would make more sense for many blazor developers to use that given many would not already be using node and npm. I am successfully using it in a project and it actually works well having tailwind with --watch and dotnet --watch and seeing the hot reload work even with the tailwind styles changing without needing to restart the project. It works quite well. Overall though I am not convinced by tailwind, but more following the masses.....I think it is one of those things where we overreact and go one way...then in 5 years all say what a mess we made and go back the other way.
I had about tailwind a few years ago, I looked at it and I was like nope (mostly because I assumed what it was,which was mostly the same reasons I've read in the comments, which now I've learnt are really misguided).Now that I've used it, I know regret not using it this whole time, I cant begin to justify how flexible,minimal and productive it is, It literally made my want to design every Figma designs I came across just for fun 🤣
Great stuff as usual Chris. Have you found that the tailwind command with --watch throws an exception after a while? It's as if it's not garbage collecting, or there's some kind of overflow in the script. Fresh Windows, fresh Node, everything fresh.. happens still.
Outside of blazor, I have found the prettier tailwind plugin for consistent class ordering to be an essential part of working with tailwind effectively in a team (one less stylistic thing to argue about). Is there an equivalent visual studio extension/other suggestions for how to do something similar here? I'm so nearly sold!
I installed it with Node.js on Windows 5 min job downloaded the .exe for some reason it was not executing (admin mode as well) so yea went with node.js (used the git bash terminal). Just make sure you are in the project folder when creating the tailwind.js file so it shows in the project in VS. And also when putting the target code (end of video) building might fail (if it does restart VS and try again).
does anyone know how can I install flowbite on my Blazor Server App? I have read the docs on how to integrate flowbite to Blazor but it seem doesn't work for me.
It worked for me. You need tailwind in --watch mode and also dotnet run in --watch mode. I agree it takes maybe a day to figure it all out and read up on tailwind and get your head around how it all plugs togethers. It is obviously a whole dynamic css building system and way more complex than something static like bootstrap.
tailwind css - love the concept and idea... but to use it professionally... not really interested until tooling for Visual Studio (not VS Code) is integrated for Tailwind... not really interested in npm/npx or tailwind's cli in order to get it working in a project... blah.... would rather use Bootstrap or raw css
Tailwind is great but it's just pain to use it with Blazor compared to other frameworks. Hot reload doesn't work properly, tailwind watch get progressively slower over time, no intellisense in VS. I really wanted to make a case for myself to use Blazor on one of my projects because I love .Net stack but the Tailwind experience is just so bad that I'd rather use Svelte Kit
Interesting video, unfortunately it didn't cover what I really needed to know about Tailwind CSS. For example, just working with the heirachy of tailwind classes, simple stuff like organizing varied types of content along a row, explaining what "flex" is doing or what "px" "py". How to get a table to layout or how to span. You jumped in and didn't really explain what the tailwind classes are or do and by the end of the video we're into animation ... which in the real world is often NOT to be used due to it's overhead and compatibility. Sadly, I'll have to research more so I can just get basic component layouts aligned, padded, margin, and looking good.
Why does this channel not show the true value of technologies with clear examples? They are showing off their muscles with useless things. Why did you not create an interface for the website that shows us the important picture... You are showing off with a few lines of code and do not touch the needs of the viewer.
Very good one, thanks a lot :) but I still have a question regarding re-usability. Let`s say you create a dedicated css file for the home page component. //Home.razor.css h1 { color: blue; @apply font-extrabold text-7xl mb-7; } It seem the @apply doesn`t kick in, do you have any idea what could be the issue. Thanks a million
so I am Building a webapp with the command "dotnet new blazor -o BlazorApp -int Auto" and I proceed as Chris displays his steps in the video, however the end result is very different. I assume it is due to the bootstrap usage of blazor although I did remove the bootstrap links in the app.razor and the folder itself with the bootstrap documents, however all I am left with is an unstyled html site without the tailwind logo and the sidebar is still on the lefthand side. Obviously I am doing something wrong but I have no clue what
It doesn't work: "Specified input file .\Styles\app.css does not exist." is shown in the terminal when I input the comand: "npx tailwindcss -i .Styles\app.css -o \wwwroot\css\app.css --watch".
You are missing a \ in front of the Styles. It should be .\Styles\app.css. Also like @Mahamadou-IbrahimKone said, make sure you are in the directory where the folder exists.
This is the only consistently good tutorial throughout all the changes and avoids anything but the necessities. Thank you so much!
It's very exciting to know that we can use Tailwind so easily with Blazor together. I like Bootstrap but Tailwind gave me very productivity when I use it with to build my React apps. Maybe I'll give it a try to Blazor as soon as I can. Blazor looks really good to use, very complete full stack solution to build with C#. I think it'll be complete++ when we can use Shadcn as well.
I love that you opened with "Tailwind is fully configurable", because most people who see it looks at it and thinks it's Bootstrap but messier to look at.
I do understand why you mentioned @apply - it is a good escape-hatch for those niche scenarios, but it's generally frowned upon in Tailwind ecosystem (and even considered a regret by the developers)
You should have shown the tailwind cli tool. It would make more sense for many blazor developers to use that given many would not already be using node and npm.
I am successfully using it in a project and it actually works well having tailwind with --watch and dotnet --watch and seeing the hot reload work even with the tailwind styles changing without needing to restart the project. It works quite well.
Overall though I am not convinced by tailwind, but more following the masses.....I think it is one of those things where we overreact and go one way...then in 5 years all say what a mess we made and go back the other way.
What you didn't like about It?
Great content in such little time. Well done
MIcrosoft should provide templates and tutos for these kind of stuff. The video is great but should be documented in official docs.
No, Microsoft should probably stick to bootstrap, and support open-source tailwind stuff.
Too bad there is no Tailwind Intellisense support in Visual Studio.. Have to use VS Code, which has that extension.
I had about tailwind a few years ago, I looked at it and I was like nope (mostly because I assumed what it was,which was mostly the same reasons I've read in the comments, which now I've learnt are really misguided).Now that I've used it, I know regret not using it this whole time, I cant begin to justify how flexible,minimal and productive it is, It literally made my want to design every Figma designs I came across just for fun 🤣
Your channel is a source of motivation for many.
Some of the questions from the viewers COMPLETELY missed the whole point of Tailwindcss
Great stuff as usual Chris. Have you found that the tailwind command with --watch throws an exception after a while? It's as if it's not garbage collecting, or there's some kind of overflow in the script. Fresh Windows, fresh Node, everything fresh.. happens still.
Great content in a short time
very good, thanks!
Cheers mate!
Great presentation!
Outside of blazor, I have found the prettier tailwind plugin for consistent class ordering to be an essential part of working with tailwind effectively in a team (one less stylistic thing to argue about). Is there an equivalent visual studio extension/other suggestions for how to do something similar here? I'm so nearly sold!
Hi, Where can I find the source from this demo? I am interested in the build commands you showed at the end.
Great one guys. BRAZOR 🔥! Don't want to see JS anymore forever!
start here 10:10
Is the code in github or somewhere. Would like to run it ?
I was thinking the same. Please provide link if possible.
I installed it with Node.js on Windows 5 min job downloaded the .exe for some reason it was not executing (admin mode as well) so yea went with node.js (used the git bash terminal). Just make sure you are in the project folder when creating the tailwind.js file so it shows in the project in VS. And also when putting the target code (end of video) building might fail (if it does restart VS and try again).
An alternative to Tailwind's "Obtrusive CSS" methodology is to simply create component-based CSS files using the naming convention, .razor.css.
Next we need tailwindcss intellisense in visual studio !
there is a tailwind extension in rider :P
The next step for Tailwind is to use on of the commercial AI LLM like ChatGPT, Claude, Gemein and specilize it to make Tailwind easier to work with.
does anyone know how can I install flowbite on my Blazor Server App? I have read the docs on how to integrate flowbite to Blazor but it seem doesn't work for me.
i'm ok with it. Now everything work perfectly.
Great stuff. Please use a proper headphone with mic for voice clarity.
Could I have the code (for learning) please?. If it was in github it will help me so much
Hot reload doesn’t work when you watch tailwind
It worked for me. You need tailwind in --watch mode and also dotnet run in --watch mode. I agree it takes maybe a day to figure it all out and read up on tailwind and get your head around how it all plugs togethers. It is obviously a whole dynamic css building system and way more complex than something static like bootstrap.
@@davidtaylor3771please make a repo of a project skeleton. Chris is making thé sale presentation for 2 years now and it’s not helping.
tailwind css - love the concept and idea... but to use it professionally... not really interested until tooling for Visual Studio (not VS Code) is integrated for Tailwind... not really interested in npm/npx or tailwind's cli in order to get it working in a project... blah.... would rather use Bootstrap or raw css
Tailwind is great but it's just pain to use it with Blazor compared to other frameworks. Hot reload doesn't work properly, tailwind watch get progressively slower over time, no intellisense in VS. I really wanted to make a case for myself to use Blazor on one of my projects because I love .Net stack but the Tailwind experience is just so bad that I'd rather use Svelte Kit
The more of Tailwind I see, the more I like Bootstrap.
Interesting video, unfortunately it didn't cover what I really needed to know about Tailwind CSS. For example, just working with the heirachy of tailwind classes, simple stuff like organizing varied types of content along a row, explaining what "flex" is doing or what "px" "py". How to get a table to layout or how to span. You jumped in and didn't really explain what the tailwind classes are or do and by the end of the video we're into animation ... which in the real world is often NOT to be used due to it's overhead and compatibility. Sadly, I'll have to research more so I can just get basic component layouts aligned, padded, margin, and looking good.
What is this doing in the .Net conf? Marketing of Tailwind and nothing to do with .Net or Blazor.
Why does this channel not show the true value of technologies with clear examples? They are showing off their muscles with useless things. Why did you not create an interface for the website that shows us the important picture... You are showing off with a few lines of code and do not touch the needs of the viewer.
Very good one, thanks a lot :) but I still have a question regarding re-usability.
Let`s say you create a dedicated css file for the home page component.
//Home.razor.css
h1 {
color: blue;
@apply font-extrabold text-7xl mb-7;
}
It seem the @apply doesn`t kick in, do you have any idea what could be the issue.
Thanks a million
so I am Building a webapp with the command "dotnet new blazor -o BlazorApp -int Auto" and I proceed as Chris displays his steps in the video, however the end result is very different. I assume it is due to the bootstrap usage of blazor although I did remove the bootstrap links in the app.razor and the folder itself with the bootstrap documents, however all I am left with is an unstyled html site without the tailwind logo and the sidebar is still on the lefthand side. Obviously I am doing something wrong but I have no clue what
It doesn't work: "Specified input file .\Styles\app.css does not exist." is shown in the terminal when I input the comand: "npx tailwindcss -i .Styles\app.css -o \wwwroot\css\app.css --watch".
Check if your are in the correct folder in your terminal.
first you have create Style folder in your root project folder then add app.css in it
You are missing a \ in front of the Styles. It should be .\Styles\app.css. Also like @Mahamadou-IbrahimKone said, make sure you are in the directory where the folder exists.