css finally working rking - yeah!!!

frontend/postcss.config.cjs

@@ -1,6 +1,5 @@
-export default {
+module.exports = {
   plugins: {
     "@tailwindcss/postcss": {},
-    autoprefixer: {},
   },
 }

frontend/src/App.css

@@ -1,10 +1,58 @@
-
 /* Import Tailwind layers */
-@tailwind base;
-@tailwind components;
+@import "tailwindcss"; 
 @tailwind utilities;
 
-/* App-specific tweaks */
+/* Custom recipe app styles */
+@layer components{
 .app-container {
-  @apply p-4;
+  @apply p-4 flex;
 }
+
+.sidebar {
+  @apply min-w-[16rem] bg-gray-50 p-4 w-1/3 border-r pr-4;
+}
+
+.sidebar-title {
+  @apply text-blue-900 font-bold mb-2;
+}
+
+.sidebar-link {
+  @apply block bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition
+}
+
+.sidebar-item-text {
+  @apply font-semibold text-blue-400
+}
+
+.content-title{
+  @apply text-xl font-black mb-16 text-blue-300
+}
+
+.main-view {
+  @apply w-2/3 pl-4;
+}
+
+.recipe-title {
+  @apply text-2xl font-bold;
+}
+
+.recipe-image {
+  @apply my-4 w-64;
+}
+
+.section-heading {
+  @apply text-2xl font-bold;
+}
+
+.primary-button {
+  @apply bg-blue-300 px-4 py-2 shadow-md rounded-lg hover:bg-blue-400 text-gray-600
+}
+
+.default-button{
+  @apply bg-gray-300 px-4 py-2 shadow-md rounded-lg hover:bg-gray-400 text-gray-600
+}
+
+.input-field {
+  @apply border p-2 w-full mb-2;
+}
+}

frontend/src/App.tsx

@@ -2,6 +2,7 @@ import { BrowserRouter as Router, Routes, Route } from "react-router-dom"
 import RecipeListView from "./components/RecipeListView"
 import RecipeDetailView from "./components/RecipeDetailView"
 import RecipeEditView from "./components/RecipeEditView"
+import "./App.css"
 
 /**
  * Main application component.

frontend/src/components/RecipeDetailView.tsx

@@ -16,7 +16,7 @@ export default function RecipeDetailView() {
 
   return (
     <div className="p-6 max-w-2xl mx-auto">
-      <h1 className="text-3xl font-bold mb-4">{recipe.title}</h1>
+      <h1 className="content-title">{recipe.title}</h1>
 
       {/* Recipe image */}
       {recipe.imageUrl && (
@@ -28,7 +28,7 @@ export default function RecipeDetailView() {
       )}
 
       {/* Ingredients */}
-      <h2 className="font-semibold">Ingredients</h2>
+      <h2 className="section-heading">Ingredients</h2>
       <ul className="list-disc pl-6">
         {recipe.ingredients.map((ing, i) => (
         <li key={i}>
@@ -38,24 +38,26 @@ export default function RecipeDetailView() {
       </ul>
 
       {/* Instructions */}
-      <h2 className="text-xl font-semibold mb-2">Instructions</h2>
+      <h2 className="section-heading">Instructions</h2>
       <p className="mb-6">{recipe.instructions}</p>
 
       {/* Action buttons */}
-      <div className="flex gap-4">
+      <div className="flex gap-8">
         <Link
           to={`/recipe/${recipe.id}/edit`}
-          className="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600"
+          className="primary-button"
         >
           Edit
         </Link>
         <Link
           to="/"
-          className="bg-gray-300 px-4 py-2 rounded-lg hover:bg-gray-400"
+          className="default-button"
         >
           Back
         </Link>
       </div>
+
     </div>
+
   )
 }

frontend/src/components/RecipeEditor.tsx

@@ -20,8 +20,8 @@ export default function RecipeEditor({ recipe, onSave }: RecipeEditorProps) {
   }
    if (!recipe) return <div>Oops, there's no recipe in RecipeEditor...</div>
   return (
-    <div>
-      <h2 className="text-xl font-bold mb-2">
+    <div className="p-4 gap-10">
+      <h2 className="section-heading">
         {recipe.id ? "Edit Recipe" : "New Recipe"}
       </h2>
 

frontend/src/components/RecipeListView.tsx

@@ -2,35 +2,22 @@ import { Link } from "react-router-dom"
 import { recipes } from "../mock_data/recipes"
 
 /**
- * Displays a list of recipes in a grid layout.
- * Each recipe links to its detail view.
+ * Displays a list of recipes in a sidebar layout.
+ * Each recipe link fills the available width.
  */
 export default function RecipeListView() {
   return (
-    <div className="p-6">
-      <h1 className="text-3xl font-bold mb-6">Recipes</h1>
+    <div className="sidebar">
+      <h1 className="sidebar-title">Recipes</h1>
 
-      {/* Grid of recipe cards */}
-      <div className="grid gap-6 sm:grid-cols-2 md:grid-cols-3">
+      <div className="flex flex-col gap-2">
         {recipes.map((recipe) => (
           <Link
             key={recipe.id}
             to={`/recipe/${recipe.id}`}
-            className="block bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition"
+            className="sidebar-link block w-full px-4 py-2 rounded hover:bg-blue-100"
           >
-            {/* Thumbnail image */}
-            {recipe.imageUrl && (
-              <img
-                src={recipe.imageUrl}
-                alt={recipe.title}
-                className="w-full h-40 object-cover"
-              />
-            )}
-
-            {/* Recipe title */}
-            <div className="p-4">
-              <h2 className="text-xl font-semibold">{recipe.title}</h2>
-            </div>
+            <h2 className="sidebar-item-text">{recipe.title}</h2>
           </Link>
         ))}
       </div>

frontend/src/index.css

@@ -1,6 +1,5 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+@import "tailwindcss/utilities";      
 
 :root {
   font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
@@ -17,14 +16,14 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-a {
+/*a {
   font-weight: 500;
   color: #646cff;
   text-decoration: inherit;
 }
 a:hover {
-  color: #535bf2;
-}
+  color : #8e8f9c;
+}*/
 
 body {
   margin: 0;

frontend/src/main.tsx

@@ -1,7 +1,8 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
-import './index.css'
 import App from './App.tsx'
+import './index.css'
+
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>

frontend/tailwind.config.js

@@ -1,9 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-export default {
-  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-}
-

frontend/tailwind.config.ts

@@ -0,0 +1,12 @@
+import type { Config } from "tailwindcss"
+
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+} satisfies Config

frontend/tsconfig.app.json

@@ -23,5 +23,5 @@
     "noFallthroughCasesInSwitch": true,
     "noUncheckedSideEffectImports": true
   },
-  "include": ["src", "../backend/src/mock_data/recipes.ts"]
+  "include": ["src", "../backend/src/mock_data/recipes.ts", "tailwind.config.ts", "postcss.config.cjs"]
 }

frontend/vite.config.ts

@@ -1,7 +1,6 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
+import { defineConfig } from "vite"
+import react from "@vitejs/plugin-react"
 
-// https://vite.dev/config/
 export default defineConfig({
   plugins: [react()],
 })