| name | rasengan-styling |
| description | Styling patterns for Rasengan.js. Covers CSS Modules (scoped styles), Tailwind CSS integration (v3/v4), and CSS preprocessors (Sass, Less, Stylus). Use when adding or configuring styling in a Rasengan.js project. |
| license | MIT |
| metadata | {"author":"dilane3","framework":"rasengan","version":"1.0.0"} |
Rasengan.js Styling Patterns
When to Activate
- Adding CSS Modules for component-scoped styles
- Setting up Tailwind CSS (v3 or v4) in a Rasengan.js project
- Configuring Sass, Less, or Stylus preprocessors
- Importing global styles or external stylesheets
- Choosing between styling approaches for a new project
CSS Modules
Rasengan.js has built-in support for CSS Modules using the .module.css extension. Class names are auto-scoped to the component.
import styles from './Card.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
Place global styles in src/styles/ and import them in src/main.tsx:
body,
html {
margin: 0;
padding: 0;
width: 100vw;
min-height: 100vh;
}
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
Import package stylesheets in src/main.tsx or load CDN stylesheets in src/template.tsx:
import '@rasenganjs/image/css';
import { type TemplateProps } from 'rasengan';
export default function Template({ Head, Body, Script }: TemplateProps) {
return (
<html lang="en">
<Head>
<link rel="stylesheet" href="https://cdn.example.com/styles.css" />
</Head>
<Body>
<Script />
</Body>
</html>
);
}
Tailwind CSS
Version 4
npm install tailwindcss @tailwindcss/vite
import { defineConfig } from 'rasengan';
import tailwindcss from '@tailwindcss/vite';
export default defineConfig({
vite: {
plugins: [tailwindcss()],
},
});
@import 'tailwindcss';
Version 3
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
export default {
content: ['./src/**/*.{js,jsx,ts,tsx}'],
theme: { extend: {} },
plugins: [],
};
@tailwind base;
@tailwind components;
@tailwind utilities;
CSS Preprocessors
Rasengan.js supports Sass, Less, and Stylus — install the compiler and use the matching file extension.
Sass (.scss / .sass)
npm install --save-dev sass
$primary-color: #333;
.my-component {
color: $primary-color;
}
import './MyComponent.scss';
Sass with CSS Modules (.module.scss):
$primary-color: #333;
.component {
color: $primary-color;
}
import styles from './MyComponent.module.scss';
Less (.less)
npm install --save-dev less
@primary-color: #333;
.my-component {
color: @primary-color;
}
import './MyComponent.less';
Stylus (.styl / .stylus)
npm install --save-dev stylus
/* MyComponent.styl */
primary-color = #333
.my-component
color primary-color
import './MyComponent.styl';
Rules
- Use CSS Modules (
.module.css) for component-scoped styles to avoid class name conflicts
- Place global styles in
src/styles/ and import them in src/main.tsx
- For Tailwind v4: use the
@tailwindcss/vite plugin; for v3: use PostCSS with tailwind.config.js
- Import external/package stylesheets in
src/main.tsx; CDN stylesheets go in src/template.tsx
- Sass with CSS Modules uses the
.module.scss extension for scoped styles with preprocessor features
- No additional Vite config is needed for preprocessors — just install the compiler package
