Building Beautiful Blazor Apps with Tailwind CSS
summary
Shows how to add Tailwind CSS to a Blazor WebAssembly app using the Tailwind CLI: run npx tailwindcss -i styles/app.css -o wwwroot/css/app.css --watch, configure tailwind.config.js to scan .razor and .html, and use the three @tailwind directives in app.css. Demonstrates using @apply for site‑wide styles, factoring repeated markup into a Blazor component, and a no‑JS slide animation using translate-x-full opacity-0 plus transition/duration and OnAfterRender with Task.Delay; adds csproj build targets to produce a minified CSS for release.
AI-written summary · about
chapters (9)
- 0:00Introduction
- 1:09What is Tailwind CSS?
- 7:18Setting Up Tailwind
- 8:44Blazor Installation
- 12:29Styling with Tailwind
- 15:24Advanced Styling
- 17:58Scalable Styling
- 21:19Creating Animations
- 26:24Production Deployment
related talks
59mBuilding beautiful Blazor apps with Tailwind CSS
55mBuilding beautiful Blazor apps with Tailwind CSS
59mBuilding beautiful Blazor apps with Tailwind CSS
01h 03mCSS Techniques for Blazor Developers
27mBuilding Design Components with Tailwind
37mHijacking CSS with tailwindCSS
29mShruti Balasa :: Explore the Art of Customising Tailwindcss
25mRapid development with Vue.js and Tailwind