【Tailwind CSS】チートシートの使い方まとめ

はじめに

今回はTailwind CSSのチートシートの使い方をまとめたので紹介していきます。

Tailwind CSSを学習するときは必ず使うことになるのでチートシートの使い方に慣れておきましょう。

対象者

それでは説明に移ります。

チートシートは以下のURLからアクセスしてください。

チートシート

こちらのTailwind CSSのチートシートは以下2つができます。

使ってみると非常にシンプルで使いやすいです。

それではチートシートの使い方を紹介します。

以下赤枠の検索窓から通常のcssやTailwind CSSのclassを検索していきます。

例として検索窓にflex と入力していきましょう。

該当するcssやTailwind CSSのclassが検索に引っかかることが分かります。

はじめはTailwind CSS特有のclass名を覚えるのに時間がかかりますが、何度もチートシートで検索を繰り返すうちに覚えられるようになってきます。

チートシートの使い方を説明しました。

念のためチートシートでその他できることを紹介しておきます。

以下赤枠のチェックボックスにチェックを入れるとバージョンごとのラベル表示をしてくれます。

以下のようにバージョンを選択してラベル表示することができます。

いつのバージョンからどんなプロパティが追加されたのか一目瞭然になりますね。

以下赤枠からすべてのリストを展開できます。

以下赤枠からリストの折りたたみができます。

以下赤枠からTailwind CSSのバージョンを選択することができます。

バージョンごとに表示されるプロパティの一覧が変更されます。

ご自身のTailwind CSSのバージョンに合わせて使用してください。

以上 Tailwind CSSのチートシートの使い方を紹介していきました。

いかがだったでしょうか?

Tailwind CSSを学習するときは必ず使うことになるのでチートシートの使い方に慣れておきましょう。