remove custom css

Author: bdon

app/App.css

@@ -8,7 +8,6 @@ import {
   onMount,
 } from "solid-js";
 import "maplibre-gl/dist/maplibre-gl.css";
-import "./App.css";
 import { type Flavor, layers } from "@protomaps/basemaps";
 import maplibregl from "maplibre-gl";
 import type { StyleSpecification } from "maplibre-gl";
@@ -77,13 +76,14 @@ function App() {
   };
 
   return (
-    <div id="container">
-      <div class="sidebar">
+    <div class="w-full h-dvh flex">
+      <div class="w-1/4 p-4" class="space-y-2">
         <Show when={flavorList()}>
           <For each={flavorList()}>
             {(flavorName) => (
               <button
                 type="button"
+                class="w-full cursor-pointer border-1"
                 onClick={() => setSelectedFlavorName(flavorName)}
               >
                 <FlavorRow name={flavorName} />
@@ -99,7 +99,7 @@ function App() {
         />
         <label for="showLabels">Show labels</label>
       </div>
-      <div id="map" />
+      <div id="map" class="h-dvh w-3/4" />
     </div>
   );
 }

app/App.tsx

@@ -1,68 +1 @@
-:root {
-	font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-	line-height: 1.5;
-	font-weight: 400;
-
-	color-scheme: light dark;
-	color: rgba(255, 255, 255, 0.87);
-	background-color: #242424;
-
-	font-synthesis: none;
-	text-rendering: optimizeLegibility;
-	-webkit-font-smoothing: antialiased;
-	-moz-osx-font-smoothing: grayscale;
-}
-
-a {
-	font-weight: 500;
-	color: #646cff;
-	text-decoration: inherit;
-}
-a:hover {
-	color: #535bf2;
-}
-
-body {
-	margin: 0;
-	display: flex;
-	place-items: center;
-	min-width: 320px;
-	min-height: 100vh;
-}
-
-h1 {
-	font-size: 3.2em;
-	line-height: 1.1;
-}
-
-button {
-	border-radius: 8px;
-	border: 1px solid transparent;
-	padding: 0.6em 1.2em;
-	font-size: 1em;
-	font-weight: 500;
-	font-family: inherit;
-	background-color: #1a1a1a;
-	cursor: pointer;
-	transition: border-color 0.25s;
-}
-button:hover {
-	border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-	outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
-	:root {
-		color: #213547;
-		background-color: #ffffff;
-	}
-	a:hover {
-		color: #747bff;
-	}
-	button {
-		background-color: #f9f9f9;
-	}
-}
+@import "tailwindcss";

app/index.css

@@ -10,79 +10,79 @@ export default (<Flavor>{
   school: "rgba(250, 220, 166, 1)",
   wood_a: "#94ccc3",
   wood_b: "#94ccc3",
-  pedestrian: "",
+  pedestrian: "black",
   scrub_a: "#a4c6a2",
   scrub_b: "#a4c6a2",
   glacier: "rgba(239, 240, 231, 1)",
   sand: "rgba(222, 218, 189, 1)",
   beach: "rgba(236, 251, 218, 1)",
   aerodrome: "rgba(218, 211, 208, 1)",
-  runway: "",
-  water: "",
+  runway: "black",
+  water: "black",
   zoo: "rgba(143, 211, 167, 1)",
   military: "rgba(173, 188, 195, 1)",
 
-  tunnel_other_casing: "",
-  tunnel_minor_casing: "",
-  tunnel_link_casing: "",
-  tunnel_major_casing: "",
-  tunnel_highway_casing: "",
-  tunnel_other: "",
-  tunnel_minor: "",
-  tunnel_link: "",
-  tunnel_major: "",
-  tunnel_highway: "",
+  tunnel_other_casing: "black",
+  tunnel_minor_casing: "black",
+  tunnel_link_casing: "black",
+  tunnel_major_casing: "black",
+  tunnel_highway_casing: "black",
+  tunnel_other: "black",
+  tunnel_minor: "black",
+  tunnel_link: "black",
+  tunnel_major: "black",
+  tunnel_highway: "black",
 
-  pier: "",
-  buildings: "",
+  pier: "black",
+  buildings: "black",
 
-  minor_service_casing: "",
-  minor_casing: "",
-  link_casing: "",
-  major_casing_late: "",
-  highway_casing_late: "",
-  other: "",
-  minor_service: "",
-  minor_a: "",
-  minor_b: "",
-  link: "",
-  major_casing_early: "",
-  major: "",
-  highway_casing_early: "",
-  highway: "",
+  minor_service_casing: "black",
+  minor_casing: "black",
+  link_casing: "black",
+  major_casing_late: "black",
+  highway_casing_late: "black",
+  other: "black",
+  minor_service: "black",
+  minor_a: "black",
+  minor_b: "black",
+  link: "black",
+  major_casing_early: "black",
+  major: "black",
+  highway_casing_early: "black",
+  highway: "black",
 
-  railway: "",
-  boundaries: "",
-  waterway_label: "",
+  railway: "black",
+  boundaries: "black",
+  waterway_label: "black",
 
-  bridges_other_casing: "",
-  bridges_minor_casing: "",
-  bridges_link_casing: "",
-  bridges_major_casing: "",
-  bridges_highway_casing: "",
-  bridges_other: "",
-  bridges_minor: "",
-  bridges_link: "",
-  bridges_major: "",
-  bridges_highway: "",
+  bridges_other_casing: "black",
+  bridges_minor_casing: "black",
+  bridges_link_casing: "black",
+  bridges_major_casing: "black",
+  bridges_highway_casing: "black",
+  bridges_other: "black",
+  bridges_minor: "black",
+  bridges_link: "black",
+  bridges_major: "black",
+  bridges_highway: "black",
 
-  roads_label_minor: "",
-  roads_label_minor_halo: "",
-  roads_label_major: "",
-  roads_label_major_halo: "",
-  ocean_label: "",
-  peak_label: "",
-  subplace_label: "",
-  subplace_label_halo: ")",
-  city_label: "",
-  city_label_halo: "",
-  state_label: "",
-  state_label_halo: "",
-  country_label: "",
+  roads_label_minor: "black",
+  roads_label_minor_halo: "black",
+  roads_label_major: "black",
+  roads_label_major_halo: "black",
+  ocean_label: "black",
+  peak_label: "black",
+  subplace_label: "black",
+  subplace_label_halo: "black",
+  city_label: "black",
+  city_label_halo: "black",
+  state_label: "black",
+  state_label_halo: "black",
+  country_label: "black",
 
-  regular: "",
-  bold: "",
-  italic: "",
+  regular: "black",
+  bold: "black",
+  italic: "black",
 
   landcover: {
     grassland: "rgba(143, 201, 173, 1)",

flavors/sol.ts

@@ -2,6 +2,7 @@ import fs from "node:fs";
 import path from "node:path";
 import { defineConfig } from "vite";
 import solid from "vite-plugin-solid";
+import tailwindcss from '@tailwindcss/vite'
 
 const flavorList = () => {
   const contentDir = path.resolve(__dirname, "flavors");
@@ -49,5 +50,6 @@ export default defineConfig({
       },
     },
     solid(),
+    tailwindcss()
   ],
 });