On .NET Live - Building Beautiful Blazor apps with Tailwind CSS

[@ElCidPhysics90]

Wow. Thank you so much for this video Cecil and Chris.

[@TheWindseed]

Would be nice to see a port of the necessary parts of postcss to c#, npm is part of the problem not part of the solution.

[@pablo199014]

Great Video, can't wait to apply this framework to my learning. 😄

[@teamomiparientes3769]

It was like one whole day for me to finally configure the correct change for Tailwind to work..the ref files in Github quite help a lot tho some may be diffrent from the presentation if im not mistaken... Thanks to the Team and I hope that simpler method of configuring this can be introduced in the future..really appreciate Edit: well i think the difficult comes from the change of Tailwind from ver2 to ver3

[@MrSikesben]

Thanks Chris for this demo

[@goforgoldman]

Great video, thanks Chris

[@oliverrc_ww]

1:42:05 I think the reason it is not working is because you have "purge" twice and so maybe it's not detecting the files to find the utility classes for.

[@marcosphs]

What is the solution to apply a layout similar to the Asp.Net Core MVC you use (controller with views: Views/Shared/_Layout.cshtml)

[@cissemy]

I was going to ask the same question.

[@vivekkaushik9508]

UI development in blazor is a major concern for any javascript/C# dev. With tailwind integration with blazor we can be ensured that blazor apps will be visually appealing to our clients hence saving us effort and providing consistency in code.

[@moofymoo]

css framework/library does not ensure tha app will be visually appealing. I have seen too many times managers that want to add reference to to automagically make their website beautifull :D

[@b0rkes]

how is your app being rebuild and reloaded in browser every time in this video? do you use dotnet watch or something?

[@gohopo9586]

It seems not dotnet watch, I also want to know why

[@ivanvincent7534]

Possibly dotnet watch only works with .net 6

[@sirwanjaff1050]

Please help me how can i setup asp.net core with tailwind ?!!!!!!!!!

[@ukaigwechidi6563]

Hi, tried replicating this solution for a dotnet 6 webapp on vscode. Changes to colors - bg-* or text-* - do not make it to the file on browser refresh. Can you do a series showing tailwindcss integration with dotnet 6 webapp

[@jhonpauldelvalle]

There's a lot of configuration. but yeah tailwind is a nice framework hoping tailwind will have an easy way when installing it in the blazor project.

[@jeremysh138]

Was a template ever created for this and if so where?

[@marijngrootjans]

Whenever I run dotnet watch --project MyProject run it cannot succeed because of "unable to handle changes to app.css". Probably some conflict with Tailwind config? Whenever developing I do not want to stop debugging, do my Tailwind changes, rebuild, run again; I definitely want to use the watch functionality... any ideas?

[@gohopo9586]

I also want to know why

[@tranhoang2930]

how can i use JIT of tailwind in blazor? thanks

[@chezchezchezchez]

Did you find out?

[@tranhoang2930]

@@chezchezchezchez not yet ? Can you give me some advice to achive it?

[@chris-sainty]

This is covered in the video

[@tranhoang2930]

@@chris-sainty oh many thank. i see it .

[@JKhalaf]

There's a better way to do all the above (perhaps that wasn't the case at the time of the recording). Just use the Tailwind CLI. With the CLI, you removes the unused CSS and you also minify the produced CSS. You've got to love Tailwind!

[@ivanvincent7534]

No intellisense in visual studio when using JIT

[@benjaminboyle3295]

Thank you

[@nonamezz20]

too much config is required

[@guyincognito1985]

Everything old is new again I guess? Tailwind looks like writing inline CSS in your HTML style attributes, a practice that was frowned upon when Semantic CSS was popular back in the "Zen Garden CSS" days.

[@franciscovillena8713]

On first look it can appear that way however to be fair he did show how to handle repeating styles and defining them in a central location.

[@mehdiminaee2]

"Zen Garden CSS" is Grand Papa ;)

[@tareqabouhjileh1235]

Syria

[@walterlol]

White IDE... jesus christ.

[@mouradaissani8957]

Thank you about the great content, i cloned the repo locally on my machine , i got the following exception while building the solution error MSB3073: The command "npm run buildcss:dev" exited with code 1. EXEC : error : Loading PostCSS Plugin failed: Object.fromEntries is not a function The whole stack : 6.14.3 > @ buildcss:dev C:\Users\DELL\source epos\Blazor\ondotnet-tailwindcss\src > cross-env TAILWIND_MODE=build postcss ./Styles/app.css -o ./wwwroot/css/app.css (node:9928) ExperimentalWarning: The fs.promises API is experimental EXEC : error : Loading PostCSS Plugin failed: Object.fromEntries is not a function [C:\Users\DELL\source epos\Blazor\ondotnet-tailwindcss\src\BlazorTailwind.csproj] (@C:\Users\DELL\source epos\Blazor\ondotnet-tailwindcss\src\postcss.config.js) at load (C:\Users\DELL\source epos\Blazor\ondotnet-tailwindcss\src ode_modules\postcss-load-config\src\plugins.js:28:11) at Object.keys.filter.map (C:\Users\DELL\source epos\Blazor\ondotnet-tailwindcss\src ode_modules\postcss-load-config\src\plugins.js:53:16) at Array.map () at plugins (C:\Users\DELL\source epos\Blazor\ondotnet-tailwindcss\src ode_modules\postcss-load-config\src\plugins.js:52:8) at processResult (C:\Users\DELL\source epos\Blazor\ondotnet-tailwindcss\src ode_modules\postcss-load-config\src\index.js:37:14) at config.lilconfig.search.then (C:\Users\DELL\source epos\Blazor\ondotnet-tailwindcss\src ode_modules\postcss-load-config\src\index.js:151:14) npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! @ buildcss:dev: `cross-env TAILWIND_MODE=build postcss ./Styles/app.css -o ./wwwroot/css/app.css` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the @ buildcss:dev script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\DELL\AppData\Roaming pm-cache\_logs\2021-06-19T13_34_22_276Z-debug.log C:\Users\DELL\source epos\Blazor\ondotnet-tailwindcss\src\BlazorTailwind.csproj(27,3): error MSB3073: The command "npm run buildcss:dev" exited with code 1. Build FAILED. EXEC : error : Loading PostCSS Plugin failed: Object.fromEntries is not a function [C:\Users\DELL\source epos\Blazor\ondotnet-tailwindcss\src\BlazorTailwind.csproj] C:\Users\DELL\source epos\Blazor\ondotnet-tailwindcss\src\BlazorTailwind.csproj(27,3): error MSB3073: The command "npm run buildcss:dev" exited with code 1. 0 Warning(s) 2 Error(s)

[@joewylombe2690]

Hi Mourad, did you figure this out ?

[@ASHKERALIKHAN]

Hi Did you figure it out?

[@sky78710]

It is due to some plugins for tailwind not installed ..