FreshでTailwindCSSの最新版(Twind v1)を使う方法

はじめに

自分はFreshを使っていて、Twindがぜんぜん最新版じゃないことに気づきました。
Twind v1用のプラグインをマージする動きは公式でもありますし、あと1日ぐらいでマージされそうな気配がありますが、その前にこの記事を書いておきます。

@y3km21氏のプラグイン案を利用します。

import_map.jsonを次のように更新します

{
  "imports": {
    "$fresh/": "https://deno.land/x/fresh@1.1.3/",
    "preact": "https://esm.sh/preact@10.11.0",
    "preact/": "https://esm.sh/preact@10.11.0/",
    "preact-render-to-string": "https://esm.sh/*preact-render-to-string@5.2.4",
    "@preact/signals": "https://esm.sh/*@preact/signals@1.0.3",
    "@preact/signals-core": "https://esm.sh/*@preact/signals-core@1.0.1",
    "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.3.0/"
  }
}

twind.config.tsを次のように更新します

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を次のように更新します

/// <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)] });

以上でTwind v1に対応させることができました。
TailwindCSSの最新機能にフルアクセスが可能ですね。

おわりに

この案が早くマージされることを祈るばかりです。