fresh v1.6
fresh v1.6がリリースされました。 この記事では主な変更点などについて解説します。 Tailwind CSSの公式サポート fresh公式でTailwind CSSのサポートが導入されました。 Tailwind CSSプラグイン (plugins/tailwind.ts)が追加されています。 // fresh.config.ts import { defineConfig } from "$fresh/server.ts"; import tailwind from "$fresh/plugins/tailwind.ts"; export default defineConfig({ plugins: [tailwind()], }); 本番環境での利用について このTailwind CSSプラグインをDeno Deployで利用する場合は、事前ビルドとの併用が必須になるためご注意ください。 このプラグインを導入した状態でdeno task buildを実行すると、_fresh/staticにCSSファイルが生成されるため、Deno Deployではこちらが利用される想定です。(_fresh/staticについては後述します。また、本番ビルド時に生成されるCSSファイルはcssnanoで最適化されます) 新規プロジェクトへの導入について freshのinit.tsでプロジェクトを初期化する際に、Tailwind CSSの有効化がサポートされています。 既存プロジェクトへの導入方法 deno.jsonで公式で推奨されるバージョンのTailwind CSSを読み込むよう設定します。 ($fresh/src/dev/imports.ts) { "imports": { // ... 省略 ... "tailwindcss": "npm:tailwindcss@3.3.5", "tailwindcss/": "npm:/tailwindcss@3.3.5/", "tailwindcss/plugin": "npm:/tailwindcss@3.3.5/plugin.js" }, // ... 省略 ....