Merge pull request #21 from hayato-osh/feature/blog-style

feat: 記事のスタイルを調整

package.json

@@ -25,6 +25,7 @@
 	},
 	"devDependencies": {
 		"@biomejs/biome": "1.6.4",
+		"@tailwindcss/typography": "^0.5.12",
 		"@textlint/textlint-plugin-markdown": "^14.0.4",
 		"husky": "^9.0.11",
 		"npm-run-all2": "^6.1.2",

src/components/Post.astro

@@ -7,8 +7,8 @@ interface Props {
 
 const { post } = Astro.props;
 ---
-<article>
-  <h1 class="text-lg font-bold">{post.data.title}</h1>
+<article class="prose dark:prose-invert prose-h1:text-2xl prose-h2:text-xl prose-h3:text-lg">
+  <h1>{post.data.title}</h1>
   <div>
     <span>作成日：{post.data.createdAt}</span>
     <span>更新日：{post.data.updatedAt}</span>

src/content/posts/hello-blog.md

@@ -15,6 +15,14 @@ updatedAt: 2024-04-10
 - [リンク](https://astro.build)
 - などなど
 
+### h3 でこんにちは
+
+#### h4 でこんにちは
+
+##### h5 でこんにちは
+
+###### h6 でこんにちは
+
 ```js
 console.log('Hello, Blog.');
 ```

tailwind.config.mjs

@@ -2,8 +2,5 @@
 export default {
 	darkMode: "class",
 	content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
-	theme: {
-		extend: {},
-	},
-	plugins: [],
+	plugins: [require("@tailwindcss/typography")],
 };