上記のような構成の ./apps/next のNext.jsのローカルサーバーを pnpm dev で起動した場合に、.env の環境変数を参照（process.env.XXXX）したい場合の方法。stackoverflowに答えがあった。
以下はコマンドとpackage.jsonの修正内容メモ。
pnpm add -w -D -E dotenv-cli{
"scripts": {
"dev": "pnpm with-env next dev",
"with-env": "dotenv -e ../../.env --"
},
}shadcn/uiのドキュメント通りにダークモードの設定をしていたらうまくダークモードに切り替わらなかったので対応方法を残しておく。
次のコマンドを実行するとshadcn/uiの初期化を行い、いくつかのファイルが自動的に修正される。
pnpm dlx shadcn-ui@latest initこのとき globals.css が次のように修正される。
@layer base {
:root {
/* ... */
}
.dark { /* [!code highlight]
/* ... */
}
}上記の .dark のセクションが実際のCSS（/_next/static/css/app/layout.css）に出力されない場合がある。Tailwind CSSでは使われていないclass属性は出力しないという仕様になっているため。
なので、次のように tailwind.config.ts の safelist に 'dark' を追加すると良い。
const config = {
safelist: ['dark'],
}他には次のように .dark を :root[class~="dark"] に置き換えるという方法がある。
@layer base {
:root {
/* ... */
}
:root[class~="dark"] { /* [!code highlight]
/* ... */
}
}最後に @layer base { ... } の外側に出すという対応方法もある。
これらの方法は以下の公式のissueにコメントがついていた。
Tailwind CSSの設定の content: ['./src/**/*.{ts,tsx}'] の対象となっているファイルで、次のように何かの属性に dark という単語が含まれていた場合は問題は発生しない（CSSファイルに.darkセクションが出力される）ため気づかなかった。
<ToggleGroupItem className="rounded-full" value="dark" aria-label="Toggle dark">