Fresh v1系では、twind v1 (Tailwind v3)を使用するためにファイルを手動で書き換える必要があります。

Fresh

FreshはDeno社が作成・公開しているフロントエンドフレームワークです、

twind v1

twind は Tailwind CSS をJavaScriptから生成するようにしたものです。
SSRと組み合わせることで、転送量を小さくしつつ高速化することができます。

Freshには組み込みのtwindサポートが付属しています。ただし、これはtwind v0系に対するサポートです。twind v0ではTailwind 2.0(古いバージョン)にしか対応しておらず、Tailwindの最新の機能を使うことはできません。
Tailwind 3.x系(最新版)を使うには、twindをv1に切り替える必要があります。

Fresh v1.1.5には、一部のファイルを手動で書き換えることにより、twindをv1にアップグレードできる機能が実装されていますので、紹介したいと思います。

ファイルを書き換えてtwind v1に対応する

freshプロジェクトを生成する際に、twindを使用するかどうかプロンプトで聞かれると思います。
その際に生成されるtwind.config.tsはtwind v0系列向けのファイルなので、これを書き換える形で対応していきます。

main.ts

まずmain.ts内のimport文、$fresh/plugins/twind.tsを$fresh/plugins/twindv1.tsに書き換えます。

main.ts

- import twindPlugin from "$fresh/plugins/twind.ts";
+ import twindPlugin from "$fresh/plugins/twindv1.ts";

twind.config.ts

続いて、twind.config.tsを以下のように書き換えます。

twind.config.ts

- import { Options } from "$fresh/plugins/twind.ts";
+ import { Options } from "$fresh/plugins/twindv1.ts";
+ import { defineConfig, Preset } from "https://esm.sh/@twind/core@1.1.3";
+ import presetTailwind from "https://esm.sh/@twind/preset-tailwind@1.1.4";
  
  export default {
+   ...defineConfig({
+     presets: [presetTailwind() as Preset],
+   }),
    selfURL: import.meta.url,
  } as Options;

以上で完了です。

なお、おそらくimport文の@twind/core@1.1.3のところは、$fresh/plugins/twindv1.tsの内部で使用している@twind/coreとバージョンを合わせた方が良いと思います。（記事執筆時点では@1.1.3です。）

Tailwind CSSのドキュメント

twind v0系を使用している場合、Tailwind CSSのドキュメントはv2系を見る必要がありました。

上記の手順を使用してtwind v1に切り替えた場合、Tailwind CSSはv3系のドキュメントを見る必要があります。

まとめ

Fresh v1系でtwind v1 (Tailwind v3)を使用するには、main.tsとtwind.config.tsを手動で書き換える必要がある。

なお、今後Freshのメージャーアップデートのタイミング(Fresh 2.0)で、デフォルトがtwind v1に切り替わる予定のようです。

自分で書いていてバージョンがややこしかったので表にします。

Freshのバージョン	対応するtwindのバージョン	対応するTailwind CSSのバージョン
v1.0系	v0系 (ただしFresh v1.1.4以降、ファイル手動書き換えでtwind v1に対応)	v2系 (twind v1を使用している場合はv3系)
v2.0系(予定)	v1系	v3系