素のTailwind CSS、つまりPostCSSのプラグインとしてTailwindを利用する場合、ブラウザのDevToolsから直接クラス名を変更しても、何も起こらない。
いくらViteが速いからとは言え、これは単純にデバッグしにくい。
Windi CSS or UnoCSS
そこで、後発のWindi CSSやUnoCSSには、MutationObserverを活用してDevToolsからの変更を検知し、よしなに反映してくれる機能がある。（と、教えてもらった）
Tailwind推しではないがゆえに全然追ってなかったけど、ドキュメントを読む限りいわゆる上位互換ならば、もはやUnoCSSでよくない？となった。
ので、仕事でTailwind CSSを使うことにしたプロジェクトをUnoCSSにしてみようと。
virtual:unocss-devtools
で、本題のDevTools対応をする。
https://unocss.dev/integrations/vite#edit-classes-in-devtools
というわけで、ドキュメントにある通り、virtual:unocss-devtoolsをimportしてみる。
<!-- ルートの+layout.svelte -->
<script>
import "@unocss/reset/tailwind-compat.css";
import "virtual:uno.css";
import "virtual:unocss-devtools"; // 👈
</script>
するとまあこうなる。
MutationObserver is not defined
というわけで、SvelteKitの場合はこのようにする。
<script>
import { dev, browser } from "$app/environment";
import "@unocss/reset/tailwind-compat.css";
import "virtual:uno.css";
// @ts-ignore
(dev && browser) && import("virtual:unocss-devtools"); // ✨
</script>
コードを読む限り、別に問題はなさそうではあるが、念のためdevでもくくってビルド時には消すようにしておく。
UnoCSS
個人的に不満だったTailwind CSSのパフォーマンス系の問題を解決しようという姿勢は好き。
それでもやっぱり、IntelliSenseなしではろくに書けない（そして暗にVSCodeを要求してくる）ところは結局嫌い。