Migrate Tailwind CSS from v3 to v4

- Replace JS config (tailwind.config.js) with CSS @theme block in base.css
- Switch from PostCSS to @tailwindcss/vite plugin
- Convert all bg-opacity-*/border-opacity-* to slash syntax (e.g. bg-zinc-900/70)
- Add @custom-variant for mobile and ss variants
- Add @reference to Vue scoped styles using @apply
- Rename v3 utilities: rounded→rounded-sm, backdrop-blur-sm→backdrop-blur-xs,
  drop-shadow→drop-shadow-sm, rotate-[25deg]→rotate-25
- Delete obsolete tailwind.config.js and postcss.config.js
- Rename vite.config.js to .mjs for ESM compatibility

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

package.json

@@ -56,14 +56,13 @@
   "devDependencies": {
     "@dword-design/eslint-plugin-import-alias": "^8.1.3",
     "@eslint/js": "^9.39.2",
+    "@tailwindcss/vite": "^4.1.18",
     "@vitejs/plugin-vue": "^5.2.4",
-    "autoprefixer": "^10.4.12",
     "eslint": "^9.39.2",
     "eslint-plugin-jsdoc": "^62.5.5",
     "eslint-plugin-vue": "^10.8.0",
     "globals": "^17.3.0",
-    "postcss": "^8.4.16",
+    "tailwindcss": "^4.1.18",
-    "tailwindcss": "^3.1.8",
     "typescript": "^5.9.3",
     "vite": "^6.4.1",
     "vue-eslint-parser": "^10.4.0"

postcss.config.js

@@ -1,6 +0,0 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-};

src/assets/css/base.css

@@ -1,8 +1,51 @@
-@import url('./fonts.css');
+@import url('@/assets/css/fonts.css');
 
