jiasf

package.json

@@ -21,6 +21,7 @@
 		"eslint": "^8.28.0",
 		"eslint-config-prettier": "^8.5.0",
 		"eslint-plugin-svelte": "^2.30.0",
+		"postcss-nesting": "^12.0.1",
 		"prettier": "^2.8.0",
 		"prettier-plugin-svelte": "^2.10.1",
 		"svelte": "^4.0.5",

postcss.config.js

@@ -1,10 +1,8 @@
-import tailwind from 'tailwindcss'
-import tailwindConfig from './tailwind.config.js'
-import autoprefixer from 'autoprefixer'
-
 export default {
-  plugins: [
-    tailwind(tailwindConfig),
-    autoprefixer,
-  ],
-}
+  plugins: {
+    'postcss-import': {},
+    'tailwindcss/nesting': 'postcss-nesting',
+    tailwindcss: {},
+    autoprefixer: {},
+  }
+}

src/routes/+layout.svelte

@@ -29,6 +29,9 @@
                 >
                 <span class="bar" />
             </div>
+            <div class="bg-red font-extrabold text-red-700">
+                dsadas
+            </div>
         </div>
         {$page.route.id}
         <slot />
@@ -42,7 +45,7 @@
             @apply h-px w-[84px] bg-black place-self-center place-content-end;
         }
         .nav-link {
-            @apply text-gray px-5 py-4 h-fit hover:text-black;
+            @apply text-pale-black font-bold px-5 py-4 h-fit hover:text-black;
 
             &[data-active="true"] + .bar {
                 @apply h-px w-[84px] bg-black place-self-center place-content-end;   
@@ -54,6 +57,6 @@
     }
 
     .topbar {
-        @apply h-fit border-b border-gray flex gap-x-10;
+        @apply h-fit border-b flex gap-x-10 bg-[#D4DBE6];
     }
 </style>

tailwind.config.js

@@ -1,12 +1,13 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-    ontent: ["./src/**/*.{html,js,svelte,ts}"],
+    content: ["./src/**/*.{html,js,svelte,ts}"],
     theme: {
         extend: {
             colors: {
                 gray: "#D4DBE6",
                 black: "#060606",
                 "pale-black": "#A7A7A7",
+                "slate": "#D4DBE6",
             },
         },
     },