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

npm install tailwindcss @tailwindcss/vite

[02]Configure the Vite plugin

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

rasengan.config.js

import { 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

@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

import { Button } from '@/components/common/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

npm run dev

CSS Modules

CSS Preprocessors

Discover Plus Ultra ✨

A stunning and well crafted Portfolio website to showcase your work in a nice way.

Tailwind CSS

Installation

On This Page

Discover Plus Ultra ✨