Next.js14 CSS Styling

Tags
Next.js
Published
January 8, 2024
Author

前回の記事

 

概要

  • CSSのスタイルにはtailwindを使用する。
  • /app/ui配下にglobal.cssを配置する。global.cssはアプリケーションのどこからでもimportできるが、トップレベルのcomponentでimportするのがベストプラクティスである。
  • コンポーネント単位でCSSを定義することも可能である。
  • 状態によって適用したいcssを変える場合がある。clsxライブラリを使うと容易に実現できる
clsx
lukeedUpdated Feb 11, 2024
 
 

学び

CSSはtailwindの他にmaterial-uiやChakuraなど有名なライブラリがある。部品として提供されているイメージで、細かなレイアウト調整をするためにtailwindは有効な選択肢だと思った。また、clsxライブラリを使うことで条件分岐によるcssの変更も書きやすいので、導入していく。