Tailwind CSS

Tailwind CSS (opens in a new tab) is an utility-first CSS framework that works exceptionally well with Rasengan.js.

Installing Tailwind CSS

Install the Tailwind CSS packages and run the init command to generate both the tailwind.config.js and postcss.config.js files. Or if you prefer, you can create these files manually.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Configuring Tailwind CSS

Inside tailwind.config.js, add paths to the files that will use Tailwind CSS class names. But make sure to use the adaptPath utility function to generate the correct path.

import { adaptPath } from "rasengan";
 
/** @type {import('tailwindcss').Config} */
export default {
  content: adaptPath(["./src/**/*.{ts,tsx,js,jsx}"]),
  theme: {
    extend: {},
  },
  plugins: [],
};

Inside the postcss.config.js, specify the path to the tailwind.config.js file using the adaptPath utility function again.

import { adaptPath } from "rasengan";
 
export default {
  plugins: {
    tailwindcss: {
      config: adaptPath("./tailwind.config"),
    },
    autoprefixer: {},
  },
};

Importing Styles

Add the Tailwind CSS directives (opens in a new tab) that Tailwind will use to inject its generated styles to a Global Stylesheet in your application, for example:

@tailwind base;
@tailwind components;
@tailwind utilities;

Then import the index.css file in your application entry point.

// These styles apply to every route in the application
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>;
}

Using Tailwind CSS Classes

After installing Tailwind CSS and adding the global styles, you can use Tailwind's utility classes in your application.

Next steps