Tailwind CSS

Tailwind CSS works with Juice through Vite's plugin system. Install it, add it to your Vite config, and use utility classes in your components — no framework-specific integration required.

Install

bun add -d tailwindcss @tailwindcss/vite

Vite Config

Add the Tailwind CSS Vite plugin alongside the Juice plugin.

// vite.config.ts
import { defineConfig } from 'vite';
import juice from '@cmj/juice/plugin';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
  plugins: [juice(), tailwindcss()],
});

CSS Entry

Create a CSS file that imports Tailwind. This is your global stylesheet.

/* app/routes/global.css */
@import 'tailwindcss';

Use in Components

Use Tailwind utility classes directly in your Juice components. They work in both server and client components.

// app/routes/home.tsx
import React from 'react';

export default function Home() {
  return (
    <div className="max-w-4xl mx-auto px-4 py-8">
      <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
        Welcome
      </h1>
      <p className="mt-4 text-gray-600 dark:text-gray-300">
        Your Juice app with Tailwind CSS.
      </p>
    </div>
  );
}

Dark Mode

Tailwind supports dark mode via the dark: variant. By default it uses media (the user's OS preference). You can switch to class strategy for manual toggling.

/* In your tailwind config or CSS */
/* media strategy (default) — follows prefers-color-scheme */
@import 'tailwindcss';

/* class strategy — toggle by adding .dark to <html> */
@import 'tailwindcss';
@custom-variant dark (&:where(.dark, .dark *));

Both strategies work with Juice's server rendering. The classes are in the initial HTML, so there is no flash of unstyled content.

Why This Works

Tailwind is a Vite plugin. Juice delegates all CSS processing to Vite, so any Vite-compatible CSS tool works the same way — Tailwind, UnoCSS, vanilla-extract, CSS Modules, or plain CSS. No special framework integration needed.

In production, Tailwind automatically purges unused classes, and Juice's build step bundles the output into optimized, hashed CSS files.

Any Vite CSS plugin works. Tailwind works because Juice uses Vite. If you prefer UnoCSS, Lightning CSS, or another tool, the setup is the same: install it, add it to vite.config.ts, and use it.