monkeytypegame · Miodec · Jan 18, 2026 · Jan 15, 2026 · Jan 16, 2026 · Jan 16, 2026
diff --git a/.oxfmtrc.json b/.oxfmtrc.json
@@ -15,5 +15,9 @@
     "logs",
     "coverage",
     "*.md"
-  ]
+  ],
+  "experimentalTailwindcss": {
+    "stylesheet": "./frontend/src/styles/tailwind.css",
+    "functions": ["cn"]
+  }
 }
diff --git a/frontend/package.json b/frontend/package.json
@@ -37,6 +37,7 @@
     "chartjs-adapter-date-fns": "3.0.0",
     "chartjs-plugin-annotation": "2.2.1",
     "chartjs-plugin-trendline": "1.0.2",
+    "clsx": "2.1.1",
     "color-blend": "4.0.0",
     "damerau-levenshtein": "1.0.8",
     "date-fns": "3.6.0",
@@ -52,6 +53,7 @@
     "object-hash": "3.0.0",
     "slim-select": "2.9.2",
     "stemmer": "2.0.1",
+    "tailwind-merge": "3.4.0",
     "throttle-debounce": "5.0.2",
     "zod": "3.23.8",
     "zod-urlsearchparams": "0.0.16"
@@ -62,6 +64,7 @@
     "@monkeytype/oxlint-config": "workspace:*",
     "@monkeytype/typescript-config": "workspace:*",
     "@solidjs/testing-library": "0.8.10",
+    "@tailwindcss/vite": "4.1.18",
     "@testing-library/dom": "10.4.1",
     "@testing-library/jest-dom": "6.9.1",
     "@testing-library/user-event": "14.6.1",
@@ -93,6 +96,7 @@
     "sass": "1.70.0",
     "solid-js": "1.9.10",
     "subset-font": "2.3.0",
+    "tailwindcss": "4.1.18",
     "tsx": "4.16.2",
     "typescript": "5.9.3",
     "unplugin-inject-preload": "3.0.0",

diff --git a/frontend/src/html/head.html b/frontend/src/html/head.html
@@ -113,8 +113,14 @@
   <meta name="twitter:card" content="summary_large_image" />
   <meta name="darkreader-lock" />
   <meta http-equiv="Cache-Control" content="no-store" />
-  <link rel="stylesheet" href="styles/vendor.scss" />
+
+  <!-- 
+    order of the style imports is not important EXCEPT for index
+    index has to be first because it contains the order of css layers
+  -->
   <link rel="stylesheet" href="styles/index.scss" />
+  <link rel="stylesheet" href="styles/tailwind.css" />
+  <link rel="stylesheet" href="styles/vendor.scss" />
 
   <style class="customFont" type="text/css"></style>
 </head>
diff --git a/frontend/src/html/pages/account.html b/frontend/src/html/pages/account.html
@@ -1,4 +1,4 @@
-<div class="page pageAccount hidden full-width" id="pageAccount">
+<div class="page pageAccount full-width hidden" id="pageAccount">
   <div class="content full-width content-grid">
     <div class="profile">
       <div class="details both">

diff --git a/frontend/src/html/pages/friends.html b/frontend/src/html/pages/friends.html
@@ -38,7 +38,7 @@
         <div class="bigTitle">
           <i class="fas fa-user-friends fa-fw"></i>
           Friends
-          <i class="spinner hidden fas fa-circle-notch fa-spin"></i>
+          <i class="spinner fas fa-circle-notch fa-spin hidden"></i>
         </div>
         <button class="button friendAdd">
           <i class="fas fa-plus fa-fw"></i>

diff --git a/frontend/src/html/pages/leaderboards.html b/frontend/src/html/pages/leaderboards.html
@@ -214,7 +214,7 @@
         </button>
       </div>
 
-      <div class="buttonGroup hidden modeButtons">
+      <div class="buttonGroup modeButtons hidden">
         <div class="divider"></div>
         <button data-mode="15">
           <i class="fas fa-clock"></i>
