「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

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

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

Next.js9 + Tailwindcss2.0環境で Error: true is not a PostCSS plugin エラーが発生

Next.jsを最新バージョンにアップデートした

Refactoring UI: The Book

個人開発で何か作る際にBootstrap感のあるUIになりがち問題を解消したい

tailwindcss2.0 upgrade

Upgrade Guideを参考に

@tailwindcss/typographyにもダークモードを適用する

tailwind.config.jsにtypography設定を追加