Bini.js
GitHubnpm

Tailwind CSS

Learn how to use Tailwind CSS v4 in your Bini.js application with zero configuration.

Tailwind CSS v4 is the default styling option in Bini.js. It's pre-configured using the official Vite plugin — no PostCSS configuration needed.

Zero Configuration: Bini.js uses the @tailwindcss/vite plugin. Everything works out of the box — no postcss.config.js or tailwind.config.js required.

Setup

When you create a new Bini.js project with Tailwind, everything is configured automatically:

vite.config.ts
// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'
import { biniroute } from 'bini-router'

export default defineConfig({
  plugins: [
    react(),
    tailwindcss(),  // Automatically added
    biniroute(),
  ],
})
app/globals.css
/* src/app/globals.css */
@import 'tailwindcss';

Basic Usage

Use Tailwind's utility classes directly in your components:

app/page.tsx
// src/app/page.tsx
export default function HomePage() {
  return (
    <div className="flex min-h-screen flex-col items-center justify-center bg-black">
      <h1 className="bg-linear-to-r from-cyan-400 to-blue-500 bg-clip-text text-4xl font-bold text-transparent">
        Welcome to Bini.js
      </h1>
      <p className="mt-4 text-lg text-slate-400">
        Styled with Tailwind CSS v4
      </p>
      <button className="mt-6 rounded-lg bg-cyan-500 px-4 py-2 font-medium text-black hover:bg-cyan-400 transition-colors">
        Get Started
      </button>
    </div>
  )
}

Tailwind CSS v4 Features

FeatureDescription
Vite PluginNative Vite integration — no PostCSS config needed
CSS-first configConfigure via CSS variables instead of JS
Lightning CSSFaster builds with Lightning CSS
Simplified setupJust @import "tailwindcss" — that's it

Theming with CSS Variables

Tailwind v4 uses CSS variables for theming:

app/globals.css
/* src/app/globals.css */
@import 'tailwindcss';

@theme {
  --color-primary: #06b6d4;
  --color-primary-dark: #0891b2;
  --font-sans: 'Inter', system-ui, sans-serif;
  --radius-card: 1rem;
}
Card.tsx
// src/app/components/Card.tsx
export function Card({ children }) {
  return (
    <div className="rounded-(--radius-card) bg-primary p-6">
      {children}
    </div>
  )
}

Responsive Design

Use Tailwind's responsive prefixes to adapt your layout:

app/page.tsx
// src/app/page.tsx
export default function ResponsivePage() {
  return (
    <div className="container mx-auto px-4">
      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
        {[...Array(3)].map((_, i) => (
          <div key={i} className="rounded-lg bg-slate-900 p-4">
            <h2 className="text-lg font-semibold text-white sm:text-xl">
              Card {i + 1}
            </h2>
          </div>
        ))}
      </div>
    </div>
  )
}
BreakpointMin Width
sm640px
md768px
lg1024px
xl1280px
2xl1536px

Dark Mode

Use the dark: variant for dark mode:

ThemeToggle.tsx
// src/app/components/ThemeToggle.tsx
export function ThemeToggle() {
  return (
    <div className="rounded-lg bg-white p-4 dark:bg-slate-900">
      <h2 className="text-slate-900 dark:text-white">
        Theme Aware Component
      </h2>
      <p className="text-slate-600 dark:text-slate-400">
        This adapts to light and dark mode
      </p>
    </div>
  )
}

Custom Utilities

Create custom utilities using @utility:

app/globals.css
/* src/app/globals.css */
@import 'tailwindcss';

@utility text-gradient {
  background: linear-gradient(to right, var(--tw-gradient-stops));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@utility card-hover {
  transition: all 0.2s ease;
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  }
}
// Using custom utilities
export function FeatureCard() {
  return (
    <div className="card-hover rounded-lg bg-slate-900 p-6">
      <h3 className="text-gradient from-cyan-400 to-blue-500 text-xl font-bold">
        Custom Utility
      </h3>
    </div>
  )
}

Common Patterns

Container

<div className="container mx-auto px-4">
  {/* Content */}
</div>

Flex Center

<div className="flex items-center justify-center">
  {/* Centered content */}
</div>

Grid Layout

<div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
  {/* Grid items */}
</div>

Button Styles

// Primary
<button className="rounded-lg bg-cyan-500 px-4 py-2 font-medium text-black hover:bg-cyan-400">
  Primary
</button>

// Secondary
<button className="rounded-lg border border-slate-700 px-4 py-2 text-white hover:bg-slate-900">
  Secondary
</button>
Previous
CSS Overview
Next
CSS Modules