@chronochrome/tailwind

ChronoChrome living accent as Tailwind tokens. Two lines, then bg-accent.

Core ChronoChrome is framework-free. This adapter is the fast path for Tailwind v3 and v4.

Install

npm install chronochrome @chronochrome/tailwind

Quick start — Tailwind v4

/* app.css */
@import "tailwindcss";
@import "@chronochrome/tailwind/theme.css";

import { start } from "@chronochrome/tailwind";

start({
  latitude: 57.63, // Yaroslavl
  timeZone: "Europe/Moscow",
});

<button class="bg-accent hover:bg-accent-hover text-black shadow-accent">Go</button>

start() writes ChronoChrome CSS vars onto :root and refreshes them once a minute. @theme inline maps those vars to utilities, so colors keep moving without a rebuild.

Quick start — Tailwind v3

// tailwind.config.js
import chronochrome from "@chronochrome/tailwind";

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./src/**/*.{html,js,ts,jsx,tsx,svelte,vue}"],
  plugins: [chronochrome],
};

import { start } from "@chronochrome/tailwind";

start({ latitude: 57.63, timeZone: "Europe/Moscow" });

Same utilities: bg-accent, text-accent-dim, ring-accent-ring, shadow-accent.

Utilities

| Class | Source | | --------------------------------------------- | ------------------------ | | bg-accent / text-accent / border-accent | --accent-primary | | *-accent-hover | --accent-primary-hover | | *-accent-dim | --accent-primary-dim | | *-accent-glow | glow rgb + alpha | | *-accent-ring | ring rgb + alpha | | shadow-accent | glow blur + glow color |

Brand accent ≠ status. Leave green / red for success / danger.

API

start(opts?): ChronoChromeHandle

Same options as createLightHueTicker from chronochrome, plus el to paint a node other than <html>.

const hue = start({
  latitude: 40.71,
  timeZone: "America/New_York",
  season: "auto",
  intervalMs: 60_000,
});

hue.snapshot.accent.hex;
hue.stop();

subscribe is a Svelte-style store contract if you want the snapshot in UI.

Sibling adapters

| Host | Package | | ----------- | ------------------------------------------------------------------------------------------------------ | | Core | chronochrome | | Svelte 5 | @chronochrome/svelte | | Bootstrap 5 | @chronochrome/bootstrap |

License

MIT · isamarin × BLMK