React、Next.jsで使われるCSSの書き方

よく使うReact、Next.jsでのCSSの書き方

React、Next.jsでのCSSの書き方が多様化しているので簡単にまとめて見ました。
技術選定などの参考になれば幸いです。

注意

今現時点で2025年なので今後バージョンアップとかで書き方変わったり、
新しいライブラリが登場するのでそのあたりはご注意ください。

Tailwind

CSSを簡単に書けるようにした革命的なCSSフレームワーク（ライブラリ）です。
バックエンドしか知らない人はCSSが苦手な人が多い傾向にあるので、
採用コストなどを考えても導入はかなりいいです。Next.jsもTailwindを推奨しているみたいです。

<main className="flex-grow flex flex-col items-center justify-center">
    <div className="bg-gradient-to-r from-cyan-300 to-cyan-600 text-white px-16 py-24 rounded-md w-full max-w-5xl text-center shadow-lg">
        <h1 className="text-5xl font-bold mb-10 flex items-center justify-center">
            Tailwindの練習
        </h1>
        <p className="text-3xl">×Tailwindを学ぼう</p>
    </div>
    <p className="text-center text-2xl p-10">お気に入りの技術記事があれば投稿しよう🎵</p>
</main>

一撃で理解できる! CSSのフレームワークTailwindをCSSと比較しながら解説!

CSS Module

クラス名がファイルごとにユニークに変換されるので、他と被らず、
使い方は普通のCSSと同じで、コンポーネント単位でスタイルを閉じ込められます。
またライブラリ依存しないのでメンテナンスコストを抑えることもできるので
長期運用には、向いていると思います。
stylesって書いたりするのがポイントです。

import styles from './TopPage.module.css';

export default function PracticeTailwind() {
  return (
    <main className={styles.main}>
      <div className={styles.container}>
        <h1 className={styles.title}>Tailwindの練習</h1>
        <p className={styles.subtitle}>×Tailwindを学ぼう</p>
      </div>
      <p className={styles.footer}>お気に入りの技術記事があれば投稿しよう🎵</p>
    </main>
  );
}

別でファイルでcss用のファイルを作ります。

TopPage.module.css

.main {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.container {
  background: linear-gradient(to right, #67e8f9, #0891b2); /* from-cyan-300 to-cyan-600 */
  color: white;
  padding: 6rem 4rem; /* py-24 px-16 */
  border-radius: 0.375rem; /* rounded-md */
  width: 100%;
  max-width: 64rem; /* max-w-5xl */
  text-align: center;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); /* shadow-lg */
}

.title {
  font-size: 3rem; /* text-5xl */
  font-weight: bold;
  margin-bottom: 2.5rem; /* mb-10 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.subtitle {
  font-size: 1.875rem; /* text-3xl */
}

.footer {
  text-align: center;
  font-size: 1.5rem; /* text-2xl */
  padding: 2.5rem; /* p-10 */
}

こうしてみるとTailwindって楽ですね。😂
ただライブラリのバージョンアップなどが面倒なんです。💦

CSS-in-JS

AIで調べたとこによると2017年から2020年まではかなりたくさんのプロジェクトなどで使用されていたみたいです。今もUIライブラリ（Chakra UI, Material UI）やダッシュボード系では CSS-in-JS が非常に多いみたいです。Tailwindが流行ったことで、新規開発ではTailwindを使うケースが増えています。
Next.jsの開発だとTailwindは使うのが当たり前のようになっています。

styled-components

CSS-in-JSの代表的なライブラリです。

npm install styled-components

import styled from 'styled-components';

const Main = styled.main`
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
`;

const Container = styled.div`
  background: linear-gradient(to right, #67e8f9, #0891b2);
  color: white;
  padding: 6rem 4rem;
  border-radius: 0.375rem;
  width: 100%;
  max-width: 64rem;
  text-align: center;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
`;

const Title = styled.h1`
  font-size: 3rem;
  font-weight: bold;
  margin-bottom: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
`;

const Subtitle = styled.p`
  font-size: 1.875rem;
`;

const Footer = styled.p`
  text-align: center;
  font-size: 1.5rem;
  padding: 2.5rem;
`;

export default function PracticeTailwind() {
  return (
    <Main>
      <Container>
        <Title>Tailwindの練習</Title>
        <Subtitle>×Tailwindを学ぼう</Subtitle>
      </Container>
      <Footer>お気に入りの技術記事があれば投稿しよう🎵</Footer>
    </Main>
  );
}

emotion

CSS-in-JSの代表的なライブラリです。

npm install @emotion/react @emotion/styled

/** @jsxImportSource @emotion/react */
import styled from '@emotion/styled';

const Main = styled.main`
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
`;

const Container = styled.div`
  background: linear-gradient(to right, #67e8f9, #0891b2);
  color: white;
  padding: 6rem 4rem;
  border-radius: 0.375rem;
  width: 100%;
  max-width: 64rem;
  text-align: center;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
`;

const Title = styled.h1`
  font-size: 3rem;
  font-weight: bold;
  margin-bottom: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
`;

const Subtitle = styled.p`
  font-size: 1.875rem;
`;

const Footer = styled.p`
  text-align: center;
  font-size: 1.5rem;
  padding: 2.5rem;
`;

export default function PracticeEmotion() {
  return (
    <Main>
      <Container>
        <Title>Tailwindの練習</Title>
        <Subtitle>×Tailwindを学ぼう</Subtitle>
      </Container>
      <Footer>お気に入りの技術記事があれば投稿しよう🎵</Footer>
    </Main>
  );
}

Zero-runtime CSS-in-JS

Vanilla Extract / Linariaもあります。よかったらご自身でも調べてみてください。

資料

ChatGPT