Utilities

Start with a file of utilities you will use later. Create Utils.fs:

namespace Partas.Solid.Example

open Partas.Solid
open Fable.Core

type [<Erase>] Lib =
    [<Import("twMerge", "tailwind-merge")>]
    static member twMerge (classes: string) : string = jsNative
    [<Import("clsx", "clsx")>]
    static member clsx(classes: obj): string = jsNative
    static member cn (classes: string array): string = classes |> Lib.clsx |> Lib.twMerge

Lib.cn joins a list of classes with clsx, then lets tailwind-merge resolve any Tailwind classes that clash, so a class passed to a component overrides the component's own.

Next: Table components.

Edit this page