Tailwind Live Preview

Tailwind CSS を使った HTML スニペットの見た目を、保存するたびに VS Code の横パネルでライブプレビューする拡張機能です。

ブラウザに切り替えたり完全な HTML 文書を整えたりせず、HTML の断片（フラグメント）を書くだけで見た目を確認できます。

使い方

1. 言語モードが 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>
   

2. コマンドパレット（⇧⌘P / Ctrl+Shift+P）で Tailwind Live Preview: Open Preview を実行します。

3. 右側にプレビューパネルが開き、その時点の内容が表示されます。

4. 以降、ファイルを保存するたびにプレビューが更新されます。別の 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