updated styles

package.json

@@ -1,7 +1,7 @@
 {
     "name": "coworking-guide",
     "type": "module",
-    "version": "2.0.0",
+    "version": "2.0.1",
     "scripts": {
         "dev": "astro dev --open",
         "start": "astro dev",

src/layouts/GuideLayout.astro

@@ -33,70 +33,6 @@ const { frontmatter, headings } = Astro.props;
 			</div>
 		</div>
 	</div>
-	<style is:global>
-		blockquote {
-			@apply my-4 border-l-4 border-gray-500 pl-4;
-		}
-
-		a {
-			@apply inline-block text-blue-400 hover:underline;
-		}
-
-		h1 {
-			@apply mb-2 text-4xl font-bold;
-		}
-
-		h2 {
-			@apply mb-2 mt-5 scroll-mt-[calc(20px+var(--header-height))] text-3xl font-bold;
-		}
-
-		h3 {
-			@apply mb-2 mt-5 scroll-mt-[calc(17px+var(--header-height))] text-2xl font-bold;
-		}
-
-		h4 {
-			@apply mb-2 mt-5 scroll-mt-[calc(14px+var(--header-height))] text-xl font-bold;
-		}
-
-		p {
-			@apply mb-2 mt-2 font-[system-ui] leading-6;
-		}
-
-		hr {
-			@apply my-10 border-gray-500;
-		}
-
-		ul {
-			@apply list-outside list-disc leading-7;
-		}
-
-		code {
-			@apply rounded-md bg-[#323232] px-1 py-1 font-[monospace,courier-new] text-sm;
-		}
-
-		ul,
-		ol {
-			@apply list-outside  leading-7;
-		}
-
-		ul {
-			@apply list-disc;
-		}
-
-		ul ul,
-		ol ul {
-			@apply mb-2 ml-5 list-[circle];
-		}
-
-		ul li,
-		ol li {
-			@apply mb-1 ml-5;
-		}
-
-		ol {
-			@apply ml-5 list-outside list-decimal leading-7;
-		}
-	</style>
 	<script is:inline>
 		// make all <a> attributes have target="_blank" except for Table of Contents
 		document.querySelectorAll("a:not(.no-target-blank)").forEach((el) => {

src/layouts/Layout.astro

@@ -117,65 +117,6 @@ const { title, description } = Astro.props;
 			a.preview {
 				text-decoration: none;
 			}
-
-			blockquote {
-				@apply my-4 border-l-4 border-gray-500 pl-4;
-			}
-
-			a {
-				@apply inline-block text-blue-400 hover:underline;
-			}
-
-			h1 {
-				@apply mb-2 text-4xl font-bold;
-			}
-
-			h2 {
-				@apply mb-2 mt-5 scroll-mt-[calc(20px+var(--header-height))] text-3xl font-bold;
-			}
-
-			h3 {
-				@apply mb-2 mt-5 scroll-mt-[calc(17px+var(--header-height))] text-2xl font-bold;
-			}
-
-			h4 {
-				@apply mb-2 mt-5 scroll-mt-[calc(14px+var(--header-height))] text-xl font-bold;
-			}
-
-			p {
-				@apply mb-2 mt-2 font-[system-ui] leading-6;
-			}
-
-			hr {
-				@apply my-10 border-gray-500;
-			}
-
-			ul {
-				@apply list-outside list-disc leading-7;
-			}
-
-			ul,
-			ol {
-				@apply list-outside  leading-7;
-			}
-
-			ul {
-				@apply list-disc;
-			}
-
-			ul ul,
-			ol ul {
-				@apply mb-2 ml-5 list-[circle];
-			}
-
-			ul li,
-			ol li {
-				@apply mb-1 ml-5;
-			}
-
-			ol {
-				@apply ml-5 list-outside list-decimal leading-7;
-			}
 		</style>
 	</body>
 </html>

tailwind.config.cjs

@@ -54,6 +54,15 @@ module.exports = {
                 "primary-green": "#88D47D",
                 "primary-blue": "#3F84D8",
             },
+            spacing: {
+                auto: "auto",
+            },
+            fontSize: {
+                initial: "initial",
+            },
+            fontWeight: {
+                initial: "initial",
+            },
         },
     },
     variants: {
@@ -61,5 +70,83 @@ module.exports = {
             backgroundImage: ["responsive", "hover", "focus", "active"],
         },
     },
-    plugins: [],
+    plugins: [
+        function ({ addBase, config }) {
+            addBase({
+                blockquote: {
+                    margin: "1rem 0",
+                    borderLeft: "4px solid #718096",
+                    paddingLeft: "1rem",
+                },
+                a: {
+                    display: "inline-block",
+                    color: "#4299e1",
+                    textDecoration: "none",
+                },
+                "a:hover": {
+                    textDecoration: "underline",
+                },
+                h1: {
+                    marginBottom: "0.5rem",
+                    fontSize: "2.25rem",
+                    fontWeight: "bold",
+                },
+                h2: {
+                    marginBottom: "0.5rem",
+                    marginTop: "1.25rem",
+                    fontSize: "1.875rem",
+                    fontWeight: "bold",
+                },
+                h3: {
+                    marginBottom: "0.5rem",
+                    marginTop: "1.25rem",
+                    fontSize: "1.5rem",
+                    fontWeight: "bold",
+                },
+                h4: {
+                    marginBottom: "0.5rem",
+                    marginTop: "1.25rem",
+                    fontSize: "1.25rem",
+                    fontWeight: "bold",
+                },
+                p: {
+                    marginBottom: "0.5rem",
+                    marginTop: "0.5rem",
+                    fontFamily: "system-ui",
+                    lineHeight: "1.75rem",
+                },
+                hr: {
+                    margin: "2.5rem 0",
+                    borderColor: "#718096",
+                },
+                "ul, ol": {
+                    listStylePosition: "outside",
+                    lineHeight: "1.75rem",
+                },
+                ul: {
+                    listStyleType: "disc",
+                },
+                "ul ul, ol ul": {
+                    marginBottom: "0.5rem",
+                    marginLeft: "1.25rem",
+                    listStyleType: "circle",
+                },
+                "ul li, ol li": {
+                    marginBottom: "0.25rem",
+                    marginLeft: "1.25rem",
+                },
+                ol: {
+                    marginLeft: "1.25rem",
+                    listStyleType: "decimal",
+                },
+                code: {
+                    borderRadius: "0.375rem",
+                    backgroundColor: "#323232",
+                    padding: "0.25rem 0.5rem",
+                    fontFamily: "monospace, courier-new",
+                    fontSize: "0.875rem",
+                },
+            });
+        },
+    ],
 };