FreshにTwind v1サポートが入りました
概要
セットアップ
shell# NOTE: 途中でTailwind CSSを使うか質問されますが、ここでyと答えるとTwind v0.16向けのプラグインが有効化されるためご注意
$ deno run -A https://deno.land/x/fresh@1.1.5/init.ts demo-project
...
Fresh has built in support for styling using Tailwind CSS. Do you want to use this? [y/N] N
...
import_map.json{
"imports": {
// 以下を追加
"twind": "https://esm.sh/@twind/core@1.1.3"
}
}
twind.config.ts を用意して、
twindの設定を行います。
twind.config.tsimport type { Options } from "$fresh/plugins/twindv1.ts";
import { defineConfig } from "twind";
import tailwind from "https://esm.sh/@twind/preset-tailwind@1.1.3";
export default {
...defineConfig({
presets: [tailwind()],
}),
selfURL: import.meta.url,
} as Options;
main.ts を以下のように編集します。
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";
// twindv1プラグインを読み込みます。
import twindv1 from "$fresh/plugins/twindv1.ts";
import twindConfig from "./twind.config.ts";
await start(manifest, {
plugins: [twindv1(twindConfig)], // twindv1プラグインを適用します。
});
あとは通常通り、 deno task start でサーバを起動できます。
参考