fix all the tailwind warnings

Author: probablyjassin

app/app.vue

@@ -7,17 +7,17 @@
 				<NuxtPage />
 			</NuxtLayout>
 		</main>
-		<footer class="mt-auto p-6 bg-[var(--primary-100)]" style="background-color: var(--primary-100)">
+		<footer class="mt-auto p-6 bg-(--primary-100)" style="background-color: var(--primary-100)">
 			<div class="container mx-auto flex justify-between items-center">
 				<div class="flex items-center space-x-4">
 					<NuxtPicture src="images/blog-thumbnails/probablyjassin.webp" alt="Footer logo" class="h-10 w-10 rounded-full" />
-					<p class="text-[var(--text-900)]">© {{ new Date().getFullYear() }} <span class="whitespace-nowrap">Jässin</span></p>
+					<p class="text-(--text-900)">© {{ new Date().getFullYear() }} <span class="whitespace-nowrap">Jässin</span></p>
 				</div>
 				<div class="flex space-x-6">
-					<a title="github" href="https://github.com/probablyjassin" class="text-[var(--text-900)] hover:text-[var(--secondary-400)] transition-colors">
+					<a title="github" href="https://github.com/probablyjassin" class="text-(--text-900)r:text-[var(--secondary-400)] transition-colors">
 						<Icon name="line-md:github" class="w-6 h-6" />
 					</a>
-					<a title="email" href="mailto:jassin@aouani.de" class="text-[var(--text-900)] hover:text-[var(--secondary-400)] transition-colors">
+					<a title="email" href="mailto:jassin@aouani.de" class="text-(--text-900) hover:text-(--secondary-400) transition-colors">
 						<Icon name="line-md:email" class="w-6 h-6" />
 					</a>
 				</div>

app/assets/css/main.css

@@ -3,7 +3,7 @@
 
 @layer base {
 	body {
-		@apply bg-[var(--background-100)] text-[var(--text-900)] font-sans leading-relaxed;
+		@apply bg-(--background-100) text-(--text-900)-sans leading-relaxed;
 		margin: 0;
 		padding: 0;
 		/* cursor: url("/wiicursor.png"), auto; */
@@ -15,7 +15,7 @@
 
 	header,
 	footer {
-		@apply bg-[var(--primary-500)] text-[var(--text-50)];
+		@apply bg-(--primary-500) text-(--text-50);
 	}
 
 	header {
@@ -32,7 +32,7 @@
 	h4,
 	h5,
 	h6 {
-		@apply text-[var(--text-900)] font-bold;
+		@apply text-(--text-900) font-bold;
 	}
 
 	h1 {
@@ -80,7 +80,7 @@
 	}
 
 	blockquote {
-		@apply border-l-4 border-[var(--primary-500)] pl-4 italic mb-4;
+		@apply border-l-4 border-(--primary-500) pl-4 italic mb-4;
 	}
 
 	ul {
@@ -100,7 +100,7 @@
 	}
 
 	code:not(pre code) {
-		@apply bg-[var(--background-200)] text-[var(--text-800)] px-1.5 py-0.5 rounded text-sm font-mono;
+		@apply bg-(--background-200) text-(--text-800) px-1.5 py-0.5 rounded text-sm font-mono;
 	}
 
 	pre:has(code) {
@@ -117,12 +117,12 @@
 
 	@media (prefers-color-scheme: dark) {
 		pre {
-			@apply bg-[var(--background-700)] text-[var(--text-200)];
+			@apply bg-(--background-700) text-(--text-200);
 		}
 
 		.copy-button {
-			@apply bg-[var(--background-600)] text-[var(--text-300)]
-			hover:bg-[var(--background-500)] hover:text-[var(--text-100)];
+			@apply bg-(--background-600) text-(--text-300)
+			hover:bg-(--background-500) hover:text-(--text-100);
 		}
 	}
 
@@ -136,31 +136,31 @@
 
 	th,
 	td {
-		@apply border border-[var(--text-300)];
+		@apply border border-(--text-300);
 	}
 
 	th {
-		@apply bg-[var(--primary-500)] text-[var(--text-50)];
+		@apply bg-(--primary-500) text-(--text-50);
 	}
 
 	hr {
-		@apply border-t border-[var(--text-300)] my-8;
+		@apply border-t border-(--text-300) my-8;
 	}
 
 	.bg-primary {
-		@apply bg-[var(--primary-500)];
+		@apply bg-(--primary-500);
 	}
 
 	.bg-secondary {
-		@apply bg-[var(--secondary-500)];
+		@apply bg-(--secondary-500);
 	}
 
 	.text-primary {
-		@apply text-[var(--primary-500)];
+		@apply text-(--primary-500);
 	}
 
 	.text-secondary {
-		@apply text-[var(--secondary-500)];
+		@apply text-(--secondary-500);
 	}
 }