From eb63b57ad49e48fcd01c4ec4b6b18a4238e419d1 Mon Sep 17 00:00:00 2001
From: Niccolo Borgioli <hi@nicco.io>
Date: Wed, 11 Oct 2023 22:13:20 +0200
Subject: [PATCH] add tailwind theme

---
 pages/_meta.json                |  3 +-
 pages/web_dev/tailwind_theme.md | 82 +++++++++++++++++++++++++++++++++
 2 files changed, 84 insertions(+), 1 deletion(-)
 create mode 100644 pages/web_dev/tailwind_theme.md

diff --git a/pages/_meta.json b/pages/_meta.json
index 5816701..28763d5 100644
--- a/pages/_meta.json
+++ b/pages/_meta.json
@@ -3,5 +3,6 @@
   "cli": "CLI",
   "git": "Git",
   "dev_ops": "Dev Ops",
-  "latex": "LaTeX"
+  "latex": "LaTeX",
+  "web_dev": "Web Development"
 }
diff --git a/pages/web_dev/tailwind_theme.md b/pages/web_dev/tailwind_theme.md
new file mode 100644
index 0000000..b031732
--- /dev/null
+++ b/pages/web_dev/tailwind_theme.md
@@ -0,0 +1,82 @@
+---
+tags:
+  - tailwind
+  - theme
+  - css variables
+  - dark mode
+---
+
+# Tailwind themes with CSS Variables
+
+There are many tailwind theme plugins, tried few and landed on`tailwindcss-themer`.
+
+## Setup
+
+Two files are required:
+
+1. `pnpm i -D tailwindcss-themer`
+1. `tailwind.config.js`
+1. `app.postcss`
+
+> Technically, we don't need to use CSS variables, but I like to, as I can export them automatically from Figma, or whatever design tool. Without CSS Variables, you could just define the colors in `tailwind.config.js` without touching css files.
+
+```js
+// tailwind.config.js
+
+const themer = require('tailwindcss-themer')
+
+/** @type {import('tailwindcss').Config}*/
+const config = {
+  theme: {
+    // ...
+  },
+
+  plugins: [
+    themer({
+      defaultTheme: {
+        extend: {
+          colors: {
+            primary: 'var(--colors-cyan-500)',
+            secondary: 'var(--colors-yellow-500)',
+            surface: 'var(--colors-gray-100)',
+            text: 'var(--colors-gray-900)',
+          },
+        },
+      },
+      themes: [
+        {
+          name: 'darker',
+          mediaQuery: '@media (prefers-color-scheme: dark)',
+          extend: {
+            colors: {
+              primary: 'var(--colors-cyan-700)',
+              secondary: 'var(--colors-yellow-500)',
+              surface: 'var(--colors-gray-900)',
+              text: 'var(--colors-gray-100)',
+            },
+          },
+        },
+      ],
+    }),
+  ],
+}
+
+module.exports = config
+```
+
+```css
+/* app.postcss */
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  /* colors */
+  --colors-cyan-500: rgb(164, 189, 245);
+  --colors-cyan-700: #0d398c;
+  --colors-gray-100: rgb(255, 255, 255);
+  --colors-gray-900: rgb(1, 1, 1);
+  --colors-yellow-500: rgb(233, 246, 82);
+}
+```