tailwindのサンプル集

tailwindでよく使いそうな機能を列挙する

文字サイズ

text-xl
公式ページ

文字の太さ

font-bold
公式ページ

パディング

パディング
公式ページ

レスポンシブデザイン

レスポンシブ
公式ページ

カスタマイズデザイン

カスタマイズデザイン

tailwind.config.mjsのextendsに追記する

公式ページ

フォント変更

Hachi Maru Pop Font

google fontsからフォントを選択

select...でlinkを作成してheadに追記

CSS rules to specify familiesをコピーしてtailwind.config.mjsのfontFamilyに追記する(keyは自由、valueはCSS rules...のもの)

container

公式ページ

flex

justify...も

flex-wrapも

公式ページ

スペース

公式ページ

transition

公式ページ

画面サイズによって表示を変える

補足:ここで使っているアイコンはcdnjsでfont-awesomeを探してheadに貼り付け。使い方はfont-awesome内で検索

grid

object-cover

cursor