これなら簡単で便利! Tailwind CSSのチートシートをすばやく表示できるChromeの機能拡張
Post on:2022年8月1日
簡単にすばやく表示できる、Tailwind CSSのチートシートを紹介します。Chromeの機能拡張で、ツールバーから1クリックでチートシートを表示できます。
チートシートは、Tailwind CSS v.3対応。Tailwind CSSの各クラスセレクタとそのプロパティと値が一覧でき、コピペで簡単に利用できます。
![Tailwind CSSのチートシートをすばやく表示できるChromeの機能拡張](http://coliss.com/wp-content/uploads-202203/2022073010@2x.png)
Tailwind Cheat Sheet inside Chrome Extension -GitHub
Tailwind CSSのチートシートの特徴
Tailwind Cheat Sheet inside Chrome Extensionは、Tailwind CSSのセレクタに簡単にアクセスするためのChromeの拡張機能です。
![Tailwind CSSのチートシートの特徴](http://coliss.com/wp-content/uploads-202203/2022073014.png)
Tailwind CSSのチートシートの特徴
- Tailwind CSSの各クラスセレクタを簡単にすばやく表示できます。
- セレクタやそのプロパティと値はクリックで、コピペできます。
- 検索機能。
- オープンソース。
- ダークテーマとライトテーマをサポート。
Tailwind CSSのチートシートのデータには、Tailwind Cheat Sheetの最新版に対応したセレクタがまとめられています。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202203/2022073011-03.png)
Tailwind CSSのチートシートのインストール
Chromeの拡張機能なので、Chrome ウェブストアからインストールできます。通常の拡張機能と同様に「Chromeに追加」をクリックするだけです。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202203/2022073011-01.png)
Tailwind Cheat Sheet Extension -Chrome ウェブストア
インストールが完了すると、ツールバーからTailwind CSSのチートシートを表示できます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202203/2022073011-02.png)
ツールバーからTailwind CSSのチートシートを表示
Tailwind CSSのチートシートの使い方
UIはシンプルで、使い方も簡単です。
Tailwind CSSのセレクタはカテゴリごとにまとまっており、クリックするとセレクタのスタイルが表示されます。検索機能も装備されています。
![Tailwind CSSのチートシートの使い方](http://coliss.com/wp-content/uploads-202203/2022073012-01.png)
Tailwind CSSのチートシート
クリックすると、セレクタをコピーできます。
検索は検索機能はあるのですが、私の環境では文字が表示されませんでした。
![Tailwind CSSのチートシートの使い方](http://coliss.com/wp-content/uploads-202203/2022073012-02.png)
Tailwind CSSのチートシート
Tailwind CSSのチートシートには、最新版に対応したセレクタがまとめられています。
![Tailwind CSSのチートシートの使い方](http://coliss.com/wp-content/uploads-202203/2022073013-01.png)
Tailwind CSSのチートシート
![Tailwind CSSのチートシートの使い方](http://coliss.com/wp-content/uploads-202203/2022073013-02.png)
Tailwind CSSのチートシート
![Tailwind CSSのチートシートの使い方](http://coliss.com/wp-content/uploads-202203/2022073013-03.png)
Tailwind CSSのチートシート
![Tailwind CSSのチートシートの使い方](http://coliss.com/wp-content/uploads-202203/2022073013-04.png)
Tailwind CSSのチートシート
sponsors