Tailwind CSS

Zero-config Tailwind CSS v4 integration. A thin wrapper around bun-plugin-tailwind — the plugin takes no options and simply registers the Bun Tailwind plugin for both dev and build.

Installation

bun add @manicjs/tailwind

Quick Start

1. Configure

// manic.config.ts
import {  } from 'manicjs/config';
import {  } from '@manicjs/tailwind';

export default ({
  : [()],
});

2. Add CSS

/* app/app.css */
@import "tailwindcss";

That's it! Tailwind is now integrated.

Customization

The plugin itself has no options. To customize Tailwind, use standard Tailwind CSS v4 mechanisms:

`@theme` Directive

Define design tokens directly in your CSS:

/* app/app.css */
@import "tailwindcss";

@theme {
  --color-primary: #3b82f6;
  --color-secondary: #64748b;
  --font-family-sans: "Inter", sans-serif;
}

`tailwind.config.ts`

For more advanced configuration, create a tailwind.config.ts at the project root. Tailwind v4 will pick it up automatically.

Dark Mode

Use Tailwind's selector-based dark mode with a @custom-variant:

/* app/app.css */
@import "tailwindcss";

@custom-variant dark (&:where(.dark, .dark *));

Then set the dark class on your root element:

import {  } from 'manicjs';

export default function () {
  const {  } = ();
  
  return (
    < ={ ? 'dark' : ''}>
      {/* Your app */}
    </>
  );
}

Using with Theme

The plugin works with Manic's theme system:

import {  } from 'manicjs';

function () {
  const {  } = ();
  
  return (
    < ={ ? 'bg-gray-900 text-white' : 'bg-white text-gray-900'}>
      Content
    </>
  );
}

CSS Functions

All Tailwind CSS v4 functions are supported:

/* theme() */
color: theme('colors.primary');

/* layers */
@layer utilities {
  .my-utility {
    /* custom styles */
  }
}

/* apply */
@apply flex gap-4;

JIT Mode

Always-on Just-In-Time compilation is enabled by default:

/* These classes are generated on-demand */
.flex { display: flex; }
.grid { display: grid; }
.shadow-lg { --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1); }

Tailwind CSS

Tailwind CSS

Installation

Quick Start

1. Configure

2. Add CSS

Customization

`@theme` Directive

`tailwind.config.ts`

Dark Mode

Using with Theme

CSS Functions

JIT Mode

See Also

On this page