How to inline CSS when using Next.js v13 app directory?

[lucgagan]

I am using https://panda-css.com/ with Next.js v13 (app folder).

The pages load as expected, e.g. https://ray.run/blog/mastering-poms

But if you look at the rendered HTML, it links to CSS assets, e.g.

<link rel="stylesheet" href="/_next/static/css/3604df4459464cea.css" data-precedence="next"/>

I would like to inline this CSS in the response.

How do I do it?

[segunadebayo]

Hi @lucgagan,

Any reason you're bothered by this? The CSS is injected at build time by the PostCSS plugin.

If you want to a see the raw CSS generated, you can use the panda cssgen command and check the styled-system/styles.css file