【Next.js/TailwindCSS】CSSモジュールを追加してみよう | Next.js Tutorial #2 - CSS Styling

CSS Modules

• TailwindではスコープCSSの命名の競合を気にする必要はありません。CSSモジュールが固有なクラス名を自動的にコンポーネントに設定するからです。

CSS Modules allow you to scope CSS to a component by automatically creating unique class names, so you don't have to worry about style collisions as well.

所感

• これはとても驚きました。従来のcssだと同じ名前のプロパティのcssがあった場合、下のものが採用されるという仕組みになっていたからです。同じcssプロパティ名でも自動的に識別してくれるのはありがたいですね。

実際にサンプルコードを書いてみよう

/* /app/ui/home.module.css(ファイルを新規作成) */
+ .shape {
+   height: 0;
+   width: 0;
+   border-bottom: 30px solid black;
+   border-left: 20px solid transparent;
+   border-right: 20px solid transparent;
+ }

// page.tsx
import AcmeLogo from '@/app/ui/acme-logo';
import { ArrowRightIcon } from '@heroicons/react/24/outline';
import Link from 'next/link';
+ import styles from '@/app/ui/home.module.css';
 
export default function Page() {
  return (
    <main className="flex min-h-screen flex-col p-6">
+      <div className={styles.shape} />
    // ...
  )
}

参考