fresh-flowbite

Installation

First of all, create your fresh app with twind plugin.

Add Flowbite to your import_map.json.

{
  "imports": {
    "$flowbite/": "https://deno.land/x/fresh_flowbite@1.0.0-1.7.0/"
  }
}

Consume the Flowbite plugin in your app's main.ts.

import { FlowbitePlugin } from "$flowbite/index.ts";

await start(manifest, {
  plugins: [
    // ...
    twindPlugin(twindConfig),
    FlowbitePlugin(),
    // ...
  ],
});

Usage

Once you have consumed the plugin in your main.ts, you can use all Tailwind 2 components from Flowbite anywhere within your app.

Dark mode

In order to enable dark mode on a page, import the <Page/> component and wrap it around everything else. You can additionally provide a [title] attribute, which will become the content of <title/>.

For example:

import Page from "$flowbite/components/Page.tsx";

export default function Blank() {
  return (
    <Page title="Blank Page">
      <div class="p-4 mx-auto max-w-screen-lg">
        {"This page has its background and default text colors automatically changed according to dark mode "}
        <code class="font-semibold">@media</code>
        {" query."}
      </div>
    </Page>
  );
}

Tailwind 3

Update twind to @twind/core.
Add at least the default preset @twind/preset-tailwind.
Update a /twind.config.ts to include presets, for example:

import { defineConfig } from "@twind/core";
import presetTailwind from "@twind/preset-tailwind";

export default defineConfig({
  presets: [presetTailwind()],
});

export const configURL = import.meta.url;

Replace fresh's twind plugin with freshwind in /main.ts, for example:

// ...
import twindPlugin from "freshwind/plugin.ts";
import twindConfig, { configURL as twindConfigURL } from "./twind.config.ts";
// ...
await start(manifest, {
  plugins: [
    // ...
    twindPlugin(twindConfig, twindConfigURL),
    // ...
  ],
});

A note about versioning

For now, the versions are a.b.c-x.y.z where a.b.c is the plugin version and x.y.z is the supported Flowbite version. For example, 1.0.0-1.7.0 is the initial release of plugin (1.0.0), which supports Flowbite 1.7.0.