refactor base css with tailwind

teambtcmap · Dec 16, 2023 · 3b27438 · 3b27438
1 parent 1ab7f8a
commit 3b27438
Showing 1 changed file with 43 additions and 47 deletions.
diff --git a/src/app.css b/src/app.css
@@ -7,63 +7,59 @@
 	src: url('/fonts/Manrope-Regular.ttf') format('truetype');
 }
 
-html {
-	font-family: Manrope, sans-serif;
-	font-size: 16px;
-}
+@layer base {
+	html {
+		font-family: Manrope, sans-serif;
+		@apply text-base;
+	}
 
-::selection {
-	color: white;
-	background: #53c5d5;
+	::selection {
+		@apply bg-[#53c5d5] text-white;
+	}
 }
 
-.gradient {
-	background: -webkit-linear-gradient(45deg, #0ecd71, #040273);
-	-webkit-background-clip: text;
-	-webkit-text-fill-color: transparent;
-}
+@layer utilities {
+	.gradient {
+		background: -webkit-linear-gradient(45deg, #0ecd71, #040273);
+		background-clip: text;
+		-webkit-background-clip: text;
+		-webkit-text-fill-color: transparent;
+	}
 
-.gradient-bg {
-	background: -webkit-linear-gradient(45deg, #0ecd71, #040273);
-}
+	.gradient-bg {
+		background: -webkit-linear-gradient(45deg, #0ecd71, #040273);
+	}
 
-/* Hide scrollbar for Chrome, Safari and Opera */
-.hide-scroll::-webkit-scrollbar {
-	display: none;
-}
+	/* Hide scrollbar for Chrome, Safari and Opera */
+	.hide-scroll::-webkit-scrollbar {
+		@apply hidden;
+	}
 
-/* Hide scrollbar for IE, Edge and Firefox */
-.hide-scroll {
-	-ms-overflow-style: none; /* IE and Edge */
-	scrollbar-width: none; /* Firefox */
-}
+	/* Hide scrollbar for IE, Edge and Firefox */
+	.hide-scroll {
+		-ms-overflow-style: none; /* IE and Edge */
+		scrollbar-width: none; /* Firefox */
+	}
 
-.div-icon {
-	background-image: url('/icons/div-icon-pin.svg');
-}
+	.center {
+		@apply absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2;
+	}
 
-.boosted-icon {
-	background-image: url('/icons/boosted-icon-pin.svg');
+	.center-fixed {
+		@apply fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2;
+	}
 }
 
-.treasure-icon {
-	background-image: url('/icons/treasure-icon.png');
-}
+@layer components {
+	.div-icon {
+		background-image: url('/icons/div-icon-pin.svg');
+	}
 
-.center {
-	position: absolute;
-	top: 50%;
-	left: 50%;
-	-moz-transform: translateX(-50%) translateY(-50%);
-	-webkit-transform: translateX(-50%) translateY(-50%);
-	transform: translateX(-50%) translateY(-50%);
-}
+	.boosted-icon {
+		background-image: url('/icons/boosted-icon-pin.svg');
+	}
 
-.center-fixed {
-	position: fixed;
-	top: 50%;
-	left: 50%;
-	-moz-transform: translateX(-50%) translateY(-50%);
-	-webkit-transform: translateX(-50%) translateY(-50%);
-	transform: translateX(-50%) translateY(-50%);
+	.treasure-icon {
+		background-image: url('/icons/treasure-icon.png');
+	}
 }