Skip to content

Conversation

JackDanna
Copy link

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

…ss/vite@latest daisyui@latest". Added DaisyUI as a plugin to index.css.
@JackDanna JackDanna mentioned this pull request Sep 18, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant