これなら簡単で便利！ Tailwind CSSのチートシートをすばやく表示できるChromeの機能拡張
Post on:2022年8月1日
sponsors
簡単にすばやく表示できる、Tailwind CSSのチートシートを紹介します。Chromeの機能拡張で、ツールバーから1クリックでチートシートを表示できます。
チートシートは、Tailwind CSS v.3対応。Tailwind CSSの各クラスセレクタとそのプロパティと値が一覧でき、コピペで簡単に利用できます。
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 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のチートシート
sponsors
