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