Fix Tailwind CSS production build issues

- Replace old CSS with proper Tailwind directives
- Import styles.css in Layout.astro to ensure Tailwind base styles load
- Fix missing CSS in production builds while maintaining dev functionality

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>

Author: jenniferlynparsons

src/layouts/Layout.astro

@@ -1,5 +1,6 @@
 ---
 import CategoryLinks from '../components/CategoryLinks.astro';
+import '../styles.css';
 
 export interface Props {
   title: string;

src/styles.css

@@ -1,108 +1,3 @@
-body {
-	padding: 10px 20px;
-	max-width: 960px;
-	width: 100%;
-	margin: 100px auto 500px;
-	background: #0080a7;
-	color: #fff;
-}
-
-.nowrap {
-	white-space: nowrap;
-}
-
-@media screen and (prefers-reduced-motion: no-preference) {
-	body {
-		scroll-behavior: smooth;
-	}
-}
-
-svg {
-	max-height: 150px;
-	max-width: 90%;
-	margin: 0 auto;
-	fill: #fff;
-}
-
-nav svg {
-	max-height: 40px;
-	max-width: 40px;
-	fill: #0080a7;
-}
-
-nav,
-nav a {
-	color: #0080a7;
-}
-
-.menu select {
-	width: auto;
-}
-
-hr {
-	margin-top: 48px;
-	border-top: 0;
-	border-bottom: 1px solid #fff;
-}
-
-section,
-.meta,
-footer {
-	padding-top: 80px;
-}
-
-.card {
-	height: 100%;
-	color: #333;
-}
-
-button,
-.button {
-	background-color: #0080a7;
-}
-
-nav,
-nav a,
-.card a {
-	color: #0080a7;
-}
-
-nav a:hover,
-.card a:hover {
-	color: #d42600;
-}
-
-nav a.button:hover {
-	color: #fff;
-}
-
-.meta a,
-footer a {
-	color: #fff;
-	text-decoration: underline;
-}
-
-.meta a.button,
-.category-links a.button {
-	background-color: #fff;
-	color: #0080a7;
-	text-decoration: none;
-}
-
-.meta a.button:hover,
-.pseudo.button:hover,
-.category-links a.button:hover {
-	background-color: #37b4da;
-	color: #fff;
-	text-decoration: none;
-}
-
-.category-links a {
-	margin: 5px;
-}
-
-@media only screen and (max-device-width: 600px) {
-	nav span {
-		display: none;
-	}
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;