SAFE-template icon indicating copy to clipboard operation
SAFE-template copied to clipboard

Add Felize.DaisyUI Support with Tailwind CSS v4 Upgrade

Open JackDanna opened this issue 4 months ago • 2 comments

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/vite plugin 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

  1. Rich Component Library: Access to 50+ semantic component classes
  2. Theme Support: Built-in theme system with light/dark mode support
  3. Type Safety: F# bindings through Feliz.DaisyUI for compile-time safety
  4. Performance: CSS-only components with minimal JavaScript overhead
  5. Accessibility: Components built with accessibility best practices
  6. Customization: Easy theme customization and brand colors

JackDanna avatar Sep 18 '25 19:09 JackDanna