これなら簡単で便利! Tailwind CSSのチートシートをすばやく表示できるChromeの機能拡張

簡単にすばやく表示できる、Tailwind CSSのチートシートを紹介します。Chromeの機能拡張で、ツールバーから1クリックでチートシートを表示できます。

チートシートは、Tailwind CSS v.3対応。Tailwind CSSの各クラスセレクタとそのプロパティと値が一覧でき、コピペで簡単に利用できます。

Tailwind CSSのチートシートをすばやく表示できるChromeの機能拡張

Tailwind Cheat Sheet inside Chrome Extension -GitHub

Tailwind CSSのチートシートの特徴

Tailwind Cheat Sheet inside Chrome Extensionは、Tailwind CSSのセレクタに簡単にアクセスするためのChromeの拡張機能です。

Tailwind CSSのチートシートの特徴

Tailwind CSSのチートシートの特徴

  • Tailwind CSSの各クラスセレクタを簡単にすばやく表示できます。
  • セレクタやそのプロパティと値はクリックで、コピペできます。
  • 検索機能。
  • オープンソース。
  • ダークテーマとライトテーマをサポート。

Tailwind CSSのチートシートのデータには、Tailwind Cheat Sheetの最新版に対応したセレクタがまとめられています。

サイトのキャプチャ

Tailwind Cheat Sheet

Tailwind CSSのチートシートのインストール

Chromeの拡張機能なので、Chrome ウェブストアからインストールできます。通常の拡張機能と同様に「Chromeに追加」をクリックするだけです。

サイトのキャプチャ

Tailwind Cheat Sheet Extension -Chrome ウェブストア

インストールが完了すると、ツールバーからTailwind CSSのチートシートを表示できます。

サイトのキャプチャ

ツールバーからTailwind CSSのチートシートを表示

Tailwind CSSのチートシートの使い方

UIはシンプルで、使い方も簡単です。
Tailwind CSSのセレクタはカテゴリごとにまとまっており、クリックするとセレクタのスタイルが表示されます。検索機能も装備されています。

Tailwind CSSのチートシートの使い方

Tailwind CSSのチートシート

クリックすると、セレクタをコピーできます。
検索は検索機能はあるのですが、私の環境では文字が表示されませんでした。

Tailwind CSSのチートシートの使い方

Tailwind CSSのチートシート

Tailwind CSSのチートシートには、最新版に対応したセレクタがまとめられています。

Tailwind CSSのチートシートの使い方

Tailwind CSSのチートシート

Tailwind CSSのチートシートの使い方

Tailwind CSSのチートシート

Tailwind CSSのチートシートの使い方

Tailwind CSSのチートシート

Tailwind CSSのチートシートの使い方

Tailwind CSSのチートシート

sponsors

top of page

©2022 coliss