fresh-flowbite

A Flowbite plugin for Deno Fresh.

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.6.2/"
  }
}

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, 0.0.1-1.6.0 is the initial release of plugin (0.0.1), which supports Flowbite 1.6.0.

All tags starting with 0.0. are mutable. Expect breaking changes! Starting from 0.1., tags will be immutable. However, still expect breaking changes. Starting from 1., semver will kick in and there will be no breaking changes until 2..