@@ -226,7 +226,7 @@
         </button>
       </div>
 
-      <div class="buttonGroup hidden languageButtons">
+      <div class="buttonGroup languageButtons hidden">
         <div class="divider"></div>
         <button data-language="english">
           <i class="fas fa-globe"></i>

diff --git a/frontend/src/html/pages/settings.html b/frontend/src/html/pages/settings.html
@@ -1,4 +1,4 @@
-<div class="page pageSettings hidden full-width content-grid" id="pageSettings">
+<div class="page pageSettings full-width content-grid hidden" id="pageSettings">
   <div class="settingsGroup quickNav">
     <div class="links">
       <a class="textButton" href="#group_behavior">

diff --git a/frontend/src/html/pages/test.html b/frontend/src/html/pages/test.html
@@ -1,4 +1,4 @@
-<div class="page pageTest hidden full-width content-grid" data-nosnippet>
+<div class="page pageTest full-width content-grid hidden" data-nosnippet>
   <div id="testConfig" class="full-width">
     <div class="row">
       <div class="puncAndNum">

diff --git a/frontend/src/index.html b/frontend/src/index.html
@@ -3,6 +3,7 @@
   <load src="html/head.html" />
 
   <body>
+    <TailwindMediaQueryDebugger />
     <LoaderBar />
     <div id="mediaQueryDebug"></div>
     <load src="html/warnings.html" />
@@ -38,7 +39,7 @@
         </div>
         <load src="html/pages/loading.html" />
         <div
-          class="page pageAbout hidden full-width content-grid"
+          class="page pageAbout full-width content-grid grid hidden gap-8"
           id="pageAbout"
         >
           <AboutPage />

