Tailwind CSSの実装やデバッグに便利！各セレクタに対応したプロパティや値を表示するデベロッパーツールの機能拡張 -Tailwind DX

Post on:2022年6月28日

sponsors

デベロッパーツールでTailwind CSSの各セレクタに対応したプロパティや値を実装・デバッグできるChromeデベロッパーツールの機能拡張を紹介します。

.m-1や.p-1といったセレクタをはじめ、:smや:lgなどレスポンシブ用のプレフィックスもサポートされています。Tailwind CSSのセレクタは一覧で表示されるので、チートシート代わりにもなる優れものです。

Tailwind DXの特徴

Tailwind DXを使用すると、デベロッパーツールでTailwind CSSのさまざまなセレクタを使用でき、CSSのプロパティや値を表示できます。

Tailwind DXの使用例

Tailwind CSSの各セレクタは、公式ドキュメントと同じ形式でグループ化されています、FlexboxとGrid要素は、関連するユーティリティも表示されています。

Tailwind CSSの各セレクタのプロパティ・値を一覧したい時は、こちらのチートシートも便利です。

Chromeウェブストアからインストールします。

Chromeでアクセスし、「Chromeに追加」ボタンをクリックするだけです。

使い方は、簡単です。
デベロッパーツールを起動し、「Elements（要素）」パネルにすると、下部のパネルに「Tailwind DX」が右端に追加されると思います。

あとはデベロッパーツールを使用するのと同じ要領です。要素を指定すると、使用されているTailwind CSSのセレクタが表示され、実装やデバッグができます。

Tailwind CSSのセレクタで何のプロパティが値がどうなっているのか分かります。またプロパティや値を変更すると、それに対応するTailwind CSSのセレクタに変更されます。

.p-3を.p-10に変更すると、paddingが3から10に変更されます。