Freshで、TailwindCSS 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

これで、Freshのtwindプラグインが、Twind v1を使用するようになりました！

次に、./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/core@1.1.3"; // New
import presetTailwind from "https://esm.sh/@twind/preset-tailwind@1.1.4"; // New, 現時点で1.1.4が最新

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

これで、TailwindCSS v3が使えます！

変更していいこと

バージョンアップすることで、読むドキュメントが変わります。
v2は、
https://v2.tailwindcss.com/docs
のドキュメントを読む必要がありましたが、v3では、最新版の、
https://tailwindcss.com/docs/
を読むことができます、個人的に、最新の方が読みやすいです。