css finally working rking - yeah!!!

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;
+}
+}