DenoのFreshのプロジェクトを初期化したときにTwindのVscode補完が動かなかった場合の対策

これに半日溶けたので忘備録として載せておきます。issueに乗っていたことの転記なのですが、issueを探すのにも時間がかかったので、他に困ってる人がより早く問題解決できるようにと思いこちらに書いています。

前提

Twindのvscodeプラグインとは https://marketplace.visualstudio.com/items?itemName=sastan.twind-intellisense のことを指しています

何が困ってる？

DenoのFreshをセットアップしたのですが、デフォルトでセットアップされているtwindのautocompleteの補完を効かせようとtwindのvscodeプラグインを入れてみたのですが全く動かず、泣いていました(´；ω；｀)

対策

結論だけ書くと./config/twind.config.tsを作成して以下を書くと治ります

/** @jsx h */

/** @type {import('twind').Configuration} */

引用元: https://github.com/tw-in-js/vscode-twind-intellisense/issues/9#issuecomment-1173095315

ちなみにこちらのコメントに乗せているワークアラウンドはあくまでtailwindcssのvscode拡張機能を擬似的に無理やり起動してるだけなので、twindの設定を読み込んでくれるわけではありません。 twind独自の記法(max-w-(sm md:3xl) みたいなやつ)をよしなにしてくれません。

余談

DenoのFreshを最近触り始めて見たのですが開発者体験的にはかなり良いなと感じています。ただ、巨大コミュニティとエコシステムに支えられているNext.js x Reactで開発ばかりしているとちょっと考え方を切り替えないといけない部分があるなと感じています。
Deno <-> Node
React <-> PReact
での頭の切り替え方みたいなのを今度zennに書こうかなと思っています！(多分)