diff --git a/frontend/src/styles/buttons.scss b/frontend/src/styles/buttons.scss
@@ -41,6 +41,7 @@ input[type="submit"] {
   -webkit-user-select: none;
   user-select: none;
   align-content: center;
+  align-items: center;
   height: -moz-min-content;
   height: min-content;
   line-height: 1.25;
@@ -50,8 +51,8 @@ input[type="submit"] {
   font-size: 1em;
   display: inline-flex;
   gap: 0.5em;
-  align-items: baseline;
   justify-content: center;
+  justify-items: center;
 
   &.danger {
     background: var(--error-color);

diff --git a/frontend/src/styles/core.scss b/frontend/src/styles/core.scss
@@ -185,17 +185,6 @@ body {
   display: flex;
 }
 
-#backgroundLoader {
-  top: 0;
-  height: 0.25rem;
-  position: fixed;
-  width: 100%;
-  background: var(--main-color);
-  animation: loader 2s cubic-bezier(0.38, 0.16, 0.57, 0.82) infinite;
-  z-index: 9999;
-  opacity: 0;
-}
-
 kbd {
   color: var(--bg-color);
   background-color: var(--sub-color);
@@ -246,16 +235,6 @@ kbd {
   box-sizing: border-box;
 }
 
-.hidden {
-  display: none !important;
-}
-
-.invisible {
-  opacity: 0 !important;
-  pointer-events: none !important;
-  visibility: hidden !important;
-}
-
 .inputAndIndicator {
   input {
     width: 100%;

diff --git a/frontend/src/styles/index.scss b/frontend/src/styles/index.scss
@@ -1,5 +1,36 @@
-@import "buttons", "fonts", "404", "ads", "account", "animations", "banners",
-  "caret", "commandline", "core", "inputs", "keymap", "login", "monkey", "nav",
-  "notifications", "popups", "profile", "scroll", "settings",
-  "account-settings", "leaderboards", "test", "loading", "friends",
-  "media-queries";
+// layer order
+@layer normalize; /* Normalize stuff */
+@layer theme, base, components, properties; /* Tailwind stuff */
+@layer vendor; /* Vendor files */
+@layer custom-styles; /* scss files */
+@layer hidden; /* custom hidden layer */
+@layer utilities; /* Tailwind again, make them override scss files */
+
+@layer hidden {
+  // custom layer to hide elements without using !important
+  // (as long as this layer is higher than custom-styles)
+  // this is to fix issues with tailwinds hidden class
+  // while still working for scss files
+  .hidden {
+    display: none;
+  }
+
+  // same for invisible
+  .invisible {
+    opacity: 0;
+    pointer-events: none;
+    visibility: hidden;
+  }
+}
+
+@layer custom-styles {
+  @import "buttons", "fonts", "404", "ads", "account", "animations", "banners",
+    "caret", "commandline", "core", "inputs", "keymap", "login", "monkey",
+    "nav", "notifications", "popups", "profile", "scroll", "settings",
+    "account-settings", "leaderboards", "test", "loading", "friends",
+    "media-queries";
+
+  .chartCanvas {
+    width: 100% !important;
+  }
+}
diff --git a/frontend/src/styles/media-queries.scss b/frontend/src/styles/media-queries.scss
@@ -72,7 +72,7 @@ body {
 
 @media (prefers-reduced-motion) {
   body:not(.ignore-reduced-motion)
-    *:not(.fa-spin, #backgroundLoader, .preloader) {
+    *:not(.fa-spin, .animate-\[loader\], .preloader) {
     animation: none !important;
     transition: none !important;
 
@@ -87,3 +87,9 @@ body {
     scroll-behavior: auto !important;
   }
 }
+
+@media (hover: none) and (pointer: coarse) {
+  #commandLineMobileButton {
+    display: grid !important;
+  }
+}
diff --git a/frontend/src/styles/tailwind.css b/frontend/src/styles/tailwind.css
@@ -0,0 +1,56 @@
+@import "tailwindcss";
+
+@theme {
+  --color-*: initial;
+  --color-bg: var(--bg-color);
+  --color-main: var(--main-color);
+  --color-caret: var(--caret-color);
+  --color-sub: var(--sub-color);
+  --color-sub-alt: var(--sub-alt-color);
+  --color-text: var(--text-color);
+  --color-error: var(--error-color);
+  --color-error-extra: var(--error-extra-color);
+  --color-colorful-error: var(--colorful-error-color);
+  --color-colorful-error-extra: var(--colorful-error-extra-color);
+
+  /* decide on rem or em */
-  /* decide on rem or em */
+  /* TODO: Decide whether to use rem or em for --spacing and apply the chosen unit consistently before enabling this variable. */
-  /* decide on rem or em */
+  /* TODO: Decide whether to use rem or em for --spacing and apply the chosen unit consistently before enabling this variable. */
+  --spacing: 0.25rem;
+
+  --breakpoint-*: initial;
+  --breakpoint-2xl: 1617px;
+  --breakpoint-xl: 1361px;
+  --breakpoint-lg: 1105px;
+  --breakpoint-md: 849px;
+  --breakpoint-sm: 721px;
+  --breakpoint-xs: 426px;
+  --breakpoint-xxs: 331px;
+
+  --default-transition-duration: 0.25s;
+  --duration-half: 0.125s;
+
+  @keyframes loader {
+    0% {
+      transform: translateX(-100%) scaleX(0);
+    }
+    50% {
+      transform: translateX(0) scaleX(1);
+    }
+    100% {
+      transform: translateX(100%) scaleX(0);
+    }
+  }
+}
+
+@layer utilities {
+  .rounded {
+    border-radius: var(--roundness);
+  }
+
+  .rounded-double {
+    border-radius: calc(var(--roundness) * 2);
+  }
+
+  .rounded-half {
+    border-radius: calc(var(--roundness) / 2);
+  }
+}
diff --git a/frontend/src/styles/vendor.scss b/frontend/src/styles/vendor.scss
@@ -1,4 +1,7 @@
-@import "normalize.css";
-@import "fontawesome-5";
-@import "slim-select/styles";
-@import "balloon-css/src/balloon";
+@import "normalize.css" layer(normalize);
+
+@layer vendor {
+  @import "fontawesome-5";
+  @import "slim-select/styles";
+  @import "balloon-css/src/balloon";
+}
diff --git a/frontend/src/ts/components/common/AnimatedModal.tsx b/frontend/src/ts/components/common/AnimatedModal.tsx
@@ -7,6 +7,7 @@ import {
   isModalOpen,
   isModalChained,
 } from "../../stores/modals";
+import { cn } from "../../utils/cn";
 
 type AnimationParams = {
   opacity?: number | [number, number];
@@ -35,7 +36,9 @@ type AnimatedModalProps = ParentProps<{
   onEscape?: (e: KeyboardEvent) => void;
   onBackdropClick?: (e: MouseEvent) => void;
 
-  class?: string;
+  title?: string;
+  modalClass?: string;
+  wrapperClass?: string;
 }>;
 
 const DEFAULT_ANIMATION_DURATION = 125;
@@ -256,11 +259,21 @@ export function AnimatedModal(props: AnimatedModalProps): JSXElement {
     <dialog
       id={`${props.id as string}Modal`}
       ref={dialogRef}
-      class={`modalWrapper hidden ${props.class ?? ""}`}
+      class={cn(
+        "fixed top-0 left-0 z-1000 m-0 grid h-full max-h-full w-full max-w-full place-items-center border-none bg-[rgba(0,0,0,0.5)] p-8 backdrop:bg-transparent",
+        props.wrapperClass,
+      )}
       onKeyDown={handleKeyDown}
       onMouseDown={handleBackdropClick}
     >
-      <div class="modal" ref={modalRef}>
+      <div
+        class={cn(
+          "rounded-double grid h-max max-h-full w-full max-w-md gap-4 overflow-auto bg-bg p-4 text-text ring-4 ring-sub-alt sm:p-8",
+          props.modalClass,
+        )}
+        ref={modalRef}
+      >
+        <div class="text-2xl text-sub">{props.title}</div>
         {props.children}
       </div>
     </dialog>

diff --git a/frontend/src/ts/components/common/Button.tsx b/frontend/src/ts/components/common/Button.tsx
@@ -4,6 +4,7 @@ import { Conditional } from "./Conditional";
 type BaseProps = {
   text?: string;
   icon?: string;
+  iconScale?: number;
   fixedWidthIcon?: boolean;
   class?: string;
   type?: "text" | "button";
@@ -30,6 +31,9 @@ export function Button(props: ButtonProps | AnchorProps): JSXElement {
       <Show when={props.icon !== undefined}>
         <i
           class={`icon ${props.icon}`}
+          style={{
+            "font-size": `${props.iconScale ?? 1}em`,
+          }}
           classList={{
             "fa-fw": props.text === undefined || props.fixedWidthIcon === true,
           }}

diff --git a/frontend/src/ts/components/common/ChartJs.tsx b/frontend/src/ts/components/common/ChartJs.tsx
@@ -63,5 +63,5 @@ export function ChartJs<T extends ChartType, TData = DefaultDataPoint<T>>(
     chart?.destroy();
   });
 
-  return <canvas ref={canvasRef}></canvas>;
+  return <canvas class="chartCanvas" ref={canvasRef}></canvas>;
 }
diff --git a/frontend/src/ts/components/common/LoaderBar.tsx b/frontend/src/ts/components/common/LoaderBar.tsx
@@ -15,5 +15,14 @@ export function LoaderBar(): JSX.Element {
     },
   });
 
-  return <div id="backgroundLoader" class="hidden" ref={ref}></div>;
+  return (
+    <div
+      class="pointer-events-none fixed top-0 z-9999 hidden h-1 w-full animate-[loader] bg-main"
+      style={{
+        "animation-duration": "2s",
+        "animation-iteration-count": "infinite",
+      }}
+      ref={ref}
+    ></div>
+  );
 }