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


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

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

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

VSCode 拡張

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

Tailwind Docs

via: Tailwind Docs – Visual Studio Marketplace

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

Tailwind Documentation

via: Tailwind Documentation – Visual Studio Marketplace

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

ブラウザ系

Tailwind CSS Cheat Sheet

via: Tailwind CSS Cheat Sheet

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

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

Tailwind Cheat Sheet Extension

via: Tailwind Cheat Sheet Extension – Chrome ウェブストア

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

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

ランチャー系

Alfred Workflow

via: clnt/alfred-tailwindcss-docs: An ultra-fast TailwindCSS docs search workflow for Alfred 4

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

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

Raycast Extension

via: vimtor/tailwindcss – Raycast Store

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

まとめ

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

弊社ではJamstackの知見で事業作りに貢献したいフロントエンドエンジニアを募集しています。大きな制作会社や事業会社とはひと味もふた味も違うGaji-Laboを味わいに来ませんか?

もちろん、一緒にお仕事をしてくださるパートナーさんも随時募集中です。まずはお気軽に声をかけてください。お仕事お問い合わせや採用への応募、共に大歓迎です!

求人応募してみる!

投稿者 Morita Sou

フロントエンドグループチームマネージャー。
適切な技術提案やプロジェクトを円滑に進めるコミュニケーションを心掛けています。
CMS構築や開発環境の構築・最適化などを得意としています。チームビルティングと採用と開発環境を快適にすることにいつも燃えています。