Panda CSS doesn't style components

I am using Rescript 11 RC 4 and using Panda CSS for styling.
To create styles, I am using Panda’s CSS function that I imported via interop. I tried to create style using ReactDOM.Style.make and normal Object. And even compiled JS looks fine. But my style aren’t rendered.

I have tried both these methods.

  1. Panda CLI - Panda CSS
  2. Using Next.js - Panda CSS

But my styles are not coming up. OTOH, I tried Tailwind CLI, and it worked.

Does anyone know what’s the issue.

Can you share the bindings you are using, and the JS it outputs?

@module("../../styled-system/css") external css: ReactDOM.Style.t => string = "css"
@module("../../styled-system/css") external css1: {..} => string = "css"
@module("../../styled-system/css") external cx: ('a, 'b) => string = "cx"
@module("../../styled-system/patterns") external flex: {..} => string = "flex"

// Generated by ReScript, PLEASE EDIT WITH CARE

import * as Css from "../../styled-system/css";
import * as Patterns from "../../styled-system/patterns";

function css(prim) {
  return Css.css(prim);
}

function css1(prim) {
  return Css.css(prim);
}

function cx(prim0, prim1) {
  return Css.cx(prim0, prim1);
}

function flex(prim) {
  return Patterns.flex(prim);
}

export {
  css ,
  css1 ,
  cx ,
  flex ,
}
/* ../../styled-system/css Not a pure module */