SAFE-template
SAFE-template copied to clipboard
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