更新日: 2022 / 08 / 16

最新バージョン対応!TailwindCSSのチートシート

カテゴリー: coding

最新バージョンの3.xに対応したTailwindCSSのチートシートです。

TailwindCSSには多くのクラスが使われていて、それらを全て覚えるのは大変なのでチートシートで使い方を確認することが多いです。

TailwindCSSはバージョンによって微妙に内容が違ったりするところもあるのでここでは最新版のTailwind3.xと2.x対応のチートシートを集めてみました。

最新バージョン(3.x)に対応したTailwindのチートシート

tailwindcomponents 最新バージョンに対応したTailwindのチートシート

Tailwindの最新版(3.x)対応のチートシートがこちら。Tailwindで使えるクラスが網羅されていて、クラス名をクリックすると設定できる値を見ることもできます。

最新バージョンに対応したTailwindのチートシート2

検索フォームでクラス名を入力するとフィルターされた検索結果が表示されるので、何度もスクロールして確認する必要もありません。

最新バージョンに対応したTailwindのチートシート3

途中までに入力すると絞り込み検索できるのも便利。

Tailwind2.x対応のチートシート集

Tailwind2対応のチートシートがこちら。

Tailwind CHEATSHEET Tailwind2.x対応のチートシート集1

こちらも検索フォームでクラスの絞り込み検索ができ、ドロップダウンから詳細なクラスの使い方を確認できます。

Tailwind2.x対応のチートシート集2

詳細内容のところではブレークポイントのタグをクリックするとブレークポイント付きのclassをコピーできます。

チートシートより使える?TailwindCSS公式ドキュメント

チートシートは使えてなんぼですが、ぶっちゃけ公式ドキュメントが一番使いやすいUIになってるんですよね。

チートシートより使える?TailwindCSS公式ドキュメント1

検索するとポップアップが表示され、絞り込み検索ができます。公式ドキュメントなので検索結果は常に最新バージョン対応。

チートシートより使える?TailwindCSS公式ドキュメント2

ドキュメントは単にコードが表示されるだけでなく、画像でわかりやすく違いが表示されるので使うとどうなるかがすぐにわかります。

普段は公式ドキュメントの方を使ってるのでこっちだけブックマークしておいてもいいと思います。

さいごに

TailwindCSSはBootstrapのようなCSSフレームワークと違って使用したクラスだけをCSSファイルに書き出してくれるため、ファイルサイズを大幅に抑えて軽量化することができます。

sassが使えるところならだいたい使えるので、WordpressテーマやShopifyテーマの制作にも使えてかなり便利。あとカスタマイズのしやすさやFigmaで作ったデザインをTailwindで書き出せたりもするのでUIデザインでも使われそうです。