CORE CONCEPTS

CSS Modules

Rasengan.js provides built-in support for CSS Modules using the .module.css extension.

CSS Modules ensure locally scoped styles by automatically generating unique class names. This allows you to reuse class names across different files without worrying about conflicts, making it the preferred approach for styling individual components.

Importing CSS Modules

CSS Modules can be imported into any file within the src directory to style components.

TypeScript

JavaScript

Card.tsx

tsximport styles from "./layout.module.css";
 
type CardProps = {
  title: string;
  content: string;
};
 
export default function Card({ title, content }: CardProps) {
  return (
    <div className={styles.card}>
      <h1 className={styles.card__title}>{title}</h1>
      <p className={styles.card__content}>{content}</p>
    </div>
  );
}

Global Styles

Global styles should be placed inside the src/styles directory and imported into the src/main.tsx file.

styles/index.css

src/styles/index.css

cssbody,
html {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  width: 100vw;
  min-height: 100vh;
  overflow-x: hidden;
}
 
a {
  text-decoration: none;
}

Importing Global Styles in src/main.tsx

To apply global styles across your application, import them in src/main.tsx.

TypeScript

JavaScript

src/main.tsx

tsx// Global styles applied to all routes
import "@/styles/index.css";
 
import { type AppProps } from "rasengan";
import AppRouter from "@/app/app.router";
 
export default function App({ Component, children }: AppProps) {
  return <Component router={AppRouter}>{children}</Component>;
}

External Stylesheets

Stylesheets from external packages can be imported in src/main.tsx or any other file where they are needed.

TypeScript

JavaScript

tsximport "@rasenganjs/image/css";
 
import { type AppProps } from "rasengan";
import AppRouter from "@/app/app.router";
 
export default function App({ Component, children }: AppProps) {
  return <Component router={AppRouter}>{children}</Component>;
}

You can also load stylesheets from a CDN into the src/template.tsx file.

TypeScript

JavaScript

src/template.tsx

tsximport { type TemplateProps } from 'rasengan';
 
export default function Template({ Head, Body, Script }: TemplateProps) {
  return (
    <html lang="en">
      <Head>
        <meta charSet="UTF-8" />
        <link rel="icon" type="image/svg+xml" href="/rasengan.svg" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" />
      </Head>
 
      <Body>
        <Script />
      </Body>
    </html>
  );
}

Pre-rendering

Tailwind CSS