https://github.com/khuongduybui/fresh-flowbite

Flowbite plugin for Deno Fresh
https://github.com/khuongduybui/fresh-flowbite

flowbite fresh plugin

Last synced: 11 days ago
JSON representation

Flowbite plugin for Deno Fresh

• Host: GitHub
• URL: https://github.com/khuongduybui/fresh-flowbite
• Owner: khuongduybui
• License: mit
• Created: 2022-09-24T23:43:13.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2023-07-23T01:52:17.000Z (over 1 year ago)
• Last Synced: 2025-01-23T14:35:24.985Z (20 days ago)
• Topics: flowbite, fresh, plugin
• Language: TypeScript
• Homepage: https://fresh-flowbite.deno.dev/
• Size: 82 KB
• Stars: 17
• Watchers: 3
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# fresh-flowbite

A [Flowbite](https://flowbite.com/) [plugin](https://fresh.deno.dev/docs/concepts/plugins) for [Deno Fresh](https://fresh.deno.dev/).

## Installation

First of all, create [your fresh app](https://fresh.deno.dev/docs/getting-started/create-a-project) **with `twind` plugin**.

Add Flowbite to your `import_map.json`.

```json

{

  "imports": {

    "$flowbite/": "https://deno.land/x/[email protected]/"

  }

}

```

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

```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](https://flowbite.com/docs/) anywhere within your app.

### Dark mode

In order to enable dark mode on a page, import the `` component and wrap it around everything else. You can additionally provide a `[title]` attribute,

which will become the content of ``.

For example:

```ts

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

export default function Blank() {

  return (

    

      


        {"This page has its background and default text colors automatically changed according to dark mode "}

        @media

        {" query."}

      

    

  );

}

```


### Tailwind 3

- Update `twind` to [@twind/core](https://esm.sh/@twind/[email protected]).

- Add at least the default preset [@twind/preset-tailwind](https://esm.sh/@twind/[email protected]/).

- Update a `/twind.config.ts` to include presets, for example:

```ts

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](https://deno.land/x/[email protected]/plugin.ts) in `/main.ts`, for example:

```ts

// ...

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.