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

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

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

サイトのキャプチャ

Tailwind DX

Tailwind DXの特徴

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

Tailwind DXの特徴

Tailwind DXの使用例

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

サイトのキャプチャ

Tailwind DX

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

Tailwind DXのインストール

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

サイトのキャプチャ

Tailwind DX -Chromeウェブストア

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

Tailwind DXの使い方

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

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

サイトのキャプチャ

Tailwind DXで、Navbarを表示
Tailwind CSSの入門に! コピペで簡単に実装できるUIコンポーネントとページレイアウトのまとめ -Preline UIより

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

サイトのキャプチャ

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

sponsors

top of page

©2022 coliss