Building beautiful Blazor apps with Tailwind CSS
summary
Shows how to integrate Tailwind V3 with a Blazor WebAssembly app using Tailwind CLI (+ npx) or the Play CDN, creating app.css with @tailwind directives and pointing content to .razor and .html so the JIT produces only used utilities. Demonstrates MSBuild targets that run npx tailwindcss to emit and --minify the wwwroot CSS for CI, builds a reusable sliding component (timer 300ms, transition 500ms) by swapping translate-x-full → translate-x-0 and opacity, and implements a dark-mode toggle via a collocated JS module plus local storage.
AI-written summary · about
chapters (7)
- 0:00Start
- 7:31Colour Palette
- 8:08Spacing
- 9:37Variants
- 12:39Limitations of inline styles
- 15:38Tailwind via CDN - Customisation
- 16:23Tailwind via CDN - Plugins
related talks
55mBuilding beautiful Blazor apps with Tailwind CSS
59mBuilding beautiful Blazor apps with Tailwind CSS
29mBuilding Beautiful Blazor Apps with Tailwind CSS
01h 03mCSS Techniques for Blazor Developers
25mRapid development with Vue.js and Tailwind
27mBuilding Design Components with Tailwind
37mHijacking CSS with tailwindCSS
19mTangled in Tailwind: A love-hate story