fresh Twind(v1) Plugin

fresh Twind(v1) Plugin is a thirdparty plugin that allows Twind(v1) to be used with fresh.

Currently(2022/12/26), there is an official fresh twind plugin using Twind(v0.16), but Twind(v1) is not supported.

This plugin can be used in place of the official Twind plugin to use Twind(v1) with fresh.

Usage

First, create a new fresh project. See the official fresh repository for details

deno run -A -r https://fresh.deno.dev deno-fresh-demo

Now let’s make a few changes to the Project configuration file.

import_map.json

You need to import Twind(v1), a minimal Twind preset (if you need more presets, see here) and this fresh plugin.

{
  "imports": {
    "$fresh/": "https://deno.land/x/fresh@1.1.2/",
    "preact": "https://esm.sh/preact@10.11.3",
    "preact/": "https://esm.sh/preact@10.11.3/",
    "preact-render-to-string": "https://esm.sh/*preact-render-to-string@5.2.6",
    "@preact/signals": "https://esm.sh/*@preact/signals@1.1.3",
    "@preact/signals-core": "https://esm.sh/*@preact/signals-core@1.2.3",
    "twind": "https://esm.sh/@twind/core@1.1.3",
    "twind-preset-autoprefix": "https://esm.sh/@twind/preset-autoprefix@1.0.7",
    "twind-preset-tailwind": "https://esm.sh/@twind/preset-tailwind@1.1.4",
    "twind_fresh_plugin/": "https://deno.land/x/fresh_twindv1_plugin@v1.2.2/"
  }
}

twind.config.ts

Change Options to import from twind_fresh_plugin/twind.ts. And import defineConfig from twind. Import the Twind preset and add it to the presets field of the defineConfig argument with an array.

import { Options } from "twind_fresh_plugin/twind.ts";
import { defineConfig } from "twind";
// twind preset
import presetAutoPrefix from "twind-preset-autoprefix";
import presetTailWind from "twind-preset-tailwind";

export default {
  ...defineConfig({
    presets: [presetAutoPrefix(), presetTailWind()],
  }),
  selfURL: import.meta.url,
} as Options;

main.ts

Change twindPlugin to import from twind_fresh_plugin/twind.ts

/// <reference no-default-lib="true" />
/// <reference lib="dom" />
/// <reference lib="dom.iterable" />
/// <reference lib="dom.asynciterable" />
/// <reference lib="deno.ns" />

import { start } from "$fresh/server.ts";
import manifest from "./fresh.gen.ts";

import twindPlugin from "twind_fresh_plugin/twind.ts";
import twindConfig from "./twind.config.ts";

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

That’s all! Now you can use Twind(v1) in fresh!

Example

There is a fresh demo in example.

git clone "https://github.com/y3km21/fresh_twind-v1_plugin"
cd fresh_twind-v1_plugin/example
deno task start