refactor(ui): migrate tailwindcss v3 to v4 (#2735)

## Description:

migrate tailwindcss v3 to v4

## Please complete the following:

- [X] I have added screenshots for all UI updates
- [X] I process any text displayed to the user through translateText()
and I've added it to the en.json file
- [X] I have added relevant tests to the test directory
- [X] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced

## Please put your Discord username so you can be contacted if a bug or
regression is found:

wraith4081

---------

Co-authored-by: iamlewis <lewismmmm@gmail.com>
Co-authored-by: Ryan <7389646+ryanbarlow97@users.noreply.github.com>

src/client/TerritoryPatternsModal.ts

@@ -140,10 +140,7 @@ export class TerritoryPatternsModal extends LitElement {
             ? this.renderMySkinsButton()
             : this.renderNotLoggedInWarning()}
         </div>
-        <div
-          class="flex flex-wrap gap-4 p-2"
-          style="justify-content: center; align-items: flex-start;"
-        >
+        <div class="flex flex-wrap gap-4 p-2 justify-center items-start">
           ${this.affiliateCode === null
             ? html`
                 <pattern-button
@@ -193,8 +190,8 @@ export class TerritoryPatternsModal extends LitElement {
         ${hexCodes.map(
           (hexCode) => html`
             <div
-              class="w-12 h-12 rounded-lg border-2 border-white/30 cursor-pointer transition-all duration-200 hover:scale-110 hover:shadow-lg"
-              style="background-color: ${hexCode};"
+              class="w-12 h-12 rounded-lg border-2 border-white/30 bg-(--bg) cursor-pointer transition-all duration-200 hover:scale-110 hover:shadow-lg"
+              style="--bg: ${hexCode};"
               title="${hexCode}"
               @click=${() => this.selectColor(hexCode)}
             ></div>
@@ -267,8 +264,8 @@ export class TerritoryPatternsModal extends LitElement {
   ): TemplateResult {
     return html`
       <div
-        class="rounded"
-        style="width: ${width}px; height: ${height}px; background-color: ${hexCode};"
+        class="rounded-sm size-(--size) bg-(--bg)"
+        style="--size: ${width}px; --bg: ${hexCode};"
       ></div>
     `;
   }