[W-16] Centralize tailwind config, use inter (#26)

* use inter

* update docs logo svg

* centralize tailwind config

* missing files

packages/cli/cli-web/package.json

@@ -9,6 +9,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@captain/tailwind-config": "*",
+    "@headlessui/react": "^1.7.8",
     "@heroicons/react": "^2.0.12",
     "@tanstack/react-query": "^4.7.2",
     "@trpc/client": "10.0.0-proxy-beta.25",

packages/cli/cli-web/postcss.config.cjs

@@ -1,6 +1 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}
+module.exports = require("@captain/tailwind-config/postcss");

packages/cli/cli-web/src/index.css

@@ -3,6 +3,9 @@
 @tailwind utilities;
 
 :root {
+  font-family: "Inter", -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
+    "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+
   font-size: 16px;
   line-height: 24px;
   font-weight: 400;

packages/cli/cli-web/tailwind.config.cjs

@@ -1,8 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
+  presets: [require("@captain/tailwind-config")],
   content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
-  theme: {
-    extend: {},
-  },
   plugins: [require("@tailwindcss/forms")],
 };

packages/config/tailwind/index.js

@@ -0,0 +1,11 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./src/**/*.{ts,tsx}", "./src/_app.tsx"],
+  theme: {
+    fontFamily: {
+      display: ["Inter"],
+    },
+    extend: {},
+  },
+  plugins: [],
+};

packages/config/tailwind/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@captain/tailwind-config",
+  "version": "0.1.0",
+  "main": "index.js",
+  "license": "MIT",
+  "files": [
+    "index.js",
+    "postcss.js"
+  ],
+  "devDependencies": {
+    "autoprefixer": "^10.4.13",
+    "postcss": "^8.4.21",
+    "tailwindcss": "^3.2.4"
+  }
+}

packages/config/tailwind/postcss.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

packages/hosted/www/package.json

@@ -13,6 +13,7 @@
   "dependencies": {
     "@captain/auth": "*",
     "@captain/db": "*",
+    "@captain/tailwind-config": "*",
     "@captain/trpc": "*",
     "@formkit/auto-animate": "^1.0.0-beta.3",
     "@headlessui/react": "^1.7.4",

packages/hosted/www/postcss.config.cjs

@@ -1,6 +1 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-};
+module.exports = require("@captain/tailwind-config/postcss");

packages/hosted/www/tailwind.config.cjs

@@ -1,8 +1,5 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ["./src/**/*.{js,ts,jsx,tsx}"],
-  theme: {
-    extend: {},
-  },
+  presets: [require("@captain/tailwind-config")],
   plugins: [require("@tailwindcss/forms")],
 };

packages/marketing/webhookthing-marketing/package.json

@@ -9,6 +9,7 @@
     "start": "next start"
   },
   "dependencies": {
+    "@captain/tailwind-config": "*",
     "@tanstack/react-query": "^4.20.0",
     "@trpc/client": "^10.8.1",
     "@trpc/next": "^10.8.1",

packages/marketing/webhookthing-marketing/postcss.config.cjs

@@ -1,6 +1 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-};
+module.exports = require("@captain/tailwind-config/postcss");

packages/marketing/webhookthing-marketing/src/pages/index.tsx

@@ -57,8 +57,9 @@ const Home: NextPage = () => {
 "
       >
         <div className="container flex flex-col items-center justify-center gap-12 px-4 py-16 ">
-          <h1 className="text-[3.5rem] font-extrabold tracking-tight text-white sm:text-[5rem]">
-            webhook<span className="text-indigo-600">thing</span>
+          <h1 className="text-[3.5rem] font-medium tracking-tighter text-white sm:text-[5rem]">
+            webhook
+            <span className="font-extrabold text-indigo-600 ">thing</span>
           </h1>
           <div className="flex w-96 max-w-sm flex-col gap-4 rounded-xl bg-white/10 p-6 text-white">
             {!submitted ? (

packages/marketing/webhookthing-marketing/src/styles/globals.css

@@ -1,3 +1,11 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+html,
+body {
+  font-family: "Inter", -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
+    "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}

packages/marketing/webhookthing-marketing/tailwind.config.cjs

@@ -1,8 +1,4 @@
-/** @type {import('tailwindcss').Config} */
+/** @type {import("tailwindcss").Config} */
 module.exports = {
-  content: ["./src/**/*.{js,ts,jsx,tsx}"],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
+  presets: [require("@captain/tailwind-config")],
 };