CORE CONCEPTS

Tailwind CSS

Tailwind CSS works by scanning all of your HTML files, JavaScript components, and any other templates for class names, generating the corresponding styles and then writing them to a static CSS file.

It's fast, flexible, and reliable — with zero-runtime.

Installation

To install Tailwind CSS, follow one of the following guides depending on your project specifications:

Version 3

Version 4

[01]Install Tailwind CSS

Install tailwindcss and @tailwindcss/vite via npm.

Terminal

bashnpm install tailwindcss @tailwindcss/vite

[02]Configure the Vite plugin

Add the @tailwindcss/vite plugin to your Rasengan configuration.

rasengan.config.js

jsimport { defineConfig } from 'rasengan';
import tailwindcss from '@tailwindcss/vite';
 
export default defineConfig({
  vite: {
    plugins: [tailwindcss()],
  }
});

[03]Import Tailwind CSS

Add an @import to your CSS file that imports Tailwind CSS.

CSS

css@import "tailwindcss";

[04]Add Tailwind CSS to your Component page

Use Tailwind CSS classes to your component page or whatever you want.

home.page.jsx

jsximport { Button } from '@/components/button';
 
export default function Home() {
  return (
    <section className="flex flex-col items-center justify-center h-screen">
      <Button className="bg-primary rounded-lg px-4">Hello World</Button>
    </section>  
  )
}
 
Home.path = '/'

[05]Start your app to see the magic

Run your dev server with npm run dev.

Terminal

bashnpm run dev

CSS Modules

CSS Preprocessors