「Tailwind CSS Tips, Tricks & Best Practices」を観て学ぶ

公開日時
更新日時

YoutubeでTailwind CSS関連の動画を探していたところ、「Tailwind CSS Tips, Tricks & Best Practices」を見つけた。

Ember.jsというフレームワークのカンファレンスセッションだったらしい。

トレーニング用のリポジトリも用意されており、動画を観ながら実際に手を動かして13個の練習問題を解いた。

exercise-5の flex-shrink-0 は今まで使ったことがなかったので参考になった。

また、exercise-8では grid の基本について学べた。

リポジトリでも紹介されていた↓のVSCode拡張を入れておくとTailwindを使った開発がとても楽になる。


Related #css

Youtube動画で学ぶTailwind CSS

「Designing with Tailwind CSS」シリーズがとても分かりやすかった。

Chakra UIで打ち消し線を使う

Strikethrough

Tailwind CSSでダークモード対応をする

classを指定してユーザがダークモードを切り替えられるようにした

Learn CSS

tailwindcss2.0 upgrade

Upgrade Guideを参考に

Next.js 10 + Tailwind CSS 2.0 でAMP対応(hybrid)を行う

next/ampのhybridモードを使い通常ページとAMPページを生成し、PostCSSでCSSの容量削減を行いinline cssとして埋め込み