はじめに
Next.js と Tailwind CSS v4 で作っているブログに、Typography プラグイン（@tailwindcss/typography）を導入しようとしたところ、ビルドエラーが発生しました。
備忘録として残します。
問題
globals.css にプラグインの読み込みを追加して開発サーバーを起動した時に、以下のエラーが発生しました。
Error: Error evaluating Node.js code
CssSyntaxError: tailwindcss: /Applications/github/XXX/XXX/src/app/globals.css:1:1: "./typography" is not exported under the conditions ["node","require"] from package /Applications/github/XXX/XXX/node_modules/tailwindcss (see exports field in /Applications/github/XXX/XXX/node_modules/tailwindcss/package.json)
Import trace:
Client Component Browser:
./src/app/globals.css [Client Component Browser]
./src/app/layout.tsx [Server Component]
このときの globals.css は次のとおりです。
globals.css
@import "tailwindcss";
@plugin "tailwindcss/typography";
解決方法
プラグイン名の先頭に @ が抜けていました。@ を付けたらエラーが解消しました。
globals.css
@import "tailwindcss";
- @plugin "tailwindcss/typography";
+ @plugin "@tailwindcss/typography";
なぜこのエラーになるのか
@ の有無で、読みに行くパッケージがまったく別物になります。
| 書き方 | 読みに行く先 |
|---|---|
tailwindcss/typography |
tailwindcss 本体パッケージの中の typography
|
@tailwindcss/typography |
@tailwindcss スコープの typography パッケージ |
@ がないと Tailwind CSS 本体の中から typography を探しますが、本体にはそのようなファイルは公開されていません。
そのため「./typography is not exported（公開されていない）」というエラーになります。
エラーメッセージ中の from package .../node_modules/tailwindcss という部分が、本体パッケージを見に行っていることを示すヒントでした。
おわりに
@plugin に書く名前は、npm install したパッケージ名と完全に一致させる必要があります。「is not exported」系のエラーが出たら、まずはパッケージ名のスペル、特にスコープの @ を確認してみてください。