How to integrate with NextJS 13?

[tspecht]

I'm on NextJS 13.4.7. I followed the installation guide, but none of my styles actually end up in the DOM. I believe the issue is that NextJS 13 requires the use of a StyleRegistry, but I'm unsure where to get the fully rendered CSS from. Any suggestions?

[anubra266]

@tspecht if you inspect the dom, are the atomic classnames generated?

[tspecht]

@anubra266 they do, yes, but I can not find any of the actual CSS as part of the DOM. For reference, I'm migrating from stitches, where I needed to use a Registry to get the CSS to be injected. Is there a function provided similar to getCssText in stitches?

"use client";

import React, { useState } from "react";
import { useServerInsertedHTML } from "next/navigation";
import { getCssText } from "stitches.config";

export default function StitchesRegistry({ children }: { children: React.ReactNode }) {
  const [isRendered, setIsRendered] = useState(false);

  useServerInsertedHTML(() => {
    if (!isRendered) {
      setIsRendered(true);
      return <style id="stitches" dangerouslySetInnerHTML={{ __html: getCssText() }} />;
    }
  });

  return <>{children}</>;
}

[anubra266]

@tspecht are you sure you imported your global which contains the layers in your app?
https://panda-css.com/docs/getting-started/nextjs#import-the-entry-css-in-your-app

[tspecht]

I am, as I have tailwind imported there as well, which works without any issues. My full globals.css is

@layer reset, base, tokens, recipes, utilities;

@tailwind base;
@tailwind components;
@tailwind utilities;

[anubra266]

OKay @tspecht Might need an online reproduction. Try if you can reproduce in stackblitz. Cause I'm unable to reproduce the issue.

[tspecht]

@anubra266 here you go! https://stackblitz.com/edit/stackblitz-starters-cexpav

[asterikx]

I'm also experiencing weird issues, with styles sometimes not being loaded (classes are present in the DOM). In my case, it's difficult to reporduce. It sometimes happens when refreshing the page with dev tools opened (some caching issues maybe?).

[anubra266]

@tspecht you can't have two post css config files. Your .js config is used, and you haven't added panda plugin in that config.
Also, your example doesn't include the layers.
And lastly, it seems tailwind isn't letting panda work while it's present.