Skip to content

How do I add daisyUI to a SAFE project?

DaisyUI is a component library for Tailwind CSS.
To use the library from within F# we will use Feliz.DaisyUI (Github).

  1. Open a terminal at ./src/Client

  2. Add daisyUI JS dependencies using NPM: npm i -D daisyui@latest

  3. Add Feliz.DaisyUI .NET dependency...

    • via Paket: dotnet paket add Feliz.DaisyUI
    • via NuGet: dotnet add package Feliz.DaisyUI
  4. Update the tailwind.config.js file's module.exports.plugins array; add require("daisyui")

    tailwind.config.js
    module.exports = {
        content: [
            '.index.html',
            './**/*.fs',
        ],
        theme: {
            extend: {},
        },
        plugins: [
            require('daisyui'),
        ],
    }
    
  5. Open the daisyUI namespace wherever you want to use it.

    YourFileHere.fs
    open Feliz.DaisyUI
    

  6. Congratulations, now you can use daisyUI components!
    Documentation can be found at https://dzoukr.github.io/Feliz.DaisyUI/