Building beautiful Blazor apps with Tailwind CSS

on YouTube ↗55m

" summary

Shows how to integrate Tailwind CSS with Blazor WebAssembly using the tailwind CLI (npx tailwindcss) and its JIT mode to shrink a generated CSS file from ~4 MB to ~16 KB during development and ~10 KB after --minify. Demonstrates reuse with Tailwind’s apply directive and Blazor components, a C# timer-driven slide-in animation using translate utilities (eg translate-x-full → translate-x-0), a JavaScript module + localStorage toggle for class-based dark mode, and MSBuild targets to run the build in CI.

AI-written summary · about

" chapters (15)

1. 0:00Intro
2. 2:08Tailwind CSS Basics
3. 8:35Inline Styles
4. 10:38Tailwind CDN
5. 14:47Visual Studio
6. 21:13Gradient Background
7. 23:03Survey Prompt
8. 30:23Create component
9. 35:27Dark mode
10. 36:27Dark mode styling
11. 40:52Dark mode class
12. 42:37Javascript module
13. 44:32Adding dart mode
14. 50:17Setting up the build targets
15. 52:47Final output

" related talks

• 59mBuilding beautiful Blazor apps with Tailwind CSSChris Sainty · NDC Porto 2022
• 59mBuilding beautiful Blazor apps with Tailwind CSSChris Sainty · NDC Oslo 2022
• 29mBuilding Beautiful Blazor Apps with Tailwind CSSChris Sainty · DevReach 2023
• 19mTangled in Tailwind: A love-hate storyTanisha Sabherwal · React Nexus 2023
• 01h 03mCSS Techniques for Blazor DevelopersEd Charbeneau · NDC London 2023
• 25mRapid development with Vue.js and TailwindCristi Jora · vueday 2020
• 27mBuilding Design Components with TailwindChris Sevilleja · Laracon EU Online 2021
• 37mHijacking CSS with tailwindCSSHoracio Herrera · ReactEurope 2020