Avoid using custom classes

src/routes/+page.svelte

@@ -1,7 +1,5 @@
-<script>
+<script lang="ts">
 	import Hero from "./hero.svelte";
 </script>
 
-<!--<h1 class="font-mono text-5xl">Bienvenido a KOKOA</h1>-->
-<!--<p class="font-mono">Promovemos la programación orientada al comunismo</p>-->
 <Hero />

src/routes/hero.svelte

@@ -1,30 +1,30 @@
-<div class=" mt-24 flex flex-col items-center justify-around gap-y-12 lg:flex lg:flex-row">
+<div class="mt-24 flex flex-col items-center justify-around gap-y-12 lg:flex lg:flex-row">
 	<div class="relative">
 		<img
 			src="https://images.unsplash.com/photo-1601933470096-0e34634ffcde?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
 			alt="Imagen de amigos programando"
 			class="relative z-10 h-[12.5rem] w-[16rem] lg:h-[18rem] lg:w-[26rem]"
 		/>
 		<div
-			class="absolute left-[-0.5rem] top-[-0.5rem] z-0 h-5 w-5 bg-primary lg:left-[-1.3rem] lg:top-[-1.3rem] lg:h-[6rem] lg:w-[6rem]"
+			class="absolute left-[-0.5rem] top-[-0.5rem] z-0 h-5 w-5 bg-lime-500 lg:left-[-1.3rem] lg:top-[-1.3rem] lg:h-[6rem] lg:w-[6rem]"
 		></div>
 		<div
-			class="absolute bottom-[-0.5rem] right-[-0.5rem] z-0 h-5 w-5 border border-primary lg:bottom-[-1.2rem] lg:right-[-1.2rem] lg:h-[6rem] lg:w-[6rem]"
+			class="absolute bottom-[-0.5rem] right-[-0.5rem] z-0 h-5 w-5 border border-lime-500 lg:bottom-[-1.2rem] lg:right-[-1.2rem] lg:h-[6rem] lg:w-[6rem]"
 		></div>
 	</div>
 	<div class="flex flex-col items-center gap-y-5">
 		<div>
-			<span class="text-primary lg:text-xl">Kokoa</span>
-			<span class="font-fira text-base lg:text-xl">- Vive el software libre</span>
+			<span class="text-lime-500 lg:text-xl">Kokoa</span>
+			<span class="font-fira text-blue-100 lg:text-xl">- Vive el software libre</span>
 		</div>
 		<div class="max-w-screen-md lg:max-w-screen-sm">
-			<p class="lg:text-md text-center font-fira text-base text-sm">
+			<p class="lg:text-md text-center font-fira text-sm text-blue-100">
 				Club estudiantil politécnico promotor del uso, modificación, distribución y aprendizaje de
 				software libre
 			</p>
 		</div>
 		<button
-			class="button-shd w-15 border-2xl rounded-2xl border-primary bg-primary px-14 py-1 font-medium text-black shadow-2xl"
+			class="w-15 border-2xl rounded-2xl border-lime-500 bg-lime-500 px-14 py-1 font-medium text-black shadow-2xl"
 		>
 			Unirse
 		</button>

tailwind.config.ts

@@ -10,10 +10,6 @@ export default {
 			fontFamily: {
 				fira: ["Fira Code", "mono-space"],
 			},
-			colors: {
-				primary: "#8CC63F",
-				base: "#E0EBFF",
-			},
 		},
 	},
 	plugins: [forms({ strategy: "class" }), typography],