VSCode拡張機能 TailwindCSS マウスをポチポチとするだけで簡単に素早く微調整ができる 「TailwindCSS Tune」折り畳める「Inline fold」と「Tailwind Fold」他

環境

VSCode
Next.js 13 (app router)
(TailwindCSS が使えるならなんでもいいです。)

TailwindCSSの属性値の知識が必要です。

TailwindCSS Tune

この拡張機能は、ある程度出来上がったコードを微調整したい時用の拡張機能です。

カーソルの下にあるコードに合わせて、押せるボタンが変わっていきます。

TailwindCSS Tune - Visual Studio Marketplace

マウスをポチポチと押すだけで微調整が可能です。

※VSCodeの拡張機能である Auto Close Tag と相性が悪く、一緒に使うと動作がおかしくなりますので無効化しておいてください。

今回は、Next.js 13 (app router) を使っています。
(TailwindCSS が使えるならなんでもいいです。)

↓TailwindCSSがつかえるなにか適当なファイルを用意します。

src\app\page.tsx

export default function Home() {
  return (
    <main className="flex flex-col items-center justify-center h-screen text-white bg-blue-600 ">
      <h1 className="text-9xl">VNS</h1>
      VNS.BLUE
      <br />
      価値観サイト
    </main>
  )
}

ブラウザを起動しておいてローカルのサーバーを npm run dev で起動しておきます。

セカンダリサイドバーを開いている状態で、「TailwindCSS Tune」を開いている状態です。
（現在、セカンダリサイドバー上に「TailwindCSS Tune」をドラッグアンドドロップしています。）
セカンダリサイドバーとは、VSCodeの右側にあるサイドバーのことです。
(普段ファイルの操作をしているサイドバーは、プライマリサイドバーと呼ばれています。)

↓そして、右側に開いたセカンダリサイドバー上のボタンをポチポチと押すだけで、コードが変化していきます。
Next.js 13 はLive Reload機能が早いので素早くコードが変化していくのがわかります。
時間も、ほんの数秒で変化していき直感的にデザインの変更が出来ます。

↑文字の大きさが変化しているのがわかると思います。

↓これはコードの場所によって押せるボタンの数がそのコードに合わせて変わっているのがわかるかと思います。

その他のTailwindCSS関連の拡張機能

折りたたみ関係

Inline fold カスタム可能 TailwindCSS以外でもHTMLタグで指定できれば色々と折り畳めます。
↓下記のように設定すればhrefも折り畳めます。

setting.json

  "inlineFold.regex": "(class|className|href)=(({(`|))|(['\"`]))(.*?)(\\2|(\\4)})",

この設定でclass、className、hrefと３種類の属性タグを折りたためます。

Inline fold - Visual Studio Marketplace
https://marketplace.visualstudio.com/items?itemName=moalamri.inline-fold

Tailwind Fold TailwindCSS専用の折りたたみ拡張機能です。
hrefは折り畳めません。

Tailwind Fold - Visual Studio Marketplace
https://marketplace.visualstudio.com/items?itemName=stivo.tailwind-fold

定番

Tailwind CSS IntelliSense コードの補完

Tailwind Documentation ドキュメント

Tailwind CSS IntelliSense - Visual Studio Marketplace
https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss

Tailwind Documentation - Visual Studio Marketplace
https://marketplace.visualstudio.com/items?itemName=alfredbirk.tailwind-documentation