controlling z-index

[dimadem]

Hello every one, trying to set z-index in project (in case wanna have p5sketch as a part of background).

Is there any rules to use it with component ?

thank you!

[jamesrweb]

As mentioned in the Children section of the project readme, you can access the wrapper class and then use any css-in-js implementation you like therein! 👌🏻

[dimadem]

Thanks a lot! Don't know about that. =)

[dimadem]

return ( <P5WrapperClassName className="absolute"> <ReactP5Wrapper sketch={sketch} /> </P5WrapperClassName> );

Is that okay case for Tailwind? Trying to control "z-index" or "absolute" and its not able for me. Sorry I'm not a great performer and don't have deep knowledge. So what can i do? Thank you

In case any tailwind property is not able there

P.S. I can’t understand concept behind P5WrapperClassName. It’s some kind of hook?

🎈🎈🎈

Using
last version of react-p5-wrapper
tailwindui
nextjs

[jamesrweb]

P5WrapperClassName is the class name given to the div that wraps the canvas element.

In your case you would want to target ${P5WrapperClassName} and ${P5WrapperClassName} canvas if you were using a css-in-js library. To use tailwind, you would want to actually go to your .css file where you @import tailwind etc and then add a style there for react-p5-wrapper div (the wrapping div) and react-p5-wrapper div canvas (the canvas) and then use @apply some-tailwind-class-name in those selector blocks accordingly.

That is all tailwind specific though and out of the scope of this project, all you need to know is that the P5WrapperClassName is the class name of the div element that wraps the canvas element.

[dimadem]

Another try

import { ReactP5Wrapper, P5WrapperClassName } from "react-p5-wrapper";
import sketch from "../mikado/sketch";

//TODO get rid of the z-index */
//TODO get transparent background */

export default function P5Background(children) {
  const ZindexProperty = () => {
    return (
      <style jsx global>
        {`
          .${P5WrapperClassName} {
           relative, -z-10
          }
        `}
      </style>
    );
  };
  return (
    <>
      <ZindexProperty />
      <ReactP5Wrapper className="relative -z-10" sketch={sketch} />
    </>
  );
}

[jamesrweb]

Yes but:

relative, -z-10

is not valid css and will not work outside of the css file you use to import tailwind itself without using @apply rules. Which again, is tailwind specific and out of scope for this project, please read the tailwind docs for more on this.