wip tailwind

package.json

@@ -18,5 +18,8 @@
     "svelte": "^4.2.19",
     "tailwindcss": "^3.4.10",
     "typescript": "^5.5.4"
+  },
+  "devDependencies": {
+    "@tailwindcss/typography": "^0.5.15"
   }
 }

src/components/header.astro

@@ -7,9 +7,9 @@ interface Props {
 const { href, title } = Astro.props;
 ---
 
-<ul class=" bg-teal-200 flex justify-around w-1/3 rounded-lg mx-auto">
+<ul class=" absolute inset-x-0 top-0 global-color flex justify-around w-1/4 rounded-3xl mx-auto my-5 typo-rubik font-semibold text-xl">
 	{title.map((item, index) => (
-        <a href={href[index]} class="  m-4 ">{item}</a>
+        <a href={href[index]} class="  m-4">{item}</a>
     ))}
 </ul>
 

src/content/projects/3d printer.mdx

@@ -16,6 +16,6 @@ salut
 </div>
 
 <div>
-    # {frontmatter.description}
+    {frontmatter.description}
 </div>
 

src/pages/[...slug].astro

@@ -18,3 +18,9 @@ import ProjectLayout from '../layouts/projectLayout.astro'
   <Content />
 </ProjectLayout>
 
+
+<style is:global>
+  h1{
+    color: red;
+  }
+</style>

src/pages/index.astro

@@ -46,8 +46,23 @@ const cards = [
 
 </LayoutPage>
 
-<style>
+<style is:global>
 	@view-transition {
 	  navigation: auto; /* enabled! */
 	}
+
+	@tailwind base;
+	@tailwind components;
+	@tailwind utilities;
+
+	@layer components {
+		.typo-rubik {
+			font-family: 'Rubik', "Regular";
+		}
+		.global-color{
+			background-color: #CFE9FF;
+		}
+
+	}
+
 </style>

tailwind.config.mjs

@@ -4,5 +4,7 @@ export default {
 	theme: {
 		extend: {},
 	},
-	plugins: [],
+	plugins: [
+		require('@tailwindcss/typography'),
+	],
 }