Add Felize.DaisyUI Support with Tailwind CSS v4 Upgrade
Add DaisyUI Support to SAFE Template
Overview
This PR adds DaisyUI support to the SAFE template, upgrading from Tailwind CSS v3 to v4 and integrating the DaisyUI component library. This enhancement provides developers with a rich set of pre-built UI components while maintaining the existing SAFE stack architecture.
🚀 Key Changes
Frontend Dependencies
- Upgraded Tailwind CSS: v3.3.5 → v4.1.13
- Added DaisyUI: v5.1.12 as a new dependency
- Added Tailwind Vite Plugin: @tailwindcss/vite v4.1.13
- Removed deprecated dependencies: autoprefixer and postcss (no longer needed with Vite + Tailwind v4)
SAFE.Client Package
-
Upgraded SAFE.Client: v5 → v6.0.0-alpha
- This alpha version includes native DaisyUI support with Feliz.DaisyUI bindings
- Enables type-safe F# bindings for DaisyUI components
Configuration Updates
-
Vite Configuration: Added
@tailwindcss/viteplugin for better integration - CSS Configuration: Updated to use Tailwind v4 import syntax with DaisyUI plugin
- Removed PostCSS: No longer needed with the new Vite + Tailwind v4 setup
UI Enhancements
- Used Feliz.DasiyUI Components: Converted existing components to use Feliz.DaisyUI styling
Frontend Code
-
Content/default/src/Client/Index.fs- Added DaisyUI components -
Content/default/src/Client/index.css- Updated for Tailwind v4 with DaisyUI plugin -
Content/default/src/Client/vite.config.mts- Added Tailwind Vite plugin -
Content/default/src/Client/Client.fsproj- Updated project dependencies - Various config files updated for the new setup
🎨 DaisyUI Integration Benefits
- Rich Component Library: Access to 50+ semantic component classes
- Theme Support: Built-in theme system with light/dark mode support
- Type Safety: F# bindings through Feliz.DaisyUI for compile-time safety
- Performance: CSS-only components with minimal JavaScript overhead
- Accessibility: Components built with accessibility best practices
- Customization: Easy theme customization and brand colors
Thanks for making this PR, apologies for the delay in reviewing it. Joost and I used to do some OSS work as part of our role at Compositional IT but we have both left so haven't had as much time to get on top of these issues. I'll try to find some time soon to get this properly reviewed.
Howdy, I had forgotten to add a line to index.css, that without it much of the more complex tailwind stuff doesn't work. Please see the latest commit. :)