Tailwind Live Preview
Tailwind CSS を使った HTML スニペットの見た目を、保存するたびに VS Code の横パネルでライブプレビューする拡張機能です。
ブラウザに切り替えたり完全な HTML 文書を整えたりせず、HTML の断片（フラグメント）を書くだけで見た目を確認できます。
使い方
言語モードが HTML のファイルに、Tailwind クラス付きの HTML を書きます。
<div class="flex justify-center items-center h-full w-full">
<div class="flex flex-col items-center gap-2">
<div class="text-xs text-red-800">読み込み失敗しました</div>
</div>
</div>
コマンドパレット（⇧⌘P / Ctrl+Shift+P）で Tailwind Live Preview: Open Preview を実行します。
右側にプレビューパネルが開き、その時点の内容が表示されます。
以降、ファイルを保存するたびにプレビューが更新されます。別の HTML ファイルにフォーカスを移すと、その内容に追従します。
仕様
- 対象は言語モードが
html のファイルのみ。
- 内容は常にフラグメントとして
<html><head> で包み、最小リセット（html, body { height: 100%; margin: 0 }・背景白）を適用します。
- Tailwind は v4 のブラウザ版 CDN（
@tailwindcss/browser@4）を注入して適用します。オンライン接続が必要です。
開発
npm install # 依存をインストール
npm run build # dist/extension.js を生成
npm run watch # 変更を監視してビルド
VS Code でこのフォルダを開き F5 を押すと、拡張入りの「拡張開発ホスト」が起動してデバッグできます。
ライセンス
MIT
| |
