Next.js Learn Courseをやってみる Chapter2
CSS Styling
ここでは、様々なCSSの設定方法を教えてくれます。
- globalなCSSファイル
- Tailwind, CSS modules
- clsxユーティリティパッケージを使って条件付きでクラス名を追加する
Global
app/ui/global.cssを使うと、アプリケーションのすべてのルートにCSSのツールを追加できる。
アプリケーションのどのコンポーネントでもglobal.cssをインポートできるが、NextjsではRoot Layoutに追加するのが良い。
/app/layout.tsxに以下を追加。
import '@/app/ui/global.css';
と一気にページがオシャレに!だけどファイルを見てみると全くCSSが書かれていません。
But wait a second, you didn’t add any CSS rules, where did the styles come from?
チュートリアルでもこのように書かれていて、読者のツッコミ待ちのような楽しい書き方をしています(好き)
@tailwind base;
@tailwind components;
@tailwind utilities;
ファイルを見てみるとtailwindの記述があり、Tailwindの説明に入ります。
Tailwind
結局上のスタイリングはTailwindが全部やってくれてました。
<h1 className="text-blue-500">I'm blue!</h1>
と書くと青いテキストが表示されます。クラス名からスタイリングが分かりやすいですよね。/app/page.tsxに書かれた実際のTailwind:
<main className="flex min-h-screen flex-col p-6">
CSS Modules
.shape {
height: 0;
width: 0;
border-bottom: 30px solid black;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}
home.module.cssというファイルを作成し、クラス名を一意に設定すれば、
import styles from './home.module.css';
//...
<div className={styles.shape}></div>;
このように読み込んでCSSをコンポーネントに適用させることができます。コンポーネントとスタイリングを分けたい人はこちらで。
NextjsではTailwindとCSSモジュールが最も一般的なスタイリング方法のようです。好みの問題で、同じアプリケーションで両方とも使えます。
clsx
この条件の時は背景を青に、などの条件分けの時に便利なライブラリ。
<span
className={clsx(
'inline-flex items-center rounded-full px-2 py-1 text-xs',
{
'bg-gray-100 text-gray-500': status === 'pending',
'bg-green-500 text-white': status === 'paid',
},
)}
>
条件分岐させたい部分と条件分岐させずにすべて適用したいケースの両方に対応できる。
他のスタイリングとして、Sass, CSS in JSライブラリはstyled-jsx, styled-componenst, emotionが使えます。
補足
リンクされたCSSドキュメントを見ると、クライアントコンポーネントだと、以下がサポート中。
kuma-ui
@mui/material
pandacss
styled-jsx
styled-components
style9
tamagui
tss-react
vanilla-extract
If you want to style Server Components, we recommend using [CSS Modules](https://nextjs.org/docs/app/building-your-application/styling/css-modules) or other solutions that output CSS files, like PostCSS or [Tailwind CSS](https://nextjs.org/docs/app/building-your-application/styling/tailwind-css).
サーバーコンポーネントだと、CSS Modules, PostCSS, TailwindCSSをお勧めしていました。
Discussion