-@tailwind base;
+@import 'tailwindcss';
-@tailwind components;
+
-@tailwind utilities;
+@custom-variant mobile (&:is(body.is-mobile *));
+@custom-variant ss (&:is(body.for-screenshots *));
+
+@theme {
+  --color-splatoon-blue: #603bff;
+  --color-splatoon-purple: #af50ff;
+  --color-splatoon-yellow: #eaff3d;
+  --color-splatoon-green: #6af7ce;
+  --color-splatoon-orange: #ff9750;
+  --color-splatoon-red: #ff505e;
+  --color-splatoon-brown: #7f413f;
+
+  --color-splatoon-battle-regular: #19d719;
+  --color-splatoon-battle-ranked: #f54910;
+  --color-splatoon-battle-xmatch: #0fdb9b;
+  --color-splatoon-battle-league: #f02d7d;
+
+  --color-splatoon-salmonRun: #ff5600;
+  --color-splatoon-bigRun: #b322ff;
+  --color-splatoon-eggstraWork: #be8800;
+
+  --font-splatoon1: var(--font-family-s1);
+  --font-splatoon2: var(--font-family-s2);
+
+  --drop-shadow-ruleIcon: 1px 1px 0 rgb(0, 0, 0);
+}
+
+/*
+  The default border color has changed to `currentcolor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentcolor);
+  }
+}
 
 body {
   @apply text-zinc-100;

src/components/Debug/TimeOffsetSelector.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex justify-center text-xs">
-    <div class="flex space-x-2 bg-zinc-700 p-1 rounded">
+    <div class="flex space-x-2 bg-zinc-700 p-1 rounded-sm">
-      <div class="bg-zinc-500 rounded font-semibold px-1">
+      <div class="bg-zinc-500 rounded-sm font-semibold px-1">
         Time Offset
       </div>
 

src/components/ModalDialog.vue

@@ -10,7 +10,7 @@
         leave-from="opacity-100"
         leave-to="opacity-0"
       >
-        <div class="fixed inset-0 bg-zinc-900/80 transition-opacity backdrop-blur-sm" />
+        <div class="fixed inset-0 bg-zinc-900/80 transition-opacity backdrop-blur-xs" />
       </TransitionChild>
 
       <div class="fixed inset-0 z-20" :class="noScroll ? 'overflow-hidden' : 'overflow-y-auto'">

src/components/NavButtons.vue

@@ -19,18 +19,20 @@
 </template>
 
 <style scoped>
+@reference "@/assets/css/base.css";
+
 .router-link {
-  @apply text-zinc-300 px-4 py-1 bg-zinc-300 bg-opacity-20 rounded-full;
+  @apply text-zinc-300 px-4 py-1 bg-zinc-300/20 rounded-full;
 }
 
 .router-link:hover {
-  @apply text-zinc-50 bg-opacity-30;
+  @apply text-zinc-50 bg-zinc-300/30;
 }
 .router-link-active {
-  @apply text-zinc-100 bg-splatoon-blue bg-opacity-100;
+  @apply text-zinc-100 bg-splatoon-blue;
 }
 
 .router-link-active:hover {
-  @apply text-white bg-opacity-100;
+  @apply text-white;
 }
 </style>

src/components/ScheduleBox.vue

@@ -6,12 +6,12 @@
         <div class="font-splatoon1 lg:text-2xl xl:text-3xl text-shadow">
           {{ $t(type.name) }}
         </div>
-        <div v-if="type.badge" class="font-splatoon2 text-xs lg:text-sm xl:text-base bg-splatoon-blue rounded px-1 drop-shadow">
+        <div v-if="type.badge" class="font-splatoon2 text-xs lg:text-sm xl:text-base bg-splatoon-blue rounded-sm px-1 drop-shadow-sm">
           {{ $t(type.badge) }}
         </div>
       </div>
 
-      <div class="bg-zinc-900 bg-opacity-70 backdrop-blur-sm pt-2 pb-6 px-2 mx-1 rounded-lg space-y-2">
+      <div class="bg-zinc-900/70 backdrop-blur-xs pt-2 pb-6 px-2 mx-1 rounded-lg space-y-2">
         <div class="flex items-center justify-between font-splatoon2">
           <div class="flex items-center space-x-2 text-sm lg:text-lg">
             <template v-if="store.activeSchedule && store.activeSchedule.settings">
@@ -24,13 +24,13 @@
             </template>
 
             <template v-else>
-              <div class="w-32 bg-zinc-600 rounded animate-pulse">
+              <div class="w-32 bg-zinc-600 rounded-sm animate-pulse">
 &nbsp;
               </div>
             </template>
           </div>
 
-          <div v-if="store.activeSchedule" class="justify-end text-xs lg:text-sm bg-zinc-100 bg-opacity-80 rounded text-black px-2">
+          <div v-if="store.activeSchedule" class="justify-end text-xs lg:text-sm bg-zinc-100/80 rounded-sm text-black px-2">
             {{ $d(store.activeSchedule.startTime, 'time') }}
             &ndash;
             {{ $d(store.activeSchedule.endTime, 'time') }}
@@ -52,7 +52,7 @@
       </div>
 
       <div v-if="nextSchedule && nextSchedule.settings" class="mx-2 space-y-2">
-        <SquidTape class="font-splatoon2 text-sm drop-shadow -rotate-6 -mx-2">
+        <SquidTape class="font-splatoon2 text-sm drop-shadow-sm -rotate-6 -mx-2">
           <div class="px-2">
             {{ $t('times.next') }}
           </div>
@@ -62,8 +62,8 @@
       </div>
 
       <div class="text-center pt-2">
-        <button class="bg-zinc-300 bg-opacity-50 hover:bg-opacity-70 px-2 py-1 rounded-full font-splatoon2 text-shadow" @click="open = true">
+        <button class="bg-zinc-300/50 hover:bg-zinc-300/70 px-2 py-1 rounded-full font-splatoon2 text-shadow" @click="open = true">
-          <span class="inline-block rotate-[25deg] text-red">&#57445;</span>
+          <span class="inline-block rotate-25 text-red">&#57445;</span>
           {{ $t('schedule.all-upcoming') }}
         </button>
       </div>

src/components/ScheduleDialog.vue

@@ -8,7 +8,7 @@
             <div class="font-splatoon1 lg:text-2xl xl:text-3xl text-shadow">
               {{ $t(type.name) }}
             </div>
-            <div v-if="type.badge" class="font-splatoon2 text-xs lg:text-sm xl:text-base bg-splatoon-blue rounded px-1 drop-shadow">
+            <div v-if="type.badge" class="font-splatoon2 text-xs lg:text-sm xl:text-base bg-splatoon-blue rounded-sm px-1 drop-shadow-sm">
               {{ $t(type.badge) }}
             </div>
           </div>
@@ -22,7 +22,7 @@
         <div class="h-full overflow-y-auto pt-24 pb-8">
           <template v-for="{ title, schedules } in sections" :key="title">
             <div class="mt-6 mx-2 space-y-2 text-left">
-              <SquidTape class="font-splatoon2 text-sm drop-shadow -rotate-6 -mx-2">
+              <SquidTape class="font-splatoon2 text-sm drop-shadow-sm -rotate-6 -mx-2">
                 <div class="px-2">
                   {{ $t(title) }}
                 </div>

src/components/ScheduleRow.vue

@@ -21,7 +21,7 @@
         </div>
       </div>
     </div>
-    <div v-else class="sm:hidden bg-zinc-500 rounded animate-pulse w-32">
+    <div v-else class="sm:hidden bg-zinc-500 rounded-sm animate-pulse w-32">
       &nbsp;
     </div>
 
@@ -55,13 +55,13 @@
           </template>
 
           <template v-else>
-            <div class="text-xs lg:text-lg bg-zinc-500 rounded animate-pulse">
+            <div class="text-xs lg:text-lg bg-zinc-500 rounded-sm animate-pulse">
 &nbsp;
             </div>
-            <div class="text-sm mx-8 bg-zinc-500 rounded animate-pulse">
+            <div class="text-sm mx-8 bg-zinc-500 rounded-sm animate-pulse">
 &nbsp;
             </div>
-            <div class="text-sm mx-4 bg-zinc-500 rounded animate-pulse">
+            <div class="text-sm mx-4 bg-zinc-500 rounded-sm animate-pulse">
 &nbsp;
             </div>
           </template>

src/components/SplatfestBox.vue

@@ -7,7 +7,7 @@
       </div>
 
       <div class="flex justify-center mx-2">
-        <div class="font-splatoon2 text-zinc-200 text-center text-shadow text-sm lg:text-lg bg-zinc-700 px-4 py-1 rounded-full bg-opacity-50 backdrop-blur-sm">
+        <div class="font-splatoon2 text-zinc-200 text-center text-shadow text-sm lg:text-lg bg-zinc-700/50 px-4 py-1 rounded-full backdrop-blur-xs">
           {{ $t(`splatnet.festivals.${festival.__splatoon3ink_id}.title`, festival.title) }}
         </div>
       </div>

src/components/SplatfestMultiBox.vue

@@ -6,7 +6,7 @@
       </div>
       <template v-for="festival in festivals" :key="festival.id">
         <div class="flex justify-center mx-2">
-          <div class="font-splatoon2 text-zinc-200 text-center text-shadow text-sm lg:text-lg bg-zinc-700 px-4 py-1 rounded-full bg-opacity-50 backdrop-blur-sm">
+          <div class="font-splatoon2 text-zinc-200 text-center text-shadow text-sm lg:text-lg bg-zinc-700/50 px-4 py-1 rounded-full backdrop-blur-xs">
             {{ $t(`splatnet.festivals.${festival.__splatoon3ink_id}.title`, festival.title) }}
           </div>
         </div>

src/components/SplatfestResultsBox.vue

@@ -5,11 +5,11 @@
         {{ $t('festival.results.title') }}
       </div>
 
-      <div class="mx-2 px-1 bg-zinc-700 bg-opacity-50 backdrop-blur-sm rounded-lg">
+      <div class="mx-2 px-1 bg-zinc-700/50 backdrop-blur-xs rounded-lg">
         <div class="flex justify-center md:justify-center py-2">
           <div class="w-36 sm:mx-4 lg:-mx-1" />
           <template v-for="team in festival.teams" :key="team.id">
-            <div class="w-12 mx-2 sm:w-20 flex justify-center py-1 rounded" :style="`background-color: ${toRgba(team.color)};`">
+            <div class="w-12 mx-2 sm:w-20 flex justify-center py-1 rounded-sm" :style="`background-color: ${toRgba(team.color)};`">
               <img :src="team.image.url" class="w-6 h-6" />
             </div>
           </template>
@@ -21,7 +21,7 @@
               {{ $t(row.title) }}
             </div>
 
-            <div class="flex bg-zinc-700 bg-opacity-70 rounded-full py-1">
+            <div class="flex bg-zinc-700/70 rounded-full py-1">
               <div v-for="(result, i) in row.results" :key="i" class="w-16 lg:w-20 sm:mx-2">
                 <div :class="result.isTop ? 'text-splatoon-yellow' : 'text-zinc-300'">
                   {{ (result.ratio * 100).toFixed(2) }}%

src/components/Splatoon3Countdown.vue

@@ -67,6 +67,8 @@ function formatDate(date) {
 </script>
 
 <style scoped>
+@reference "@/assets/css/base.css";
+
 .bg-blue-pattern {
   @apply bg-splatoon-blue;
   background-image: url("@/assets/img/battle-bg-pattern-blue.jpg");

src/components/StageImage.vue

@@ -1,6 +1,6 @@
 <template>
   <button class="block relative" @click.prevent="open = true">
-    <div class="bg-zinc-700 aspect-[2/1] overflow-hidden" :class="imgClass">
+    <div class="bg-zinc-700 aspect-2/1 overflow-hidden" :class="imgClass">
       <img v-if="lowRes" :src="lowRes" />
       <div v-else class="bg-zinc-500 animate-pulse h-full" :class="imgClass">
 &nbsp;
@@ -17,7 +17,7 @@
       left-1/2
       -translate-x-1/2
       translate-y-1/2
-      overflow-ellipsis
+      text-ellipsis
       overflow-hidden
       max-w-[85%]
       whitespace-nowrap

src/components/TricolorBox.vue

@@ -6,12 +6,12 @@
         <div class="font-splatoon1 lg:text-2xl xl:text-3xl text-shadow">
           {{ $t(type.name) }}
         </div>
-        <div v-if="type.badge" class="font-splatoon2 text-xs lg:text-sm xl:text-base bg-splatoon-blue rounded px-1 drop-shadow">
+        <div v-if="type.badge" class="font-splatoon2 text-xs lg:text-sm xl:text-base bg-splatoon-blue rounded-sm px-1 drop-shadow-sm">
           {{ $t(type.badge) }}
         </div>
       </div>
 
-      <div class="bg-zinc-900 bg-opacity-70 backdrop-blur-sm pt-2 pb-6 px-2 mx-1 rounded-lg space-y-2">
+      <div class="bg-zinc-900/70 backdrop-blur-xs pt-2 pb-6 px-2 mx-1 rounded-lg space-y-2">
         <div class="flex items-center justify-between font-splatoon2">
           <div class="flex items-center space-x-2 text-sm lg:text-lg">
             <div>
@@ -27,7 +27,7 @@
             </div>
           </div>
 
-          <div v-if="tricolor.startTime && tricolor.endTime" class="justify-end text-xs lg:text-sm bg-zinc-100 bg-opacity-80 rounded text-black px-2">
+          <div v-if="tricolor.startTime && tricolor.endTime" class="justify-end text-xs lg:text-sm bg-zinc-100/80 rounded-sm text-black px-2">
             {{ $d(tricolor.startTime, 'dateTimeShort') }}
             &ndash;
             {{ $d(tricolor.endTime, 'dateTimeShort') }}

src/components/challenge/ChallengeScheduleBox.vue

@@ -13,7 +13,7 @@
           </div>
         </div>
 
-        <div class="bg-zinc-900 bg-opacity-70 backdrop-blur-sm pt-2 pb-1 px-2 mx-2 rounded-lg space-y-2">
+        <div class="bg-zinc-900/70 backdrop-blur-xs pt-2 pb-1 px-2 mx-2 rounded-lg space-y-2">
           <div class="flex items-center justify-between font-splatoon2">
             <div class="flex items-center space-x-2 text-sm lg:text-lg">
               <template v-if="event">
@@ -26,14 +26,14 @@
               </template>
 
               <template v-else>
-                <div class="w-32 bg-zinc-600 rounded animate-pulse">
+                <div class="w-32 bg-zinc-600 rounded-sm animate-pulse">
                   &nbsp;
                 </div>
               </template>
             </div>
 
             <div v-if="event.activeTimePeriod">
-              <SquidTape class="font-splatoon2 text-sm drop-shadow rotate-6">
+              <SquidTape class="font-splatoon2 text-sm drop-shadow-sm rotate-6">
                 <div class="px-2">
                   {{ $t('events.now_open') }}
                 </div>
@@ -66,7 +66,7 @@
 
             <!-- Current/future time periods -->
             <template v-if="event.currentTimePeriods?.length">
-              <SquidTape class="font-splatoon2 text-sm drop-shadow -rotate-6 -mx-2 mt-4">
+              <SquidTape class="font-splatoon2 text-sm drop-shadow-sm -rotate-6 -mx-2 mt-4">
                 <div class="px-2">
                   {{ event.activeTimePeriod ? $t('events.now') : $t('events.available') }}
                 </div>
@@ -81,7 +81,7 @@
           </div>
         </div>
 
-        <div class="font-splatoon2 mx-2 p-2 text-zinc-200 bg-zinc-900 bg-opacity-50 backdrop-blur-sm rounded-lg whitespace-pre-line">
+        <div class="font-splatoon2 mx-2 p-2 text-zinc-200 bg-zinc-900/50 backdrop-blur-xs rounded-lg whitespace-pre-line">
           {{ br2nl($t(`splatnet.events.${event.settings.leagueMatchEvent.id}.regulation`, event.settings.leagueMatchEvent.regulation)) }}
         </div>
       </div>

src/components/challenge/ChallengeScheduleRow.vue

@@ -9,7 +9,7 @@
       </div>
 
       <div v-if="isCurrent" class="flex justify-end w-full">
-        <div class="hidden sm:block text-xs bg-zinc-100 bg-opacity-80 rounded text-black px-2">
+        <div class="hidden sm:block text-xs bg-zinc-100/80 rounded-sm text-black px-2">
           <template v-if="isActive">
             {{ $t('time.remaining', { time: formatDurationFromNow(event.activeTimePeriod.endTime) }) }}
           </template>

src/components/gear/DailyDropGear.vue

@@ -7,7 +7,7 @@
         </div>
         <div class="flex flex-col items-center -space-y-2">
           <SquidTape
-            class="font-splatoon2 text-sm text-black rounded-sm -rotate-2 z-10"
+            class="font-splatoon2 text-sm text-black rounded-xs -rotate-2 z-10"
             bg="bg-splatoon-green"
             squid-bg="bg-black"
             border="border border-black"
@@ -36,7 +36,7 @@
           <GearCardHorizontal
             v-for="gear in gears"
             :key="gear.id"
-            class="bg-zinc-100 bg-opacity-20 backdrop-blur-sm border border-zinc-50 border-opacity-20 rounded-lg"
+            class="bg-zinc-100/20 backdrop-blur-xs border border-zinc-50/20 rounded-lg"
             :gear="gear"
           />
         </div>

src/components/gear/GearCard.vue

@@ -56,7 +56,7 @@
 
     <!-- Time left -->
     <div class="absolute top-1 left-6">
-      <div class="inline-block text-xs bg-zinc-200 bg-opacity-30 rounded px-1 py-px font-semibold">
+      <div class="inline-block text-xs bg-zinc-200/30 rounded-sm px-1 py-px font-semibold">
         {{ $t('time.left', { time: formatDurationHoursFromNow(props.gear.saleEndTime) }) }}
       </div>
     </div>

src/components/gear/GearCardHorizontal.vue

@@ -8,17 +8,17 @@
     <!-- Details -->
     <div class="grow min-w-0 flex flex-col justify-evenly space-y-2">
       <div class="flex">
-        <div class="inline-block text-xs bg-zinc-200 bg-opacity-30 rounded px-1 py-px font-semibold">
+        <div class="inline-block text-xs bg-zinc-200/30 rounded-sm px-1 py-px font-semibold">
           {{ $t('time.left', { time: formatDurationHoursFromNow(props.gear.saleEndTime) }) }}
         </div>
       </div>
 
       <div class="flex items-center space-x-2">
-        <div class="bg-white h-6 aspect-square rounded">
+        <div class="bg-white h-6 aspect-square rounded-sm">
           <img :src="gear.brand.image.url" :title="$t(`splatnet.brands.${gear.brand.id}.name`, gear.brand.name)" />
         </div>
 
-        <div class="flex-1 font-splatoon2 text-shadow overflow-hidden overflow-ellipsis whitespace-nowrap">
+        <div class="flex-1 font-splatoon2 text-shadow overflow-hidden text-ellipsis whitespace-nowrap">
           {{ $t(`splatnet.gear.${gear.__splatoon3ink_id}.name`, gear.name) }}
         </div>
       </div>
@@ -49,7 +49,7 @@
     <div v-if="false" class="absolute top-0 right-0 hidden mobile:block">
       <a :href="shopUrl">
         <SquidTape
-          class="font-splatoon2 text-sm text-black rounded-sm -rotate-2"
+          class="font-splatoon2 text-sm text-black rounded-xs -rotate-2"
           bg="bg-splatoon-yellow"
           squid-bg="bg-black"
           border="border border-black"
@@ -67,7 +67,7 @@
         <div v-if="false" class="hidden mobile:block">
           <a :href="shopUrl">
             <SquidTape
-              class="font-splatoon2 text-sm text-black rounded-sm -rotate-2"
+              class="font-splatoon2 text-sm text-black rounded-xs -rotate-2"
               bg="bg-splatoon-yellow"
               squid-bg="bg-black"
               border="border border-black"

src/components/gear/RegularGear.vue

@@ -15,7 +15,7 @@
     <div class="pb-24 lg:pb-36">
       <div class="text-center py-4">
         <SquidTape
-          class="font-splatoon1 text-2xl text-black rounded-sm -rotate-2 z-10"
+          class="font-splatoon1 text-2xl text-black rounded-xs -rotate-2 z-10"
           bg="bg-splatoon-orange"
           squid-bg="bg-black"
           border="border border-black"

src/components/salmonrun/ExpandedSalmonRunRow.vue

@@ -23,7 +23,7 @@
 
       <div
         v-if="schedule.isBigRun"
-        class="bg-zinc-800 bg-opacity-80 text-sm text-white rounded-lg px-2 border-2 border-splatoon-bigRun"
+        class="bg-zinc-800/80 text-sm text-white rounded-lg px-2 border-2 border-splatoon-bigRun"
       >
         <img src="@/assets/img/modes/coop.bigrun.svg" :title="$t('salmonrun.bigrun')" class="w-4 inline-block" />
         {{ $t('salmonrun.bigrun') }}
@@ -44,7 +44,7 @@
           {{ $t('salmonrun.weapons') }}
         </div>
 
-        <div class="bg-zinc-900 bg-opacity-30 rounded-full backdrop-blur-sm px-2">
+        <div class="bg-zinc-900/30 rounded-full backdrop-blur-xs px-2">
           <SalmonRunWeapons :weapons="schedule.settings.weapons" weapon-class="w-10 sm:w-14" />
         </div>
       </div>

src/components/salmonrun/SalmonRunBox.vue

@@ -16,7 +16,7 @@
         <!-- Main content -->
         <div class="md:w-2/3 mx-2 pb-2">
           <div v-if="activeSchedule" class="mb-6 space-y-2">
-            <SquidTape class="font-splatoon2 text-sm drop-shadow -rotate-6 -mx-2">
+            <SquidTape class="font-splatoon2 text-sm drop-shadow-sm -rotate-6 -mx-2">
               <div class="px-2">
                 {{ $t('times.now') }}
               </div>
@@ -25,8 +25,8 @@
             <ExpandedSalmonRunRow :schedule="activeSchedule" :eggstra="eggstra" />
           </div>
 
-          <div v-if="upcomingSchedules.length" class="py-1 bg-zinc-900 bg-opacity-70 rounded-lg backdrop-blur-sm">
+          <div v-if="upcomingSchedules.length" class="py-1 bg-zinc-900/70 rounded-lg backdrop-blur-xs">
-            <SquidTape class="font-splatoon2 text-sm drop-shadow -rotate-6 -mx-2">
+            <SquidTape class="font-splatoon2 text-sm drop-shadow-sm -rotate-6 -mx-2">
               <div class="px-2">
                 {{ $t('times.future') }}
               </div>

src/components/salmonrun/SalmonRunRow.vue

@@ -12,20 +12,20 @@
         {{ $d(schedule.endTime, 'dateTimeShort') }}
       </div>
 
-      <div class="hidden sm:block text-xs bg-zinc-100 bg-opacity-80 rounded text-black px-2">
+      <div class="hidden sm:block text-xs bg-zinc-100/80 rounded-sm text-black px-2">
         {{ $t('time.in', { time: formatDurationFromNow(schedule.startTime, true) }) }}
       </div>
     </div>
 
     <div class="flex items-center space-x-2">
-      <StageImage class="w-1/5" img-class="rounded" :stage="schedule.settings.coopStage" hide-label />
+      <StageImage class="w-1/5" img-class="rounded-sm" :stage="schedule.settings.coopStage" hide-label />
 
       <div class="flex-1 text-sm text-zinc-300 text-shadow">
         <KingSalmonid :schedule="schedule" class="inline-block align-middle drop-shadow-ruleIcon" size="w-5" />
 
         {{ $t(`splatnet.stages.${schedule.settings.coopStage.id}.name`, schedule.settings.coopStage.name) }}
 
-        <span v-if="schedule.isBigRun" class="text-xs inline-block bg-splatoon-bigRun bg-opacity-80 text-white rounded px-2">
+        <span v-if="schedule.isBigRun" class="text-xs inline-block bg-splatoon-bigRun/80 text-white rounded-sm px-2">
           {{ $t('salmonrun.bigrun') }}
         </span>
       </div>

src/components/screenshots/DailyDropGear.vue

@@ -4,7 +4,7 @@
       <div>
         <div class="flex flex-col items-center -mt-10 -space-y-2">
           <SquidTape
-            class="font-splatoon2 text-2xl text-black rounded-sm -rotate-2 z-10"
+            class="font-splatoon2 text-2xl text-black rounded-xs -rotate-2 z-10"
             bg="bg-splatoon-green"
             squid-bg="bg-black"
             border="border-2 border-black"

src/components/screenshots/RegularGear.vue

@@ -15,7 +15,7 @@
     <div class="pb-24 lg:pb-36">
       <div class="text-center pt-4">
         <SquidTape
-          class="font-splatoon1 text-4xl text-black rounded-sm -rotate-2 z-10"
+          class="font-splatoon1 text-4xl text-black rounded-xs -rotate-2 z-10"
           bg="bg-splatoon-orange"
           squid-bg="bg-black"
           border="border-2 border-black"

src/components/screenshots/ScreenshotScheduleBox.vue

@@ -21,7 +21,7 @@
           <div>
             <div v-if="type.badge" class="flex items-center">
               <img :src="type.img" class="h-8" />
-              <div v-if="type.badge" class="font-splatoon2 text-xl bg-splatoon-blue px-2 drop-shadow rounded">
+              <div v-if="type.badge" class="font-splatoon2 text-xl bg-splatoon-blue px-2 drop-shadow-sm rounded-sm">
                 {{ $t(type.badge) }}
               </div>
             </div>

src/components/screenshots/ScreenshotTricolorBox.vue

@@ -26,7 +26,7 @@
           <div>
             <div v-if="type.badge" class="flex items-center">
               <img :src="type.img" class="h-8" />
-              <div v-if="type.badge" class="font-splatoon2 text-xl bg-splatoon-blue px-2 drop-shadow rounded">
+              <div v-if="type.badge" class="font-splatoon2 text-xl bg-splatoon-blue px-2 drop-shadow-sm rounded-sm">
                 {{ $t(type.badge) }}
               </div>
             </div>

src/layouts/MainLayout.vue

@@ -67,6 +67,8 @@ const isDev = import.meta.env.DEV;
 </script>
 
 <style scoped>
+@reference "@/assets/css/base.css";
+
 .footer-links a span {
   @apply text-zinc-300;
 }

src/layouts/ScreenshotLayout.vue

@@ -4,7 +4,7 @@
 
     <div class="h-16" />
 
-    <div class="h-12 m-4 bg-black bg-opacity-50 backdrop-blur-sm rounded-full absolute bottom-0 inset-x-0">
+    <div class="h-12 m-4 bg-black/50 backdrop-blur-xs rounded-full absolute bottom-0 inset-x-0">
       <div class="flex justify-between h-full font-splatoon2 text-sm text-zinc-300">
         <div class="flex justify-start items-center space-x-6 ml-4">
           <div>
@@ -74,6 +74,8 @@ const isDev = import.meta.env.DEV;
 </script>
 
 <style scoped>
+@reference "@/assets/css/base.css";
+
 .footer-links a span {
   @apply text-zinc-300;
 }

src/views/AboutView.vue

@@ -98,6 +98,8 @@ import ProductContainer from '@/components/ProductContainer.vue';
 </script>
 
 <style scoped>
+@reference "@/assets/css/base.css";
+
 .bg-octoarrow {
   background-image: url('@/assets/img/octoarrow-transparent.png');
   background-size: 200px;

src/views/ChallengesView.vue

@@ -1,7 +1,7 @@
 <template>
   <MainLayout :title="$t('events.title')">
     <div class="grow flex items-center justify-center">
-      <div class="mx-4 md:mx-12 max-w-screen-2xl w-full my-6">
+      <div class="mx-4 md:mx-12 max-w-(--breakpoint-2xl) w-full my-6">
         <div v-if="store.currentSchedules?.length" class="flex flex-col lg:flex-row items-center justify-center gap-10">
           <div v-for="(event, i) in store.currentSchedules" :key="i" class="max-w-xl">
             <ChallengeScheduleBox

src/views/SocialsView.vue

@@ -96,6 +96,8 @@ const displaySocials = computed(() => {
 </script>
 
 <style scoped>
+@reference "@/assets/css/base.css";
+
 .bg-octoarrow {
   background-image: url('@/assets/img/camo-transparent-bg.png');
   background-size: 800px;

src/views/screenshots/ScreenshotsHomeView.vue

@@ -55,6 +55,8 @@
 </template>
 
 <style scoped>
+@reference "@/assets/css/base.css";
+
 a {
   @apply underline;
 }

tailwind.config.js

@@ -1,47 +0,0 @@
-const plugin = require('tailwindcss/plugin');
-
-module.exports = {
-  content: [
-    './index.html',
-    './src/**/*.{vue,js,mjs}',
-  ],
-  theme: {
-    extend: {
-      colors: {
-        splatoon: {
-          blue: '#603bff',
-          purple: '#af50ff',
-          yellow: '#eaff3d',
-          green: '#6af7ce',
-          orange: '#ff9750',
-          red: '#ff505e',
-          brown: '#7f413f',
-
-          battle: {
-            regular: '#19d719',
-            ranked: '#f54910',
-            xmatch: '#0fdb9b',
-            league: '#f02d7d',
-          },
-
-          salmonRun: '#ff5600',
-          bigRun: '#b322ff',
-          eggstraWork: '#be8800',
-        },
-      },
-      fontFamily: {
-        splatoon1: 'var(--font-family-s1)',
-        splatoon2: 'var(--font-family-s2)',
-      },
-      dropShadow: {
-        'ruleIcon': '1px 1px 0 rgb(0,0,0)',
-      },
-    },
-  },
-  plugins: [
-    plugin(function({ addVariant }) {
-      addVariant('mobile', 'body.is-mobile &');
-      addVariant('ss', 'body.for-screenshots &');
-    }),
-  ],
-};

vite.config.mjs

@@ -3,6 +3,7 @@ import { fileURLToPath, URL } from 'url';
 
 import { defineConfig } from 'vite';
 import vue from '@vitejs/plugin-vue';
+import tailwindcss from '@tailwindcss/vite';
 import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite';
 
 const redirectToDist = [
@@ -14,6 +15,7 @@ const redirectToDist = [
 export default defineConfig({
   plugins: [
     vue(),
+    tailwindcss(),
     VueI18nPlugin({
       include: resolve(__dirname, './src/assets/i18n/*.json'),
     }),