Add support for Tailwind v4 CSS theme override

README.md

@@ -32,6 +32,18 @@ npm install @evilmartians/harmony
 
 Harmony can work as drop-in replacement for the Tailwind color palette:
 
+### Tailwind v4
+
+Simply import `@evilmartians/harmony/tailwind.css`:
+
+```css
+/* app.css, or anywhere within Tailwind-aware context */
+@import 'tailwindcss';
+@import "@evilmartians/harmony/tailwind.css";
+```
+
+### Tailwind v3
+
 ```js
 // tailwind.config.js
 

package.json

@@ -12,6 +12,7 @@
       "require": "./dist/tailwind/index.mjs",
       "types": "./dist/tailwind/index.d.ts"
     },
+    "./tailwind.css": "./dist/tailwind/index.css",
     "./base": {
       "import": "./dist/base/index.mjs",
       "require": "./dist/base/index.js",

scripts/build.ts

@@ -4,6 +4,7 @@ import { buildTailwindPalette } from "./targets/tailwind.ts";
 import { buildBasicPalette } from "./targets/base.ts";
 import { ExportTarget, PaletteWithFallback } from "./types.ts";
 import { buildCssVars } from "./targets/cssVariables.ts";
+import { buildTailwindv4Palette } from "./targets/tailwind-v4.ts";
 
 //
 // Config
@@ -19,6 +20,10 @@ const EXPORT_TARGETS = [
     targetDir: "tailwind",
     target: buildTailwindPalette,
   },
+  {
+    targetDir: "tailwind",
+    target: buildTailwindv4Palette,
+  },
   {
     targetDir: "css",
     target: buildCssVars,

scripts/targets/__snapshots__/tailwind-v4_test.ts.snap

@@ -0,0 +1,17 @@
+export const snapshot = {};
+
+snapshot[`Tailwind v4 palette theme override 1`] = `
+"
+@theme {
+  --color-*: initial;
+
+  --color-white: #fff;
+  --color-black: #000;
+
+  --color-red-100:oklch(0.966797 0.0171875 20);
+  --color-red-500:oklch(0.742188 0.151562 20);
+
+  --color-orange-100:oklch(0.966797 0.0171875 43.3333);
+
+}"
+`;

scripts/targets/tailwind-v4.ts

@@ -0,0 +1,29 @@
+import { path } from "../deps.ts";
+import type { ExportTarget } from "../types.ts";
+
+const css = String.raw;
+
+export const buildTailwindv4Palette: ExportTarget = async (
+  { palette, targetDir },
+) => {
+  const vars: string[] = [];
+
+  for (const [color, shades] of Object.entries(palette)) {
+    for (const [shade, value] of Object.entries(shades)) {
+      vars.push(`--color-${color}-${shade}:${value.oklch};`);
+    }
+    vars.push("");
+  }
+
+  const template = css`
+@theme {
+  --color-*: initial;
+
+  --color-white: #fff;
+  --color-black: #000;
+
+  ${vars.join("\n  ")}
+}`;
+
+  await Deno.writeTextFile(path.join(targetDir, "index.css"), template);
+};

scripts/targets/tailwind-v4_test.ts

@@ -0,0 +1,9 @@
+import { buildTailwindv4Palette } from "./tailwind-v4.ts";
+import { testExportTarget } from "./testUtils.ts";
+
+Deno.test("Tailwind v4 palette theme override", async (t) => {
+  await testExportTarget(t, buildTailwindv4Palette, [
+    "index.css",
+  ]);
+});
+