Can PandaCSS show me the names of the styled components in the browser inspector?

[leodevbro]

When I inspect some div boxes in the browser, I find it difficult to find the specific div boxes in the source code (to edit it), because there is not any reference names in class names. There are only styling descriptions.

The source code is this:

Yes, this is a very simple example, sure I can find it in the source code, but it is a problem for big projects.

So, can PandaCSS generate class names like this?

to be able to search MyNiceDiv in VS Code.

[anubra266]

@leodevbro No panda can't do this. And I'm not sure I understand this. Would be helpful if you have a precedent. Like how some other css engines do this.

[anubra266]

@leodevbro I'm referring to atomic solutions like Tailwind. Because Panda is atomic.

[leodevbro]

OK, so, I'm wondering, how do you find a div in source code from browser inspect view?

[anubra266]

@leodevbro I right click on the div in the browser, and inspect tools. It takes me to the code for that div

[leodevbro]

inspect? You mean this inspect button?

It's not what I am saying. This inspect button will just show you the div in the browser developer window, not in the actual codebase (In VS Code). I want to somehow find the div in the VS Code codebase (Actual project files, I mean ReactJS project files).

[anubra266]

@leodevbro That's outside the scope of panda.