fixes around daisyUI upgrade (#74)

Yesterday I [upgraded
daisyUI](https://github.com/stats-organization/github-stats-extended/pull/69)
from 2.x to 5.x. That changed the visuals of a few components. This PR
fixes this. Part of the fix is modernizing our tailwind setup.

apps/frontend/package.json

@@ -5,6 +5,7 @@
   "type": "module",
   "dependencies": {
     "@reduxjs/toolkit": "2.11.2",
+    "@tailwindcss/vite": "4.1.18",
     "axios": "^1",
     "axios-cache-interceptor": "^1",
     "daisyui": "5.5.17",
@@ -27,10 +28,8 @@
     "@types/react-dom": "18.3.7",
     "@types/uuid": "9.0.8",
     "@vitejs/plugin-react-swc": "4.2.2",
-    "autoprefixer": "^10.4.24",
     "clsx": "2.1.1",
-    "postcss": "^8.4.31",
-    "tailwindcss": "^3.3.5",
+    "tailwindcss": "4.1.18",
     "vite": "catalog:default",
     "vite-plugin-node-polyfills": "0.25.0",
     "vite-plugin-string-replace": "1.1.5",

apps/frontend/postcss.config.js

@@ -1,6 +0,0 @@
-export default {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-};

apps/frontend/src/components/Generic/Checkbox.tsx

@@ -19,7 +19,7 @@ export function Checkbox({
         type="checkbox"
         disabled={disabled}
         checked={checked}
-        className="checkbox mr-2"
+        className="checkbox bg-white text-[#18181b] mr-2"
         onChange={() => {
           onCheckedChange(!checked);
         }}

apps/frontend/src/components/Generic/Select.tsx

@@ -28,7 +28,7 @@ export function Select({
   return (
     <select
       className={clsx(
-        "text-gray-700 bg-white select select-sm w-40 rounded-sm mt-4",
+        "text-gray-700 text-base bg-white select select-sm w-40 rounded-sm mt-4",
         className,
       )}
       value={selectedOption.value}
@@ -40,6 +40,7 @@ export function Select({
       {options.map((option) => (
         <option
           key={option.value}
+          value={option.value}
           disabled={option.disabled}
           className={clsx({
             "bg-blue-200": option.value === selectedOption.value,

apps/frontend/src/components/Home/NumericSection.tsx

@@ -61,7 +61,7 @@ export function NumericSection({
       <p>{description}</p>
       <input
         type="number"
-        className="border border-gray-300 rounded px-2 py-1 mt-2 w-1/4"
+        className="border border-gray-300 bg-white rounded px-2 py-1 mt-2 w-1/4"
         value={internalValue ?? ""}
         onChange={(e) => {
           setInternalValue(e.target.value);

apps/frontend/src/components/Home/TextSection.tsx

@@ -56,7 +56,7 @@ export function TextSection({
         type="text"
         className={clsx(
           "border border-gray-300 rounded px-2 py-1 mt-2 w-3/4 min-w-48 max-w-xl",
-          { "cursor-not-allowed": disabled },
+          { "cursor-not-allowed bg-gray-100": disabled, "bg-white": !disabled },
         )}
         value={internalValue}
         onChange={(e) => {

apps/frontend/src/index.css

@@ -1,7 +1,6 @@
 /* ./src/index.css */
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+@plugin "daisyui";
 
 body {
   margin: 0;
@@ -9,3 +8,7 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+
+button {
+  cursor: pointer;
+}

apps/frontend/tailwind.config.js

@@ -1,22 +0,0 @@
-import daisyui from "daisyui";
-
-/** @type {import('tailwindcss').Config} */
-export default {
-  content: ["./src/**/*.{js,jsx,ts,tsx}"],
-  theme: {
-    screens: {
-      sm: "640px",
-      md: "768px",
-      lg: "1024px",
-      xl: "1280px",
-      "2xl": "1536px",
-      "3xl": "1792px",
-    },
-    extend: {
-      fontFamily: {
-        typist: ["Playfair Display SC", "Courier New"],
-      },
-    },
-  },
-  plugins: [daisyui],
-};

apps/frontend/vite.config.ts

@@ -1,5 +1,6 @@
 import path from "node:path";
 
+import tailwindcss from "@tailwindcss/vite";
 import react from "@vitejs/plugin-react-swc";
 import { nodePolyfills } from "vite-plugin-node-polyfills";
 import StringReplace from "vite-plugin-string-replace";
@@ -30,6 +31,7 @@ export default defineConfig({
     }),
 
     react(),
+    tailwindcss(),
 
     /**
      * mock pg (postgres) package in the browser to avoid runtime errors