TAILWIN.386

A CSS-first Tailwind CSS 4 preset for building interfaces that feel like an IBM-compatible PC from the late 1980s: EGA colors, square geometry, hard shadows, character-cell rhythm, and chunky keyboard-friendly controls.

The project is inspired by BOOTSTRA.386, but is an independent implementation designed around Tailwind 4's theme variables and CSS imports.

Install

npm install tailwin.386 tailwindcss

Import Tailwind first, then TAILWIN.386:

@import "tailwindcss";
@import "tailwin.386";

Use generated Tailwind utilities and the opt-in primitives together:

<body class="tw386-screen grid min-h-screen place-items-center p-6">
  <main class="tw386-window w-full max-w-2xl">
    <header class="tw386-titlebar">System setup</header>
    <div class="tw386-content space-y-4">
      <p class="text-dos-yellow">640K ought to be enough.</p>
      <input class="tw386-field" aria-label="Command" value="C:\\&gt;" />
      <button class="tw386-button">Execute</button>
    </div>
  </main>
</body>

What is included

Theme tokens generate normal Tailwind classes:

• The complete 16-color palette: bg-dos-blue, text-dos-yellow, border-dos-gray, and their bright variants
• font-dos, backed by a configurable monospace font stack
• shadow-dos-sm, shadow-dos, and shadow-dos-lg
• rounded-dos, DOS-sized typography, and blink/flicker animations

Opt-in component primitives use the tw386- prefix:

• Screen, window, title bar, menu bar, content, and status bar
• Buttons, fields, selects, checkboxes, fieldsets, and legends
• Alerts, tables, progress bars, and a blinking block cursor
• Optional CRT scanlines with a reduced-motion fallback
• Amber and green phosphor variants
• A PrimeNG styled-mode preset for Angular applications

See demo/index.html for a complete example.

PrimeNG

Angular applications using PrimeNG can load the dedicated styled-mode preset:

import Tailwin386 from "tailwin.386/primeng";

providePrimeNG({
  ripple: false,
  theme: {
    preset: Tailwin386,
    options: {
      darkModeSelector: "none",
      cssLayer: { name: "primeng", order: "theme, base, primeng" }
    }
  }
});

Import tailwin.386/primeng/styles for the optional application shell and CRT helpers. See primeng/README.md for complete Angular setup instructions.

Customize

Override the public CSS properties at any scope:

.my-terminal {
  --tw386-font: "My Pixel Font";
  --tw386-bg: #001900;
  --tw386-fg: #33ff33;
  --tw386-accent: #aaffaa;
  --tw386-panel: #33ff33;
  --tw386-panel-ink: #001900;
  --tw386-shadow-color: #000;
}

Apply tw386-amber or tw386-green to the same element as tw386/tw386-screen for the built-in monochrome themes.

No font is bundled. This keeps the package small and avoids forcing a font license on applications. Set --tw386-font to a locally hosted bitmap font for the most authentic result.

JavaScript config compatibility

Tailwind 4 is CSS-first. If an existing project still loads a JavaScript config with @config, the compatibility preset is available:

import tailwin386 from "tailwin.386/preset";

export default {
  presets: [tailwin386],
};

Import tailwin.386 in CSS as well if you want the component primitives.

Development

npm install
npm run check

Open demo/index.html after npm run build to inspect the component gallery.

Accessibility

The primitives keep native semantics, visible keyboard focus, and selectable text. CRT flicker and cursor blinking stop under prefers-reduced-motion. The CRT effect is opt-in via tw386-crt.

License

MIT. BOOTSTRA.386 is a separate project distributed under the Apache-2.0 license.