Tailwind CSS で素早くクラス名を検索するツールたち
こんにちは森田です。
Tailwind CSS を使うと「あのプロパティのクラス名なんだっけ?」ということは多いですよね。
エディタで補完はしてくれますが文字列が思い出せないと補完されずドキュメントやチートシートを見に行くことが多々あります。
毎回ブラウザからドキュメントを見に行くのも面倒ですし、そんな時に便利な Tailwind CSS のツールを紹介します。
VSCode 拡張
Tailwind CSS は VSCode公式拡張の Tailwind CSS IntelliSense が便利すぎて最高ですが、さらにドキュメントを検索できる拡張があります。
Tailwind Docs
![](https://wp.gaji.jp/wp-content/uploads/2022/08/preview-739x446.gif)
Tailwind Docs はコマンドパレットからプロパティ名を検索し、公式ドキュメントをブラウザから開くことができます。
Tailwind Documentation
![](https://wp.gaji.jp/wp-content/uploads/2022/08/163716626-8d74a1bb-f05b-4b45-aa12-70f66e0efad8-683x493.gif)
Tailwind Documentation はVS Code 内でウィンドウを分割してドキュメントを表示できます。
ブラウザと VSCode を行き来しなくていいのでコード中心に書いている時は便利そうです。
ブラウザ系
Tailwind CSS Cheat Sheet
![](https://wp.gaji.jp/wp-content/uploads/2022/08/ScreenShot-2022-08-19-at-00.08.14-713x493.jpg)
Tailwind CSS Cheat Sheet はその名のとおりTailwind CSS Cheat のチートシートのサイトです。
公式ドキュメントでは各プロパティごとに丁寧に仕様を解説してくれていますが、こちらのサイトは素早くプロパティ名とTailwind のクラス名が検索ができ、そのままクリップボードにコピーできます。
Tailwind Cheat Sheet Extension
![](https://wp.gaji.jp/wp-content/uploads/2022/08/Tailwind-Cheat-Sheet-Extension.jpeg)
Tailwind Cheat Sheet Extension は上記の Tailwind CSS Cheat Sheet をChromeのフローティングウィンドウでいつでも開くことができる拡張です。
サイトではコピーすると Alert のポップアップが表示されてしまうのですが、この拡張だと Alert が出ずにコピーできます。
ランチャー系
Alfred Workflow
![](https://wp.gaji.jp/wp-content/uploads/2022/08/screenshot.png)
Alfred Workflow の Tailwind CSS は tw
を接頭辞にプロパティ名で検索できます。
VS Code以外で Tailwind CSS を触っているときに便利です。
Raycast Extension
![](https://wp.gaji.jp/wp-content/uploads/2022/08/tailwindcss-02-740x463.jpg)
最近人気のランチャーツール Raycast も Tailwind CSS の拡張がありました。
まとめ
便利に Tailwind CSS を使いこなしていきたいですね。
だいぶチートシートを使わずにプロパティ名使えるようになってきましたが、version3.1 で色々な機能が追加されたのでドキュメントは手放せません。
弊社ではJamstackの知見で事業作りに貢献したいフロントエンドエンジニアを募集しています。大きな制作会社や事業会社とはひと味もふた味も違うGaji-Laboを味わいに来ませんか?
もちろん、一緒にお仕事をしてくださるパートナーさんも随時募集中です。まずはお気軽に声をかけてください。お仕事お問い合わせや採用への応募、共に大歓迎です!
求人応募してみる!