Images and Advanced CSS

Images and Advanced CSS

While Tailwind is great, sometimes you need a specific image or complex CSS layout (animations, third-party libraries).

A. Adding an Image

No need for a complex public folder.

1. Drop your image (e.g., logo.png) directly next to your page.tsx file.
2. Import it like a JavaScript module:

import logo from "./logo.png";

export default function Page() {
    return <img src={logo} alt="My Logo" className="w-32" />;
}

JopiJS handles optimizing and serving it for you.

B. CSS Modules (The JopiJS Way)

JopiJS supports CSS Modules to isolate your styles.

1. Create a style.module.css file next to your component:

   .myButton {
       border: 4px solid blue;
       transform: rotate(-3deg);
   }

2. Use it in your page using the useCssModule hook:

   import { useCssModule } from "jopijs/ui";
   import styles from "./style.module.css";
   
   export default function Page() {
       // Activates styles for this page
       useCssModule(styles);
   
       return (
           <button className={styles.myButton}>
               Click Me
           </button>
       );
   }

useCssModule usage, ensures that only the CSS of actually used components is sent to the browser. This is the secret to JopiJS's performance!