tailwindcss

Tailwind CSS is a utility-first CSS framework that makes it fast to build custom designs without leaving your HTML/JSX/Feliz code. Instead of writing new CSS for each component you compose styles by combining small, single-purpose utility classes.

Why use Tailwind?

• Rapid development: compose UI quickly with utility classes instead of creating new CSS for every component.
• Small, maintainable stylesheet surface: unused utilities are purged in production so the final bundle stays small.
• Highly customizable: theme tokens, variants and plugins make it easy to adapt to your design system.
• Works great with modern toolchains like Vite and Fable (Feliz projects).

info

Because interop with tailwind and F# is so quick and easy the Feliz template also comes with tailwindcss preconfigured. You can get started with tailwindcss right away when creating a new Feliz project using the template.

VS Code Extension

You can easily configure the tailwindcss VS Code extension to provide autocomplete and intellisense features for F# files. Check out the autocomplete and intellisense features from the image below!

You just need to add the following to your VS Code settings.json:

./vscode/settings.json

{
    "tailwindCSS.includeLanguages": {
        "fsharp": "html"
    },
    "tailwindCSS.experimental.classRegex": [
        "\\.className\\s+\"([^\"]*)\"",
        ["\\.className\\s+\\[([^\\]]*)\\]", "\"([^\"]*)\""]
    ],
}

This allows you to use the full tool chain without any maintenance overhead!

DaisyUI

For common components and prebuilt design patterns, consider using DaisyUI. It is a actively maintained and very user friendly library for styled components. Using the code extension above, you will also get autocomplete and intellisense for DaisyUI classes in your F# files!