Tailwind CSS で素早くクラス名を検索するツールたち

こんにちは森田です。
Tailwind CSS を使うと「あのプロパティのクラス名なんだっけ？」ということは多いですよね。

エディタで補完はしてくれますが文字列が思い出せないと補完されずドキュメントやチートシートを見に行くことが多々あります。

毎回ブラウザからドキュメントを見に行くのも面倒ですし、そんな時に便利な Tailwind CSS のツールを紹介します。

VSCode 拡張

Tailwind CSS は VSCode公式拡張の Tailwind CSS IntelliSense が便利すぎて最高ですが、さらにドキュメントを検索できる拡張があります。

Tailwind Docs

Tailwind Docs はコマンドパレットからプロパティ名を検索し、公式ドキュメントをブラウザから開くことができます。

Tailwind Documentation

Tailwind Documentation はVS Code 内でウィンドウを分割してドキュメントを表示できます。
ブラウザと VSCode を行き来しなくていいのでコード中心に書いている時は便利そうです。

ブラウザ系

Tailwind CSS Cheat Sheet

Tailwind CSS Cheat Sheet はその名のとおりTailwind CSS Cheat のチートシートのサイトです。

公式ドキュメントでは各プロパティごとに丁寧に仕様を解説してくれていますが、こちらのサイトは素早くプロパティ名とTailwind のクラス名が検索ができ、そのままクリップボードにコピーできます。

Tailwind Cheat Sheet Extension

Tailwind Cheat Sheet Extension は上記の Tailwind CSS Cheat Sheet をChromeのフローティングウィンドウでいつでも開くことができる拡張です。

サイトではコピーすると Alert のポップアップが表示されてしまうのですが、この拡張だと Alert が出ずにコピーできます。

ランチャー系

Alfred Workflow

Alfred Workflow の Tailwind CSS は tw を接頭辞にプロパティ名で検索できます。

VS Code以外で Tailwind CSS を触っているときに便利です。

Raycast Extension

最近人気のランチャーツール Raycast も Tailwind CSS の拡張がありました。

まとめ

便利に Tailwind CSS を使いこなしていきたいですね。
だいぶチートシートを使わずにプロパティ名使えるようになってきましたが、version3.1 で色々な機能が追加されたのでドキュメントは手放せません。