chore(tailwind): update tailwind config

astro.config.mjs

@@ -16,7 +16,9 @@ export default defineConfig({
     remarkPlugins: [remarkMath],
   },
   integrations: [
-    tailwind(),
+    tailwind({
+      applyBaseStyles: false,
+    }),
     sitemap(),
     react(),
     icon({

package.json

@@ -33,14 +33,13 @@
     "react-dom": "^18.3.1",
     "remark-math": "^6.0.0",
     "sharp": "^0.32.6",
-    "tailwind-merge": "^2.5.2",
-    "tailwindcss": "^3.4.10",
-    "tailwindcss-animate": "^1.0.7"
+    "tailwind-merge": "^2.5.3",
+    "tailwindcss": "^3.4.13"
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.3",
     "@mermaid-js/mermaid-cli": "^10.9.1",
-    "@tailwindcss/typography": "^0.5.14",
+    "@tailwindcss/typography": "^0.5.15",
     "@types/react": "^18.3.4",
     "@types/react-dom": "^18.3.0",
     "globals": "^15.9.0",
@@ -49,6 +48,7 @@
     "prettier": "^3.3.3",
     "prettier-plugin-astro": "^0.14.1",
     "prettier-plugin-tailwindcss": "^0.6.8",
+    "tailwindcss-animate": "^1.0.7",
     "typescript": "^5.5.4"
   },
   "lint-staged": {

src/styles/global.css

@@ -79,8 +79,6 @@
   }
   body {
     @apply bg-background text-foreground;
-    font-feature-settings:
-      "rlig" 1,
-      "calt" 1;
+    font-feature-settings: "rlig" 1, "calt" 1;
   }
 }

tailwind.config.mjs

@@ -0,0 +1,64 @@
+// tailwind.config.js
+import defaultTheme from "tailwindcss/defaultTheme";
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  darkMode: "selector",
+  content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
+  theme: {
+    extend: {
+      container: {
+        center: true,
+        padding: "1.5rem",
+        screens: {
+          "2xl": "1400px",
+        },
+      },
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      fontFamily: {
+        inter: ["Inter", ...defaultTheme.fontFamily.sans],
+        outfit: ["Outfit", ...defaultTheme.fontFamily.sans],
+      },
+    },
+  },
+  plugins: [require("tailwindcss-animate"), require("@tailwindcss/typography")],
+};