[Fresh 1.1.4~] twind v1を使用する方法

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系