neko-note′

DenoのFreshとTwind v1でTailwind CSSの補完を効くようにしたい

(更新日: )

この記事の要約と結論

  • やりたいことはタイトルの通り「DenoのFreshとTwind v1でTailwind CSSの補完を効くようにしたい」
  • 結論は tailwind.config.ts を作成し、TwindではTSファイルをそのまま利用し、VS CodeのプラグインであるTailwind CSS IntelliSenseにはTSファイルをトランスパイルした tailwind.config.cjs を読ませることで、設定を共通にしつつプラグインを機能させるということを実現

以下、このようにした背景などの詳細

背景

FreshはTwindのプラグインも用意されており、init実行時にTwindの利用を聞かれるなど、公式としても推しの構成となっているようです。そこで今回は開発体験を確立するためにも、VS Code上でTailwind CSSの補完が効くようにしたいと考えました。

ちなみにこのサイトもFreshで作成していますが、Twindを使わずにStitchesを使っています。作り始めた当初はまだプラグインもなく、Twindの関数も補完されなかったため、開発体験に難があるなと思い当時は採用しませんでした。(Stitchesを使ってみたくて、そこまで深く見てなかったのもあるので間違ってるかもしれません)

現在はTwindもv1となり、プラグインも利用できるので改めてやってみようとなりました。

やってみて

次のバージョンで試しました

  • Deno: 1.33.2
  • Fresh: 1.1.5
  • Twind: 1.1.3

Twind IntellisenseはTwind v1にはまだ対応していないようです。そうなるとTailwind CSS IntelliSenseを頼るしかありません。

FreshのTwindプラグインはもちろんtw 関数を使うこともできるのですが、class属性で記述できるようになってます。そのため、class属性を使用するのであればTailwind CSS IntelliSenseを利用できます。

Twind v1からはpresetという形で機能を追加する仕様になっており、Tailwind CSSもpresetとなっています。presetなどの設定をtwind.config.tsに記述します。そしてpreset単位で設定があり、Tailwind CSSのpresetにはTailwind CSSのconfigがそのまま利用できます。

また、Tailwind CSS IntelliSenseはルートにあるtailwind.config.cjs (またはtailwind.cinfig.js )を読み込む仕様になっています。

そうするとTwindとTailwind CSS IntelliSenseの設定を共通で利用したくなります。

発生した問題

シンプルにやろうとするとtailwind.config.cjs をtwind.config.ts で読み込めばOKという形が思いつきます。

ただし、cjsのファイルはCommonJSとなるため、import文を使って読み込むことはできません。

Denoではnode:moduleにあるcreateRequire 関数を利用し、require 関数を生成し、CommonJSのファイルを読み込めます。

ただ、twind.config.ts はブラウザで利用されるコードにバンドルされるため、Nodeのコードを利用することができません。

解決法

とりあえずそのとき思いついたのは次の2つでした。

  1. [採用した] tailwind.config.ts を twind.config.ts で利用し、Tailwind CSS IntelliSenseには tailwind.config.ts をトランスパイルした tailwind.config.cjs を読ませる
  2. tailwind.config.cjsをテキストデータとして読み取って、どうにか実行して JS にする

そんなに検討することもなく、1の方が楽だろうってことで1の方向でやってみたらできたという話になります。

2の方はこの記事を書くときに軽くやってみたら、そもそもDenoにeval 関数がないっぽいので、一筋縄ではいかなさそうでした。第一 evalは使いたくないので、それはそれでよいので、特にここでは深く調べないことにしました。eval() - JavaScript | MDN

課題感とまとめ

今回はesbuildを使ってTS -> JSをやってるのですが、普通にトランスパイルを忘れるとTailwind CSS IntelliSenseに反映されないので、そのあたりは微妙です。まあただ、tailwind.config.ts を高頻度で編集するかと言われるとしないと思うので、そんなに気にしなくてもいいのではと思います。使うなら当面この方法でいいかなと考えています。

もし気になるならgithooksでコミット時にトランスパイルを実行するようにすれば忘れることもなくなるだろうなと思います。

Appendix