diff --git a/README.md b/README.md index c315514..6e35480 100644 --- a/README.md +++ b/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 diff --git a/package.json b/package.json index 4775070..da7b592 100644 --- a/package.json +++ b/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", diff --git a/scripts/build.ts b/scripts/build.ts index 8417c67..e287c62 100644 --- a/scripts/build.ts +++ b/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, diff --git a/scripts/targets/__snapshots__/tailwind-v4_test.ts.snap b/scripts/targets/__snapshots__/tailwind-v4_test.ts.snap new file mode 100644 index 0000000..92b6d75 --- /dev/null +++ b/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); + +}" +`; diff --git a/scripts/targets/tailwind-v4.ts b/scripts/targets/tailwind-v4.ts new file mode 100644 index 0000000..7ba2619 --- /dev/null +++ b/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); +}; diff --git a/scripts/targets/tailwind-v4_test.ts b/scripts/targets/tailwind-v4_test.ts new file mode 100644 index 0000000..d76f918 --- /dev/null +++ b/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", + ]); +}); +