Add tailwind to frontend

frontend/package.json

@@ -10,8 +10,13 @@
     "astro": "astro"
   },
   "dependencies": {
-    "astro": "^4.16.7",
     "@astrojs/check": "^0.9.4",
+    "astro": "^4.16.7",
     "typescript": "^5.6.3"
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.47",
+    "tailwindcss": "^3.4.14"
   }
 }

frontend/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

frontend/src/layouts/Layout.astro

@@ -1,4 +1,6 @@
 ---
+import '../styles/global.css';
+
 interface Props {
 	title: string;
 }

frontend/src/pages/index.astro

@@ -61,6 +61,12 @@ import Card from '../components/Card.astro';
 			/>
 		</ul>
 	</main>
+
+	<div class="min-h-screen bg-gray-100 flex items-center justify-center">
+		<h1 class="text-4xl font-bold text-blue-600 hover:text-blue-800">
+		  Hello Tailwind + Astro!
+		</h1>
+	  </div>
 </Layout>
 
 <style>

frontend/src/styles/global.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

frontend/tailwind.config.js

@@ -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: [],
+}