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

[00:00] - Intro
[02:19] - We’re live
[05:56] - Announcements
[16:10] - What is Tailwind CSS
[29:16] - Adding Tailwind to your project
[41:08] - Customizing MSBuild targets
[51:26] - Apply styles to your markup
[59:44] - Enabling dark mode
[1:05:15] - Customizing Tailwind
[1:32:38] - Enabling Tailwind’s JIT
[1:46:55] - Setting up a release build

Code sample

#TailwindCSS #AspNET #Blazor

[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.

[vivekkaushik]

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.

[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.

[sirwanjaff]

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

[pablo]

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

[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)

[ukaigwechidi]

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

[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!

[teamomiparientes]

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

[oliverrivett-carnac]

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.

[ivanvincent]

No intellisense in visual studio when using JIT

[ElCidPhysics]

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

[mouradaissani]

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
> 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

at load
at Object.keys.filter.map
at Array.map (<anonymous>)
at plugins
at processResult
at config.lilconfig.search.then
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\source\repos\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\repos\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)

[jeremysh]

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

[brkes]

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

[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?

[tranhoang]

how can i use JIT of tailwind in blazor? thanks

[guyincognito]

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.