perf!: monorepo setup + fully static + webp images

BREAKING CHANGE: minimum supported Node.js >= 22.0.0 and pnpm >= 9.5.0

packages/config-tailwind/.eslintrc.json

@@ -0,0 +1,14 @@
+{
+  "root": true,
+  "extends": ["@repo/eslint-config"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx"],
+      "plugins": ["@typescript-eslint"],
+      "parser": "@typescript-eslint/parser",
+      "parserOptions": {
+        "project": true
+      }
+    }
+  ]
+}

packages/config-tailwind/classNames.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export const classNames = (...inputs: ClassValue[]): string => {
+  return twMerge(clsx(inputs))
+}

packages/config-tailwind/index.d.ts

@@ -0,0 +1,3 @@
+import type { Config } from "tailwindcss"
+
+export default Config

packages/config-tailwind/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@repo/config-tailwind",
+  "version": "3.3.2",
+  "private": true,
+  "type": "module",
+  "main": "./tailwind.config.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./tailwind.config.js",
+      "require": "./tailwind.config.js",
+      "default": "./tailwind.config.js"
+    },
+    "./classNames": "./classNames.ts",
+    "./styles.css": "./styles.css"
+  },
+  "dependencies": {
+    "@fontsource/montserrat": "catalog:",
+    "clsx": "catalog:",
+    "tailwind-merge": "catalog:"
+  },
+  "devDependencies": {
+    "@repo/eslint-config": "workspace:*",
+    "@repo/config-typescript": "workspace:*",
+    "@tailwindcss/typography": "catalog:",
+    "eslint": "catalog:",
+    "postcss": "catalog:",
+    "tailwindcss": "catalog:"
+  }
+}

packages/config-tailwind/postcss.config.js

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+}
+
+export default config

packages/config-tailwind/styles.css

@@ -0,0 +1,162 @@
+@import "@fontsource/montserrat/400.css";
+@import "@fontsource/montserrat/500.css";
+@import "@fontsource/montserrat/600.css";
+@import "@fontsource/montserrat/700.css";
+@import "@fontsource/montserrat/800.css";
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  b,
+  strong {
+    @apply font-semibold;
+  }
+
+  i,
+  em {
+    @apply italic;
+  }
+
+  u {
+    @apply underline;
+  }
+
+  s {
+    @apply line-through;
+  }
+
+  abbr[title] {
+    @apply underline decoration-dotted underline-offset-2;
+  }
+
+  q,
+  blockquote {
+    @apply italic tracking-wider;
+  }
+  blockquote {
+    @apply border-gray border-l-4 pl-3 italic;
+  }
+
+  kbd {
+    @apply bg-gray rounded-md px-2 dark:text-black;
+  }
+
+  mark {
+    @apply bg-yellow rounded-md px-2;
+  }
+
+  ol {
+    @apply list-inside list-decimal;
+  }
+
+  ul {
+    @apply list-inside list-disc;
+  }
+
+  dfn {
+    @apply font-semibold italic;
+    cursor: help;
+  }
+}
+
+body {
+  @apply bg-background dark:bg-background-dark font-sans text-black dark:text-white;
+}
+
+@keyframes ripple {
+  to {
+    opacity: 0;
+    transform: scale(2);
+  }
+}
+
+.break-wrap-words {
+  word-wrap: break-word;
+  word-break: break-word;
+}
+
+.text-base {
+  @apply leading-8;
+}
+
+.prose {
+  @apply dark:text-gray !max-w-5xl scroll-smooth text-black;
+}
+
+.prose p {
+  @apply text-justify;
+}
+
+.prose ul,
+.prose ol {
+  @apply list-outside;
+}
+
+.prose [id]::before {
+  content: "";
+  display: block;
+  height: 90px;
+  margin-top: -90px;
+  visibility: hidden;
+}
+
+.prose a {
+  @apply text-primary dark:text-primary-dark !font-semibold;
+}
+
+.prose strong {
+  @apply dark:text-gray text-black;
+}
+
+.prose h2,
+.prose h3,
+.prose h4,
+.prose h5,
+.prose h6 {
+  @apply mt-1;
+}
+
+.prose code {
+  color: #ce9178;
+}
+.prose :where(code):not(:where([class~="not-prose"] *))::before,
+.prose :where(code):not(:where([class~="not-prose"] *))::after {
+  content: "";
+}
+.shiki {
+  white-space: pre-wrap !important;
+}
+html.dark .shiki,
+html.dark .shiki span {
+  color: var(--shiki-dark) !important;
+  background-color: var(--shiki-dark-bg) !important;
+  font-style: var(--shiki-dark-font-style) !important;
+  font-weight: var(--shiki-dark-font-weight) !important;
+  text-decoration: var(--shiki-dark-text-decoration) !important;
+}
+
+code {
+  counter-reset: step;
+  counter-increment: step 0;
+}
+code .line::before {
+  content: counter(step);
+  counter-increment: step;
+  margin-right: 1rem;
+  text-align: right;
+  color: rgba(133, 133, 133, 0.8);
+  word-wrap: normal;
+  word-break: normal;
+}
+
+code .line:last-child {
+  display: none;
+}
+
+.katex .base {
+  display: inline !important;
+  white-space: normal !important;
+  width: 100% !important;
+}

packages/config-tailwind/tailwind.config.js

@@ -0,0 +1,57 @@
+import typographyPlugin from "@tailwindcss/typography"
+import { fontFamily } from "tailwindcss/defaultTheme"
+
+/** @type {Omit<import('tailwindcss').Config, "content">} */
+const config = {
+  darkMode: "class",
+  theme: {
+    colors: {
+      primary: {
+        DEFAULT: "#0056b3",
+        dark: "#00aeff",
+      },
+      background: {
+        DEFAULT: "#fff",
+        dark: "#181818",
+      },
+      white: "#fff",
+      black: "#000",
+      gray: "#d1d5db",
+      "gray-darker": {
+        DEFAULT: "#4b5563",
+        dark: "#9ca3af",
+      },
+      yellow: "#fef08a",
+      transparent: "transparent",
+      inherit: "inherit",
+      current: "currentColor",
+    },
+    boxShadow: {
+      dark: "0px 0px 2px 2px rgba(0, 0, 0, 0.25)",
+      light: "0px 0px 2px 2px rgba(0, 0, 0, 0.10)",
+      darkFlag: "0px 1px 10px hsla(0, 0%, 100%, 0.2)",
+      lightFlag: "0px 1px 10px rgba(0, 0, 0, 0.25)",
+    },
+    fontFamily: {
+      sans: ["'Montserrat'", ...fontFamily.sans],
+    },
+    extend: {
+      typography: {
+        DEFAULT: {
+          css: {
+            a: {
+              textDecoration: "none",
+              "&:hover": {
+                textDecoration: "underline",
+                fontWeight: 400,
+              },
+            },
+          },
+        },
+      },
+    },
+  },
+  plugins: [typographyPlugin],
+}
+
+export default config

packages/config-tailwind/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "@repo/config-typescript/tsconfig.json",
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+
+    "noEmit": true
+  }
+}