fix(tailwind): dark mode and typography style

StarHeartHunt · Feb 6, 2025 · 2524f96 · 2524f96
1 parent 0a2ae30
commit 2524f96
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 6 deletions.
diff --git a/astro.config.ts b/astro.config.ts
@@ -2,6 +2,7 @@ import { rehypeHeadingIds } from "@astrojs/markdown-remark";
 import mdx from "@astrojs/mdx";
 import preact from "@astrojs/preact";
 import sitemap from "@astrojs/sitemap";
+import tailwindcss from "@tailwindcss/vite";
 import compress from "astro-compress";
 import { defineConfig } from "astro/config";
 import { dirname, resolve } from "path";
@@ -12,7 +13,7 @@ import remarkToc from "remark-toc";
 import Icons from "unplugin-icons/vite";
 import { fileURLToPath } from "url";
 import { remarkReadingTime } from "./src/utils/frontmatter";
-import tailwindcss from "@tailwindcss/vite";
+
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
 
@@ -111,4 +112,4 @@ export default defineConfig({
     }),
     preact(),
   ],
-});
+});
diff --git a/package.json b/package.json
@@ -8,9 +8,7 @@
     "build": "astro build",
     "start": "astro dev",
     "format": "pnpm run format:code",
-    "format:ci": "pnpm run format:imports && pnpm run format:code",
     "format:code": "prettier --write . --cache --plugin-search-dir=.",
-    "format:imports": "organize-imports-cli ./tsconfig.json",
     "format:package": "pnpx sort-package-json",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
@@ -33,7 +31,6 @@
     "eslint-config-prettier": "^10.0.1",
     "eslint-plugin-astro": "^1.3.1",
     "mdast-util-to-string": "^4.0.0",
-    "organize-imports-cli": "^0.10.0",
     "preact": "^10.25.4",
     "prettier": "^3.4.2",
     "prettier-plugin-astro": "^0.14.1",

diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
@@ -13,7 +13,7 @@ const { title, description } = Astro.props;
 
   <body class="antialiased bg-white dark:bg-gray-900">
     <Header />
-    <main class="px-6 md:px-8 xl:px-12">
+    <main class="px-6 md:px-8 xl:px-12 py-10">
       <slot />
       <Footer />
     </main>

diff --git a/src/styles/global.css b/src/styles/global.css
@@ -1,4 +1,31 @@
 @import "tailwindcss";
+@plugin "@tailwindcss/typography";
+
+@custom-variant dark (&:where(.dark, .dark *));
+@utility prose {
+  h2,
+  h3,
+  h4 {
+    scroll-margin-top: var(--scroll-mt);
+  }
+
+  a {
+    text-decoration: none;
+  }
+
+  a:hover {
+    color: var(--tw-prose-invert-links);
+  }
+
+  code::before {
+    content: "";
+  }
+
+  code::after {
+    content: "";
+  }
+}
+
 @import "./fonts.css";
 @import "./code.css";