From 66775c504e8799c3530ee2cebb2c389017eee7eb Mon Sep 17 00:00:00 2001
From: Bu Kinoshita <6929565+bukinoshita@users.noreply.github.com>
Date: Thu, 22 Sep 2022 17:15:06 -0300
Subject: [PATCH] feat(tailwind-config): Add Tailwind config (#32)

---
 packages/tailwind-config/package.json       |  12 +++
 packages/tailwind-config/tailwind.config.js | 102 ++++++++++++++++++++
 2 files changed, 114 insertions(+)
 create mode 100644 packages/tailwind-config/package.json
 create mode 100644 packages/tailwind-config/tailwind.config.js

diff --git a/packages/tailwind-config/package.json b/packages/tailwind-config/package.json
new file mode 100644
index 000000000..bf08d4ab7
--- /dev/null
+++ b/packages/tailwind-config/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "tailwind-config",
+  "version": "0.0.0",
+  "private": true,
+  "main": "index.js",
+  "dependencies": {
+    "@radix-ui/colors": "0.1.8"
+  },
+  "devDependencies": {
+    "tailwindcss": "3.1.8"
+  }
+}
diff --git a/packages/tailwind-config/tailwind.config.js b/packages/tailwind-config/tailwind.config.js
new file mode 100644
index 000000000..ae5782d8b
--- /dev/null
+++ b/packages/tailwind-config/tailwind.config.js
@@ -0,0 +1,102 @@
+const colors = require('@radix-ui/colors');
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    // app content
+    `src/**/*.{js,ts,jsx,tsx}`,
+    // include packages if not transpiling
+    '../../packages/**/*.{js,ts,jsx,tsx}',
+    '../../apps/**/*.{js,ts,jsx,tsx}',
+  ],
+  theme: {
+    extend: {
+      colors: {
+        gray: {
+          1: colors.mauveDark.mauve1,
+          2: colors.mauveDark.mauve2,
+          3: colors.mauveDark.mauve3,
+          4: colors.mauveDark.mauve4,
+          5: colors.mauveDark.mauve5,
+          6: colors.mauveDark.mauve6,
+          7: colors.mauveDark.mauve7,
+          8: colors.mauveDark.mauve8,
+          9: colors.mauveDark.mauve9,
+          10: colors.mauveDark.mauve10,
+          11: colors.mauveDark.mauve11,
+          12: colors.mauveDark.mauve12,
+        },
+        green: {
+          1: colors.greenDark.green1,
+          2: colors.greenDark.green2,
+          3: colors.greenDark.green3,
+          4: colors.greenDark.green4,
+          5: colors.greenDark.green5,
+          6: colors.greenDark.green6,
+          7: colors.greenDark.green7,
+          8: colors.greenDark.green8,
+          9: colors.greenDark.green9,
+          10: colors.greenDark.green10,
+          11: colors.greenDark.green11,
+          12: colors.greenDark.green12,
+        },
+        red: {
+          1: colors.redDark.red1,
+          2: colors.redDark.red2,
+          3: colors.redDark.red3,
+          4: colors.redDark.red4,
+          5: colors.redDark.red5,
+          6: colors.redDark.red6,
+          7: colors.redDark.red7,
+          8: colors.redDark.red8,
+          9: colors.redDark.red9,
+          10: colors.redDark.red10,
+          11: colors.redDark.red11,
+          12: colors.redDark.red12,
+        },
+        yellow: {
+          1: colors.amberDark.amber1,
+          2: colors.amberDark.amber2,
+          3: colors.amberDark.amber3,
+          4: colors.amberDark.amber4,
+          5: colors.amberDark.amber5,
+          6: colors.amberDark.amber6,
+          7: colors.amberDark.amber7,
+          8: colors.amberDark.amber8,
+          9: colors.amberDark.amber9,
+          10: colors.amberDark.amber10,
+          11: colors.amberDark.amber11,
+          12: colors.amberDark.amber12,
+        },
+        blue: {
+          1: colors.blueDark.blue1,
+          2: colors.blueDark.blue2,
+          3: colors.blueDark.blue3,
+          4: colors.blueDark.blue4,
+          5: colors.blueDark.blue5,
+          6: colors.blueDark.blue6,
+          7: colors.blueDark.blue7,
+          8: colors.blueDark.blue8,
+          9: colors.blueDark.blue9,
+          10: colors.blueDark.blue10,
+          11: colors.blueDark.blue11,
+          12: colors.blueDark.blue12,
+        },
+      },
+      fontFamily: {
+        sans: [
+          'Inter',
+          '-apple-system',
+          'BlinkMacSystemFont',
+          'Segoe UI',
+          'Helvetica',
+          'Arial',
+          'sans-serif',
+          'Apple Color Emoji',
+          'Segoe UI Emoji',
+        ],
+      },
+    },
+  },
+  plugins: [],
+};