Tailwind v4 migration + CSS-output CI gate (follow-up to #73)

.github/workflows/test.yml

@@ -49,6 +49,31 @@ jobs:
       - name: Run tests with coverage
         run: yarn test:coverage
 
+      - name: Build production bundle
+        run: yarn build
+        env:
+          VITE_BASE_URL: /
+
+      - name: Verify Tailwind utilities are emitted
+        # Regression gate for the 2026-05-17 black-map incident: dependabot bumped
+        # tailwindcss v3 -> v4, PostCSS silently dropped every utility, and the
+        # Konva stage collapsed to 0x0. Fail loudly if utilities are missing.
+        run: |
+          css=$(ls dist/assets/*.css 2>/dev/null | head -1)
+          if [ -z "$css" ]; then
+            echo "FAIL: no CSS bundle found in dist/assets/"
+            exit 1
+          fi
+          missing=0
+          for util in '\.w-full' '\.h-full' '\.flex' '\.text-center'; do
+            if ! grep -q "$util" "$css"; then
+              echo "FAIL: utility \"$util\" missing from $css"
+              missing=1
+            fi
+          done
+          [ "$missing" = "0" ] || exit 1
+          echo "OK: Tailwind utilities present in $css"
+
       - name: Upload coverage report
         if: matrix.node == '20'
         uses: actions/upload-artifact@v7

package.json

@@ -16,7 +16,6 @@
     "prepare": "simple-git-hooks"
   },
   "dependencies": {
-    "@material-tailwind/react": "^2.1.10",
     "axios": "^1.13.5",
     "konva": "^9.3.18",
     "localforage": "^1.10.0",
@@ -52,7 +51,8 @@
     "jsdom": "^29.1.1",
     "postcss": "^8.4.47",
     "simple-git-hooks": "^2.13.1",
-    "tailwindcss": "^3.4.12",
+    "tailwindcss": "^4.3.0",
+    "@tailwindcss/postcss": "^4.3.0",
     "typescript": "^6.0.3",
     "typescript-eslint": "^8.0.1",
     "vite": "^8.0.1",

postcss.config.js

@@ -1,6 +1,6 @@
 export default {
   plugins: {
-    tailwindcss: {},
+    '@tailwindcss/postcss': {},
     autoprefixer: {},
   },
 }

src/components/core/SideMenu.tsx

@@ -10,7 +10,7 @@ interface MenuItemInterface {
 
 function MenuItem(props: MenuItemInterface) {
   return (
-    <li className="items-center text-xl text-white font-bold mb-2 rounded hover:bg-gray-500 hover:shadow py-2">
+    <li className="items-center text-xl text-white font-bold mb-2 rounded-sm hover:bg-gray-500 hover:shadow-sm py-2">
       <Link to={props.path}>
         {<props.icon className="inline-block w-6 h-6 mr-2 -mt-2" />}
         {props.label}

src/components/pages/Home.tsx

@@ -1,12 +1,4 @@
 import PageTemplate from '../core/PageTemplate';
-import {
-  Card,
-  CardHeader,
-  CardBody,
-  CardFooter,
-  Typography,
-  Button,
-} from '@material-tailwind/react';
 
 enum CardStyle {
   Primary = '-primary',
@@ -34,21 +26,19 @@ export function HomeCard({
   const textColor = style === CardStyle.Primary ? 'text-primary' : 'text-info';
 
   return (
-    <Card
+    <div
       className={`mt-6 w-96 h-56 border-2 ${borderColor} p-5 rounded-lg ml-14 inline-block h-96 relative grow-0`}
     >
-      <CardHeader className={`relative font-bold ${textColor}`}>
-        {heading}
-      </CardHeader>
-      <CardBody className="relative pt-2">{children}</CardBody>
-      <CardFooter className="pt-10 absolute inset-x-5 bottom-8 ">
-        <a target="_blank" href={buttonUri}>
-          <Button className={` ${buttonColor} rounded p-2`}>
+      <div className={`relative font-bold ${textColor}`}>{heading}</div>
+      <div className="relative pt-2">{children}</div>
+      <div className="pt-10 absolute inset-x-5 bottom-8 ">
+        <a target="_blank" rel="noreferrer" href={buttonUri}>
+          <button className={` ${buttonColor} rounded-sm p-2`}>
             {buttonLabel}
-          </Button>
+          </button>
         </a>
-      </CardFooter>
-    </Card>
+      </div>
+    </div>
   );
 }
 
@@ -58,25 +48,25 @@ export function Home() {
       <PageTemplate>
         <h1 className="text-4xl text-center">Welcome to the War Commander</h1>
         <br />
-        <Typography className="text-center py-5">
+        <p className="text-center py-5">
           Welcome to the RogueTech Online, the asynchronous multiplayer map for
           RogueTech.
-        </Typography>
+        </p>
         <br />
-        <Typography className="text-center py-5">
+        <p className="text-center py-5">
           From here you can view stats for the various factions, see who
           controls the myriad of star systems within the Inner Sphere, view
           information on current events and learn how the system works.
-        </Typography>
+        </p>
         <br />
         <br />
         <h3 className="text-center text-2xl "> How to Participate</h3>
-        <Typography className="text-center py-10">
+        <p className="text-center py-10">
           To participate more than an observer on RogueTech Online you must be a
           member of the RogueWar discord (linked below). Once on the discord,
           you can register your career to gain access to the online shops, and
           become an active member of RTO.
-        </Typography>
+        </p>
         <br />
         <div className="flex flex-wrap">
           <HomeCard
@@ -85,62 +75,62 @@ export function Home() {
             buttonUri="https://discord.gg/JU8tuMG"
             buttonLabel="RogueWar Discord"
           >
-            <Typography>
+            <p>
               RogueTech Online has a dedicated discord where you can gather with
               fellow players of your factions and be notified of new online
               events as they go live, this is where you must go to participate
-            </Typography>
+            </p>
           </HomeCard>
           <HomeCard
             style={CardStyle.Primary}
             heading="Get RogueTech"
             buttonUri="https://discourse.modsinexile.com/t/rogue-tech/134"
             buttonLabel=" Go To Mods-In-Exile"
           >
-            <Typography className="card-text">
+            <p className="card-text">
               RogueTech can be found on Mods-In-Exile. RogueTech Online is an
               exclusive part of RogueTech.
-            </Typography>
+            </p>
           </HomeCard>
           <HomeCard
             style={CardStyle.Primary}
             heading="Need Support"
             buttonUri="https://discord.gg/93kxWQZ"
             buttonLabel="RT Discord"
           >
-            <Typography className="card-text">
+            <p className="card-text">
               RogueTech's primary discord server is where you can file tickets
               and get support with bugs or crashes. You can also chat with
               fellow RT players, share builds and ask for advice.
-            </Typography>
-            <Typography className="mt-10 font-semibold">
+            </p>
+            <p className="mt-10 font-semibold">
               Note: This is the only place where the RT crew will offer support.
-            </Typography>
+            </p>
           </HomeCard>
           <HomeCard
             style={CardStyle.Primary}
             heading="Praise the Wiki"
             buttonUri="https://roguetech.gamepedia.com"
             buttonLabel="Wiki"
           >
-            <Typography>
+            <p>
               RogueTech has a general Wiki full of helpful information. If you
               need to know how something works, or information that isn't here,
               try the wiki.
-            </Typography>
+            </p>
           </HomeCard>
           <HomeCard
             style={CardStyle.Primary}
             heading="Support RogueTech"
             buttonUri="https://ko-fi.com/roguetech28443"
             buttonLabel="Donate"
           >
-            <Typography>
+            <p>
               The RT crew do not expect to receive any compensation for our
               work. However if you would like to help keep our over-worked
               support staff caffeinated or the Urbie factories running you can
               donate here.
-            </Typography>
+            </p>
           </HomeCard>
         </div>
       </PageTemplate>

src/index.css

@@ -1,6 +1,5 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+@config "../tailwind.config.js";
 
 @layer base {
   :root {

tsconfig.app.tsbuildinfo

@@ -1 +1 @@
-{"root":["./src/App.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/components/GalaxyMap/gm.interactions.ts","./src/components/GalaxyMap/gm.selectors.ts","./src/components/GalaxyMap/gm.types.ts","./src/components/core/PageTemplate.tsx","./src/components/core/SideMenu.tsx","./src/components/helpers/ApiHelper.ts","./src/components/helpers/CapitalHelper.ts","./src/components/helpers/FactionHelper.ts","./src/components/helpers/NewTabHelper.ts","./src/components/helpers/RouteHelper.ts","./src/components/helpers/devStateInjector.ts","./src/components/helpers/index.ts","./src/components/hooks/useFiltering.ts","./src/components/hooks/useGalaxyViewport.ts","./src/components/hooks/usePinchZoom.ts","./src/components/hooks/useSettings.ts","./src/components/hooks/useTooltip.ts","./src/components/hooks/useWarmapAPI.ts","./src/components/hooks/types/ControlInfo.ts","./src/components/hooks/types/DisplayStarSystemType.ts","./src/components/hooks/types/FactionDataType.ts","./src/components/hooks/types/FactionType.ts","./src/components/hooks/types/Settings.ts","./src/components/hooks/types/StarSystemState.ts","./src/components/hooks/types/StarSystemType.ts","./src/components/hooks/types/StarSystemWithState.ts","./src/components/hooks/types/index.ts","./src/components/pages/Error.tsx","./src/components/pages/GalaxyMap.tsx","./src/components/pages/Home.tsx","./src/components/pages/ToS.tsx","./src/components/pages/index.ts","./src/components/ui/BottomFilterPanel.tsx","./src/components/ui/StarSystem.tsx"],"version":"5.9.3"}
+{"root":["./src/App.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/components/GalaxyMap/gm.interactions.ts","./src/components/GalaxyMap/gm.selectors.ts","./src/components/GalaxyMap/gm.types.ts","./src/components/core/PageTemplate.tsx","./src/components/core/SideMenu.tsx","./src/components/helpers/ApiHelper.ts","./src/components/helpers/CapitalHelper.ts","./src/components/helpers/FactionHelper.ts","./src/components/helpers/NewTabHelper.ts","./src/components/helpers/RouteHelper.ts","./src/components/helpers/devStateInjector.ts","./src/components/helpers/index.ts","./src/components/hooks/useFiltering.ts","./src/components/hooks/useGalaxyViewport.ts","./src/components/hooks/usePinchZoom.ts","./src/components/hooks/useSettings.ts","./src/components/hooks/useTooltip.ts","./src/components/hooks/useWarmapAPI.ts","./src/components/hooks/types/ControlInfo.ts","./src/components/hooks/types/DisplayStarSystemType.ts","./src/components/hooks/types/FactionDataType.ts","./src/components/hooks/types/FactionType.ts","./src/components/hooks/types/Settings.ts","./src/components/hooks/types/StarSystemState.ts","./src/components/hooks/types/StarSystemType.ts","./src/components/hooks/types/StarSystemWithState.ts","./src/components/hooks/types/index.ts","./src/components/pages/Error.tsx","./src/components/pages/GalaxyMap.helpers.ts","./src/components/pages/GalaxyMap.tsx","./src/components/pages/Home.tsx","./src/components/pages/ToS.tsx","./src/components/pages/index.ts","./src/components/ui/BottomFilterPanel.tsx","./src/components/ui/StarSystem.helpers.ts","./src/components/ui/StarSystem.tsx","./src/test/konvaMocks.tsx","./src/test/setup.ts"],"version":"6.0.3"}

tsconfig.node.tsbuildinfo

@@ -1 +1 @@
-{"root":["./vite.config.ts"],"version":"5.9.3"}
+{"root":["./vite.config.ts"],"version":"6.0.3"}