From 09f161665f74e1258b9d4aa24289ac37559e9bda Mon Sep 17 00:00:00 2001
From: emeraldjava <emeraldjava@protonmail.com>
Date: Thu, 6 Jun 2024 18:04:08 +0100
Subject: [PATCH] Add tailwind config.

---
 remark-collapse.d.ts |  1 +
 tailwind.config.cjs  | 75 ++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 76 insertions(+)
 create mode 100644 remark-collapse.d.ts
 create mode 100644 tailwind.config.cjs

diff --git a/remark-collapse.d.ts b/remark-collapse.d.ts
new file mode 100644
index 0000000..2e0f26c
--- /dev/null
+++ b/remark-collapse.d.ts
@@ -0,0 +1 @@
+declare module 'remark-collapse';
\ No newline at end of file
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
new file mode 100644
index 0000000..8e43860
--- /dev/null
+++ b/tailwind.config.cjs
@@ -0,0 +1,75 @@
+function withOpacity(variableName) {
+  return ({ opacityValue }) => {
+    if (opacityValue !== undefined) {
+      return `rgba(var(${variableName}), ${opacityValue})`;
+    }
+    return `rgb(var(${variableName}))`;
+  };
+}
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
+  theme: {
+    // Remove the following screen breakpoint or add other breakpoints
+    // if one breakpoint is not enough for you
+    screens: {
+      sm: "640px",
+    },
+
+    extend: {
+      textColor: {
+        skin: {
+          base: withOpacity("--color-text-base"),
+          accent: withOpacity("--color-accent"),
+          inverted: withOpacity("--color-fill"),
+        },
+      },
+      backgroundColor: {
+        skin: {
+          fill: withOpacity("--color-fill"),
+          accent: withOpacity("--color-accent"),
+          inverted: withOpacity("--color-text-base"),
+          card: withOpacity("--color-card"),
+          "card-muted": withOpacity("--color-card-muted"),
+        },
+      },
+      outlineColor: {
+        skin: {
+          fill: withOpacity("--color-accent"),
+        },
+      },
+      borderColor: {
+        skin: {
+          line: withOpacity("--color-border"),
+          fill: withOpacity("--color-text-base"),
+          accent: withOpacity("--color-accent"),
+        },
+      },
+      fill: {
+        skin: {
+          base: withOpacity("--color-text-base"),
+          accent: withOpacity("--color-accent"),
+        },
+        transparent: "transparent",
+      },
+      fontFamily: {
+        mono: ["IBM Plex Mono", "monospace"],
+      },
+
+      typography: {
+        DEFAULT: {
+          css: {
+            pre: {
+              color: false,
+            },
+            code: {
+              color: false,
+            },
+          },
+        },
+      },
+    },
+  },
+  plugins: [require("@tailwindcss/typography")],
+};