refactor: expose Tailwind preset from package

package.json

@@ -15,7 +15,10 @@
     "*.css"
   ],
   "type": "module",
-  "exports": "./dist/mod.js",
+  "exports": {
+    ".": "./dist/mod.js",
+    "./tailwind-preset": "./dist/tailwind-preset.js"
+  },
   "files": [
     "dist/",
     "src/",

rollup.config.cjs

@@ -10,6 +10,7 @@ const outDir = "dist";
 module.exports = defineConfig({
   input: {
     mod: `${rootDir}/mod.ts`,
+    "tailwind-preset": `${rootDir}/tailwind-preset.ts`,
   },
   output: [
     {

src/tailwind-preset.ts

@@ -0,0 +1,42 @@
+import colors from "@evilmartians/harmony/tailwind";
+import type { Config } from "tailwindcss";
+import defaultTheme from "tailwindcss/defaultTheme";
+import plugin from "tailwindcss/plugin";
+
+import { darkTheme, lightTheme } from "./themes";
+
+export default {
+  future: {
+    hoverOnlyWhenSupported: true,
+    respectDefaultRingColorOpacity: true,
+    disableColorOpacityUtilitiesByDefault: true,
+    relativeContentPathsByDefault: true,
+  },
+  theme: {
+    colors,
+    extend: {
+      borderColor: ({ theme }) => ({
+        DEFAULT: theme("colors.ui.neutral-2") as string,
+      }),
+      colors: {
+        ui: Object.fromEntries(
+          Object.entries(lightTheme).map(([key, value]) => [
+            key.slice("--color-".length),
+            `oklch(var(${key}, ${value}) / <alpha-value>)`,
+          ]),
+        ),
+      },
+      transitionTimingFunction: {
+        DEFAULT: defaultTheme.transitionTimingFunction.out,
+      },
+    },
+  },
+  plugins: [
+    plugin(({ addComponents }) => {
+      addComponents({
+        ".theme-light": lightTheme,
+        ".theme-dark": darkTheme,
+      });
+    }),
+  ],
+} satisfies Partial<Config>;

tailwind.config.ts

@@ -1,43 +1,8 @@
-import colors from "@evilmartians/harmony/tailwind";
 import type { Config } from "tailwindcss";
-import defaultTheme from "tailwindcss/defaultTheme";
-import plugin from "tailwindcss/plugin";
 
-import { darkTheme, lightTheme } from "./themes";
+import tailwindPreset from "./src/tailwind-preset";
 
 export default {
   content: ["./src/**/*.{js,jsx,ts,tsx}"],
-  future: {
-    hoverOnlyWhenSupported: true,
-    respectDefaultRingColorOpacity: true,
-    disableColorOpacityUtilitiesByDefault: true,
-    relativeContentPathsByDefault: true,
-  },
-  theme: {
-    colors,
-    extend: {
-      borderColor: ({ theme }) => ({
-        DEFAULT: theme("colors.ui.neutral-2") as string,
-      }),
-      colors: {
-        ui: Object.fromEntries(
-          Object.entries(lightTheme).map(([key, value]) => [
-            key.slice("--color-".length),
-            `oklch(var(${key}, ${value}) / <alpha-value>)`,
-          ]),
-        ),
-      },
-      transitionTimingFunction: {
-        DEFAULT: defaultTheme.transitionTimingFunction.out,
-      },
-    },
-  },
-  plugins: [
-    plugin(({ addComponents }) => {
-      addComponents({
-        ".theme-light": lightTheme,
-        ".theme-dark": darkTheme,
-      });
-    }),
-  ],
+  presets: [tailwindPreset],
 } satisfies Config;