Panda CSS default theme not applying

[bikeclub-caroline]

Description

When I apply a padding, margin, height to a component using the default panda CSS theme unit measurements (https://panda-css.com/docs/customization/theme), nothing is applied and in the DOM inspection, the values are not recognized (striked-through). For it to work, I have to use px or rem.

Code snippet:

export const IntroSection = ({ introContent }: IintroSection) => {
  const { title, introText } = introContent;

  return (
    <SmallerWrapper>
      {title && (
        <h2
          className={css({
            textStyle: "text700_xl",
            mb: "8",
            lg: { textStyle: "text700_3xl" },
          })}
        >
          {title}
        </h2>
      )}
      {introText && (
        <MarkdownContent content={introText} paragraphFontSize="lg" />
      )}
    </SmallerWrapper>
  );
};

Screenshot of the DOM element:

Please ignore the link to reproduction since it is not possible for me to reproduce my application on stackblitz and set up is different.

Link to Reproduction

https://stackblitz.com/edit/vitejs-vite-33fjgd?file=src%2FApp.tsx,postcss.config.cjs&terminal=dev

Steps to reproduce

1. Assign a panda CSS unit to the css in any element
2. Go to the web browser
3. Check the DOM and UI
4. changes are ignored

JS Framework

React, Next, Typescript

Panda CSS Version

0.19.0

Browser

Google Chrome Version 121.0.6167.85 (Official Build) (arm64)

Operating System

• [X] macOS
• [ ] Windows
• [ ] Linux

Additional Information

No response

[segunadebayo]

Hi @bikeclub-caroline,

Could you attach a valid reproduction? The attached repro doesn't reflect the code snippet you shared.

From the look of things, I sense you have a custom preset or theme, but it's hard to tell.

Consider adding this to your panda config

include: ["@pandacss/preset-base"]

[astahmer]

you might also want to update your panda version to latest (v0.28.0)

[bikeclub-caroline]

Hello, updating to the latest version worked for me. thanks! I haven't added include: ["@pandacss/preset-base"] Do I need it, what does it do? Thank you

[astahmer]

if you use another custom preset then it's needed to explicitly import the built-in one https://panda-css.com/docs/customization/presets#which-panda-presets-will-be-included-

if you don't use a custom preset then you don't need to do anything !

[bikeclub-caroline]

Ok, thanks a lot

[bikeclub-caroline]

Hello, Sorry is it possible to reopen this ticket, please. I thought my problem was solved but, when I add a chakra-ui default theme measurement, it actually converts it to px. ie: margin set to "2" will show margin: "2px" in the DOM:

If you need me to update the link to reproduction with my files, could you indicate which files you want me to copy? Thank You very much

[astahmer]

your panda config and a file containing a reproduction to your issue should be enough

[bikeclub-caroline]

thank you. I have updated the folder with panda.config, package.json, and an examoke if component IntroSection.tsx where I have the issue : https://stackblitz.com/edit/vitejs-vite-33fjgd?file=package.json,panda.config.ts,IntroSection.tsx&terminal=dev

[astahmer]

your stackblitz link isnt working... this is not a valid minimal reproduction 😓 in the future please make a valid minimal reproduction, this will help a lot for non-trivial issues like this

---

that being said, just looking at the config was enough without needing to run the app to spot the issue: you didn't wrap the theme.tokens in extend so you're overriding every tokens provided by the default presets

so you need to change it like this:

theme: {
-    tokens: {
-      colors,
-    },
    extend: {
+     tokens: { 
+         colors
+    },
      textStyles,
      layerStyles,
      breakpoints,
    },
  },