拆除tailwind 优化排版

（全局引入tailwind完全是疏忽导致的（）

Author: LingLambda

astro.config.mjs

@@ -1,8 +1,6 @@
 // @ts-check
 import { defineConfig, envField } from "astro/config";
 
-import tailwindcss from "@tailwindcss/vite";
-
 // https://astro.build/config
 export default defineConfig({
   site: "https://linglambda.github.io",
@@ -11,18 +9,16 @@ export default defineConfig({
   //悬停预加载
   prefetch: true,
 
-  vite: {
-    plugins: [tailwindcss()],
-  },
+  vite: {},
   env: {
     schema: {
       PATH_MODULE: envField.enum({
-        values:['no_change','pinyin','pinyin_with_tones'],
-        default: 'pinyin',
+        values: ["no_change", "pinyin", "pinyin_with_tones"],
+        default: "pinyin",
         optional: false,
         context: "server",
         access: "secret",
-      }), 
+      }),
     },
   },
 });

package.json

@@ -10,13 +10,9 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@tailwindcss/vite": "^4.1.1",
     "astro": "^5.5.4",
     "astro-seo": "^0.8.4",
-    "pinyin-pro": "^3.26.0",
-    "tailwindcss": "^4.1.1"
+    "pinyin-pro": "^3.26.0"
   },
-  "devDependencies": {
-    "@tailwindcss/typography": "^0.5.16"
-  }
+  "devDependencies": {}
 }

src/components/Prose.astro

@@ -1,13 +1,7 @@
 ---
-// markdown样式 使用Tailwind
+import "../styles/markdown.css";
 ---
 
-<div
-  class="prose dark:prose-invert
-  prose-h1:font-bold prose-h1:text-xl
-  prose-a:text-blue-600 prose-p:text-justify prose-img:rounded-xl
-  prose-headings:underline"
->
+<div class="prose">
   <slot />
 </div>
-<!-- 用法： prose-[element]:class-to-apply 给所有的 <h1> 标签添加 font-bold 的 Tailwind 类。 -->

src/layouts/BaseLayout.astro

@@ -102,7 +102,10 @@ const { description, keywords ,selected} = Astro.props;
   }
 
   main {
+    max-width: 65ch;
     flex-grow: 1; /* 使 main 占据剩余空间 */
+    font-size: 1rem;
+    line-height: 1.75;
   }
 
   footer {

src/layouts/BlogLayout.astro

@@ -1,18 +1,17 @@
 ---
 import BaseLayout from "./BaseLayout.astro";
-
-
 ---
+
 <BaseLayout>
   <section>
     <slot />
   </section>
 </BaseLayout>
 
 <style>
-
-section {
-    padding: 0 8%;
+  section {
+    max-width: 65ch;
+    padding: 0;
     /* padding:8% */
   }
-</style>
+</style>

src/layouts/MainLayout.astro

@@ -1,11 +1,10 @@
 ---
 import BaseLayout from "./BaseLayout.astro";
-
-
 ---
+
 <BaseLayout>
     <slot />
 </BaseLayout>
 
 <style>
-</style>
+</style>

src/posts/about.md

@@ -6,8 +6,8 @@ title: about
 
 编程爱好者，支持开源与自由软件运动，最喜欢的语言是rust ~~但不太擅长~~，最擅长的语言是Java，还会写一点kt，ts，c，lua，能够写一点前端。为了做更多好玩的东西而卖力的学习着。想当高手，梦想着能做出有创造型的开源项目。
 
-兴趣驱动型人类，对一个东西有兴趣会拼命地去了解，折腾 **过** 单片机，树莓派，X86硬件DIY，客制化键盘，服务器，软路由，ArchLinux，YOLO，剪辑，游戏开发，游戏模组，QQ机器人…… 最早是因为nonebot入坑开源的。
+兴趣驱动型，对一个东西有兴趣会拼命地去了解，折腾 **过** 单片机，树莓派，X86硬件DIY，客制化键盘，服务器，软路由，ArchLinux，YOLO，剪辑，游戏开发，游戏模组，QQ机器人…… 最早是因为nonebot入坑开源的。
 
-比较开放和包容的一个人类。
+比较开放和包容的一只Tac。
 
 <!-- 这里没有夹带私货 -->

src/styles/global.css

@@ -1,2 +1,46 @@
-@import "tailwindcss";
-@plugin '@tailwindcss/typography';
+*,
+::after,
+::before,
+::backdrop {
+  box-sizing: border-box;
+  border: 0 solid;
+  margin: 0;
+  padding: 0;
+}
+html {
+  color: #374151;
+  font-family: var(
+    --default-font-family,
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    "Helvetica Neue",
+    Arial,
+    "Noto Sans",
+    sans-serif,
+    "Apple Color Emoji",
+    "Segoe UI Emoji",
+    "Segoe UI Symbol",
+    "Noto Color Emoji"
+  );
+}
+
+img,
+video {
+  max-width: 100%;
+  height: auto;
+  margin-top: 2em;
+  margin-bottom: 2em;
+  display: block;
+}
+
+p {
+  text-align: justify;
+}
+
+a {
+  color: unset;
+}

src/styles/markdown.css

@@ -0,0 +1,29 @@
+.prose {
+  line-height: 1.75;
+}
+
+.prose h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin-bottom: 1em;
+}
+
+.prose h2 {
+  line-height: 1.33333;
+}
+
+.prose p {
+  margin-top: 1.25em;
+  margin-bottom: 1.25em;
+}
+
+.prose p:first-of-type {
+  margin-top: 0;
+}
+
+.prose p:last-of-type {
+  margin-bottom: 0;
+}