Install Tailwind

.prettierignore

@@ -0,0 +1,8 @@
+# build output
+dist/
+
+# generated types
+.astro/
+
+# dependencies
+node_modules/

.prettierrc

@@ -0,0 +1,11 @@
+{
+  "plugins": ["prettier-plugin-astro"],
+  "overrides": [
+    {
+      "files": "*.astro",
+      "options": {
+        "parser": "astro"
+      }
+    }
+  ]
+}

astro.config.mjs

@@ -1,4 +1,8 @@
-import { defineConfig } from 'astro/config';
+import { defineConfig } from "astro/config";
+
+import tailwind from "@astrojs/tailwind";
 
 // https://astro.build/config
-export default defineConfig({});
+export default defineConfig({
+  integrations: [tailwind()],
+});

package.json

@@ -10,6 +10,13 @@
     "astro": "astro"
   },
   "dependencies": {
-    "astro": "^3.3.0"
+    "@astrojs/tailwind": "^5.0.2",
+    "astro": "^3.3.0",
+    "tailwindcss": "^3.0.24"
+  },
+  "devDependencies": {
+    "prettier": "3.0.3",
+    "prettier-plugin-astro": "^0.12.0",
+    "prettier-plugin-tailwindcss": "^0.5.6"
   }
-}
+}

src/pages/index.astro

@@ -1,9 +1,9 @@
 ---
-import Layout from '../layouts/Layout.astro';
+import Layout from "../layouts/Layout.astro";
 ---
 
-<Layout title="Welcome to Astro.">
-	<main>
-		<h1>Hello World!</h1>
-	</main>
-</Layout>
+<Layout title="Mikkel Svartveit">
+  <main>
+    <h1>Hello World!</h1>
+  </main>
+</Layout>

tailwind.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};

tsconfig.json

@@ -1,3 +1,3 @@
 {
   "extends": "astro/tsconfigs/strict"
-}
+}