Freshで、Tailwind v3を使う方法

デフォルトだと、Freshは、Tailwind v2を使っている。これは、Twind v0を使っているからだ。

Twind v1にアップデートすることで、Tailwind v3を使うことができる。

Steps

まず、./main.tsを以下のように書き換える。

import twindPlugin from "$fresh/plugins/twind.ts"; // Old
import twindPlugin from "$fresh/plugins/twindv1.ts"; // New

次に、./twind.config.tsを以下のように書き換える。

import { Options } from "$fresh/plugins/twind.ts"; // Old
import { Options } from "$fresh/plugins/twindv1.ts"; // New

import { defineConfig, Preset } from "https://esm.sh/@twind/[email protected]"; // New
import presetTailwind from "https://esm.sh/@twind/[email protected]"; // New, 現時点で1.1.4が最新

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

これでOK!