From 24a0451bdc541c5bad1a5b4aaa0b3fdf5a141688 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Birger=20J=2E=20Nord=C3=B8lum?= <contact@mindtooth.no>
Date: Sat, 12 Aug 2023 12:28:20 +0200
Subject: [PATCH] Add TailwindCSS plugin for Prettier (#458)

---
 .prettierrc.js                   |  4 ---
 .eslintrc.js => eslint.config.js |  6 +++-
 package.json                     |  2 ++
 pnpm-lock.yaml                   | 58 ++++++++++++++++++++++++++++++++
 postcss.config.js                |  6 +++-
 prettier.config.js               |  8 +++++
 src/community/index.html         | 30 ++++++++---------
 src/index.html                   | 12 +++----
 src/partials/header.html         | 22 ++++++------
 src/partials/octocat.html        |  2 +-
 src/resources/index.html         | 22 ++++++------
 src/style.css                    | 14 ++++----
 src/themes/index.html            | 28 +++++++--------
 tailwind.config.js               |  5 ++-
 vite.config.js                   | 10 ++++--
 15 files changed, 154 insertions(+), 75 deletions(-)
 delete mode 100644 .prettierrc.js
 rename .eslintrc.js => eslint.config.js (81%)
 create mode 100644 prettier.config.js

diff --git a/.prettierrc.js b/.prettierrc.js
deleted file mode 100644
index c204ada6..00000000
--- a/.prettierrc.js
+++ /dev/null
@@ -1,4 +0,0 @@
-// Prettier Config
-module.exports = {
-  plugins: ["prettier-plugin-packagejson"],
-};
diff --git a/.eslintrc.js b/eslint.config.js
similarity index 81%
rename from .eslintrc.js
rename to eslint.config.js
index 8f6ac18a..1706f01f 100644
--- a/.eslintrc.js
+++ b/eslint.config.js
@@ -1,4 +1,6 @@
-module.exports = {
+// ESLint Config
+
+const config = {
   env: {
     browser: true,
     node: true,
@@ -14,3 +16,5 @@ module.exports = {
     "no-unused-vars": "warn",
   },
 };
+
+export default config;
diff --git a/package.json b/package.json
index 9fa18df3..b12f1431 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
   },
   "license": "MIT",
   "author": "Srcery Team",
+  "type": "module",
   "scripts": {
     "build": "vite build --emptyOutDir",
     "clean": "rm -f src/github.json",
@@ -34,6 +35,7 @@
     "postcss": "^8.4.27",
     "prettier": "^3.0.1",
     "prettier-plugin-packagejson": "^2.4.5",
+    "prettier-plugin-tailwindcss": "^0.5.2",
     "tailwindcss": "^3.3.3",
     "vite": "^4.3.4",
     "vite-plugin-handlebars": "^1.6.0"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e1f35e13..5af6918a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -49,6 +49,9 @@ devDependencies:
   prettier-plugin-packagejson:
     specifier: ^2.4.5
     version: 2.4.5(prettier@3.0.1)
+  prettier-plugin-tailwindcss:
+    specifier: ^0.5.2
+    version: 0.5.2(prettier@3.0.1)
   tailwindcss:
     specifier: ^3.3.3
     version: 3.3.3
@@ -2135,6 +2138,61 @@ packages:
       synckit: 0.8.5
     dev: true
 
+  /prettier-plugin-tailwindcss@0.5.2(prettier@3.0.1):
+    resolution: {integrity: sha512-i4swJk4f8YWK99BRPX3DdDNwMr6U1X8y9rvxGeX5zf090+SsHpPSVjgOb041Hh6/nZJWPi/JYno9UgBDm+/RxA==}
+    engines: {node: '>=14.21.3'}
+    peerDependencies:
+      '@ianvs/prettier-plugin-sort-imports': '*'
+      '@prettier/plugin-pug': '*'
+      '@shopify/prettier-plugin-liquid': '*'
+      '@shufo/prettier-plugin-blade': '*'
+      '@trivago/prettier-plugin-sort-imports': '*'
+      prettier: ^3.0
+      prettier-plugin-astro: '*'
+      prettier-plugin-css-order: '*'
+      prettier-plugin-import-sort: '*'
+      prettier-plugin-jsdoc: '*'
+      prettier-plugin-marko: '*'
+      prettier-plugin-organize-attributes: '*'
+      prettier-plugin-organize-imports: '*'
+      prettier-plugin-style-order: '*'
+      prettier-plugin-svelte: '*'
+      prettier-plugin-twig-melody: '*'
+    peerDependenciesMeta:
+      '@ianvs/prettier-plugin-sort-imports':
+        optional: true
+      '@prettier/plugin-pug':
+        optional: true
+      '@shopify/prettier-plugin-liquid':
+        optional: true
+      '@shufo/prettier-plugin-blade':
+        optional: true
+      '@trivago/prettier-plugin-sort-imports':
+        optional: true
+      prettier-plugin-astro:
+        optional: true
+      prettier-plugin-css-order:
+        optional: true
+      prettier-plugin-import-sort:
+        optional: true
+      prettier-plugin-jsdoc:
+        optional: true
+      prettier-plugin-marko:
+        optional: true
+      prettier-plugin-organize-attributes:
+        optional: true
+      prettier-plugin-organize-imports:
+        optional: true
+      prettier-plugin-style-order:
+        optional: true
+      prettier-plugin-svelte:
+        optional: true
+      prettier-plugin-twig-melody:
+        optional: true
+    dependencies:
+      prettier: 3.0.1
+    dev: true
+
   /prettier@3.0.1:
     resolution: {integrity: sha512-fcOWSnnpCrovBsmFZIGIy9UqK2FaI7Hqax+DIO0A9UxeVoY4iweyaFjS5TavZN97Hfehph0nhsZnjlVKzEQSrQ==}
     engines: {node: '>=14'}
diff --git a/postcss.config.js b/postcss.config.js
index 37b4d628..0bd271c1 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -1,7 +1,11 @@
 // PostCSS Config
-module.exports = {
+
+/** @type {import('postcss-load-config').Config} */
+const config = {
   plugins: {
     tailwindcss: {},
     autoprefixer: {},
   },
 };
+
+export default config;
diff --git a/prettier.config.js b/prettier.config.js
new file mode 100644
index 00000000..3223b576
--- /dev/null
+++ b/prettier.config.js
@@ -0,0 +1,8 @@
+// Prettier Config
+
+/** @type {import("prettier").Config} */
+const config = {
+  plugins: ["prettier-plugin-packagejson", "prettier-plugin-tailwindcss"],
+};
+
+export default config;
diff --git a/src/community/index.html b/src/community/index.html
index 4abac0f0..4016d005 100644
--- a/src/community/index.html
+++ b/src/community/index.html
@@ -11,21 +11,21 @@
     <title>Srcery Theme - Community activities and communications</title>
   </head>
   <body
-    class="font-iosevka bg-black text-bright_white flex justify-center p-4 w-100"
+    class="w-100 flex justify-center bg-black p-4 font-iosevka text-bright_white"
   >
     {{> octocat }}
     <main
       x-data="state"
-      class="flex items-center flex-col grow sm:grow-0 width-[448px] sm:w-[780px] min-w-0"
+      class="width-[448px] flex min-w-0 grow flex-col items-center sm:w-[780px] sm:grow-0"
     >
       {{> header community=true }}
       <section class="w-full">
         <div class="mb-8">
-          <h2 class="text-xl mb-3 text-center sm:text-left uppercase">
+          <h2 class="mb-3 text-center text-xl uppercase sm:text-left">
             <!-- <div class="svg w-8 mr-2" x-html="icon"></div> -->
             Discord
           </h2>
-          <p class="text-justify mb-3">
+          <p class="mb-3 text-justify">
             We run a Discord server for those interested. You're welcome to join
             us there if you have any burning questions or just wanna say hi.
           </p>
@@ -41,10 +41,10 @@ <h2 class="text-xl mb-3 text-center sm:text-left uppercase">
         </div>
 
         <div class="mb-8">
-          <h2 class="text-xl mb-3 text-center sm:text-left uppercase">
+          <h2 class="mb-3 text-center text-xl uppercase sm:text-left">
             Merchandise
           </h2>
-          <p class="text-justify mb-3">
+          <p class="mb-3 text-justify">
             Get our brand new merchandise featuring the Srcery color scheme!
             We're not making any profit from the sales, so you are instead
             showing your support by wearing and using the merch. Thank you for
@@ -57,7 +57,7 @@ <h2 class="text-xl mb-3 text-center sm:text-left uppercase">
           </div>
         </div>
         <div class="mb-8">
-          <h2 class="text-xl mb-3 text-center sm:text-left uppercase">
+          <h2 class="mb-3 text-center text-xl uppercase sm:text-left">
             Community
           </h2>
           <p class="text-justify">
@@ -67,22 +67,22 @@ <h2 class="text-xl mb-3 text-center sm:text-left uppercase">
           </p>
         </div>
         <div class="mb-8">
-          <h2 class="text-xl mb-4 text-center sm:text-left uppercase">
+          <h2 class="mb-4 text-center text-xl uppercase sm:text-left">
             Core team
           </h2>
           <div
-            class="grid grid-cols-2 justify-items-center sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-5"
+            class="grid grid-cols-2 justify-items-center gap-5 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5"
           >
             <template x-for="user in github.members">
               <a
                 :href="user.html_url"
                 target="_blank"
-                class="flex flex-col items-center border-2 border-bright_black hover:border-bright_white hover:cursor-pointer p-4"
+                class="flex flex-col items-center border-2 border-bright_black p-4 hover:cursor-pointer hover:border-bright_white"
               >
                 <img
                   :src="user.avatar_url"
                   alt="github user avatar"
-                  class="p-1 border-4 border-bright_black w-1/2 rounded-full mb-2"
+                  class="mb-2 w-1/2 rounded-full border-4 border-bright_black p-1"
                 />
                 <div x-text="user.login"></div>
               </a>
@@ -90,22 +90,22 @@ <h2 class="text-xl mb-4 text-center sm:text-left uppercase">
           </div>
         </div>
         <div class="mb-8">
-          <h2 class="text-xl mb-4 text-center sm:text-left uppercase">
+          <h2 class="mb-4 text-center text-xl uppercase sm:text-left">
             Contributors
           </h2>
           <div
-            class="grid grid-cols-2 justify-items-center sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-5"
+            class="grid grid-cols-2 justify-items-center gap-5 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5"
           >
             <template x-for="user in github.contributors">
               <a
                 :href="user.html_url"
                 target="_blank"
-                class="flex break-all flex-col items-center border-2 border-bright_black hover:border-bright_white hover:cursor-pointer p-4"
+                class="flex flex-col items-center break-all border-2 border-bright_black p-4 hover:cursor-pointer hover:border-bright_white"
               >
                 <img
                   :src="user.avatar_url"
                   alt="github user avatar"
-                  class="p-1 w-1/2 border-4 border-bright_black rounded-full mb-2"
+                  class="mb-2 w-1/2 rounded-full border-4 border-bright_black p-1"
                 />
                 <div class="break-word" x-text="user.login"></div>
               </a>
diff --git a/src/index.html b/src/index.html
index 5217053e..8bfd7214 100644
--- a/src/index.html
+++ b/src/index.html
@@ -12,16 +12,16 @@
     </title>
   </head>
   <body
-    class="font-iosevka bg-black text-bright_white flex justify-center p-4 w-100"
+    class="w-100 flex justify-center bg-black p-4 font-iosevka text-bright_white"
   >
     {{> octocat }}
     <main
       x-data="state"
-      class="flex items-center flex-col grow sm:grow-0 width-[448px] sm:w-[780px] min-w-0"
+      class="width-[448px] flex min-w-0 grow flex-col items-center sm:w-[780px] sm:grow-0"
     >
       {{> header }}
       <section class="w-full">
-        <div class="text-justify mb-8">
+        <div class="mb-8 text-justify">
           <p class="mb-4">
             Srcery is dark syntax highlighting color scheme with clearly defined
             contrasting colors and a slightly earthy tone.
@@ -35,7 +35,7 @@
           </p>
         </div>
         <div class="w-full">
-          <h2 class="uppercase mb-4">Preview</h2>
+          <h2 class="mb-4 uppercase">Preview</h2>
           <p class="mb-8">
             Here's a few
             <a class="link" href="https://rosettacode.org/wiki/Rosetta_Code"
@@ -48,7 +48,7 @@ <h2 class="uppercase mb-4">Preview</h2>
             for details about a specific editor/IDE.
           </p>
           <ul
-            class="flex overflow-x-auto overflow-y-hidden text-center border-bright_black"
+            class="flex overflow-x-auto overflow-y-hidden border-bright_black text-center"
           >
             <template x-for="(value, key) in languages">
               <li class="flex flex-1">
@@ -70,7 +70,7 @@ <h2 class="uppercase mb-4">Preview</h2>
             </template>
           </ul>
           <div
-            class="border-b-2 border-x-2 border-bright_black overflow-x-auto"
+            class="overflow-x-auto border-x-2 border-b-2 border-bright_black"
           >
             <pre id="preview" class="flex p-4">
                 <code class="font-iosevka" x-html="languages[activeTab].html">
diff --git a/src/partials/header.html b/src/partials/header.html
index b369a07a..f4762750 100644
--- a/src/partials/header.html
+++ b/src/partials/header.html
@@ -1,34 +1,34 @@
-<header class="min-w-auto sm:min-w-[640px] sm:max-w-[640px] mb-8">
+<header class="min-w-auto mb-8 sm:min-w-[640px] sm:max-w-[640px]">
   <a
     href="/"
-    class="min-h-auto pt-2 sm:pt-0 sm:min-h-[546px] flex flex-col items-center mb-2"
+    class="min-h-auto mb-2 flex flex-col items-center pt-2 sm:min-h-[546px] sm:pt-0"
   >
     <div
-      class="flex sm:hidden p-5 rounded-full border-2 border-bright_black justify-center items-center"
+      class="flex items-center justify-center rounded-full border-2 border-bright_black p-5 sm:hidden"
     >
       <img
         alt="Srcery glyph"
         src="/svg/glyph.svg"
-        class="glyph w-logo h-logo"
+        class="glyph h-logo w-logo"
       />
     </div>
     <div
-      class="bg-triangle bg-no-repeat min-h-[546px] pt-[30%] hidden sm:flex min-w-full bg-center align-center justify-center"
+      class="align-center hidden min-h-[546px] min-w-full justify-center bg-triangle bg-center bg-no-repeat pt-[30%] sm:flex"
     >
       <img
         alt="Srcery glyph"
         src="/svg/glyph.svg"
-        class="glyph w-logo h-logo"
+        class="glyph h-logo w-logo"
       />
     </div>
-    <div class="mt-4 sm:mt-[-18%] flex items-center">
-      <div class="flex mr-2">
+    <div class="mt-4 flex items-center sm:mt-[-18%]">
+      <div class="mr-2 flex">
         <div class="dot bg-xgray2"></div>
         <div class="dot bg-xgray7"></div>
         <div class="dot bg-xgray10"></div>
       </div>
-      <h1 class="uppercase text-6xl">Srcery</h1>
-      <div class="flex ml-2">
+      <h1 class="text-6xl uppercase">Srcery</h1>
+      <div class="ml-2 flex">
         <div class="dot bg-xgray10"></div>
         <div class="dot bg-xgray7"></div>
         <div class="dot bg-xgray2"></div>
@@ -36,7 +36,7 @@ <h1 class="uppercase text-6xl">Srcery</h1>
     </div>
   </a>
   <nav
-    class="flex justify-center max-w-[384px] sm:max-w-full flex grow justify-between"
+    class="flex flex max-w-[384px] grow justify-center justify-between sm:max-w-full"
   >
     <span class="w-full text-left">
       <a href="/themes/" class="link uppercase {{#if themes}}sel{{/if}}"
diff --git a/src/partials/octocat.html b/src/partials/octocat.html
index 26bb7b77..5282a56f 100644
--- a/src/partials/octocat.html
+++ b/src/partials/octocat.html
@@ -5,7 +5,7 @@
     aria-label="View source on Github"
   >
     <svg
-      class="text-bright_white fill-hard_black"
+      class="fill-hard_black text-bright_white"
       viewBox="0 0 250 250"
       aria-hidden="true"
     >
diff --git a/src/resources/index.html b/src/resources/index.html
index 3ec83048..8e471b30 100644
--- a/src/resources/index.html
+++ b/src/resources/index.html
@@ -12,17 +12,17 @@
     <title>Srcery Theme - Various resources</title>
   </head>
   <body
-    class="font-iosevka bg-black text-bright_white flex justify-center p-4 w-100"
+    class="w-100 flex justify-center bg-black p-4 font-iosevka text-bright_white"
   >
     {{> octocat }}
     <main
       x-data="state"
-      class="flex items-center flex-col grow sm:grow-0 width-[448px] sm:w-[780px] min-w-0"
+      class="width-[448px] flex min-w-0 grow flex-col items-center sm:w-[780px] sm:grow-0"
     >
       {{> header resources=true }}
       <section class="w-full">
         <div class="mb-8">
-          <h2 class="text-xl mb-3 text-center sm:text-left uppercase">
+          <h2 class="mb-3 text-center text-xl uppercase sm:text-left">
             Resources
           </h2>
           <p class="text-justify">
@@ -32,7 +32,7 @@ <h2 class="text-xl mb-3 text-center sm:text-left uppercase">
           </p>
         </div>
         <div class="mb-8">
-          <h3 class="mb-3 text-center sm:text-left uppercase">Palette</h3>
+          <h3 class="mb-3 text-center uppercase sm:text-left">Palette</h3>
           <p class="mb-4" x-show="version">
             <span class="">Latest version:</span>
             <a
@@ -73,7 +73,7 @@ <h3 class="mb-3 text-center sm:text-left uppercase">Palette</h3>
               <div class="list-dot"></div>
               <a
                 target="_blank"
-                class="flex items-center link"
+                class="link flex items-center"
                 href="https://www.npmjs.com/package/@srcery-colors/srcery-palette"
               >
                 <div class="svg mr-2 w-8" x-html="icons.npm"></div>
@@ -88,13 +88,13 @@ <h3 class="mb-3 text-center sm:text-left uppercase">Palette</h3>
           </ul>
         </div>
         <div class="mb-8">
-          <h2 class="text-xl mb-4 text-center sm:text-left uppercase">
+          <h2 class="mb-4 text-center text-xl uppercase sm:text-left">
             Web assets
           </h2>
           <p class="mb-4">
             Aside from the palette itself, here are some useful web assets.
           </p>
-          <ul class="list-disc list-inside">
+          <ul class="list-inside list-disc">
             <li class="mb-2">
               <a
                 target="_blank"
@@ -142,7 +142,7 @@ <h2 class="text-xl mb-4 text-center sm:text-left uppercase">
           </ul>
         </div>
         <div class="mb-8">
-          <h2 class="text-xl mb-4 text-center sm:text-left uppercase">
+          <h2 class="mb-4 text-center text-xl uppercase sm:text-left">
             Graphic assets
           </h2>
           <p class="mb-4">
@@ -154,7 +154,7 @@ <h2 class="text-xl mb-4 text-center sm:text-left uppercase">
             If you are looking for icons, logo, screenshots, etcetera, this is
             the place.
           </p>
-          <ul class="list-disc list-inside">
+          <ul class="list-inside list-disc">
             <li class="mb-2">
               <a
                 target="_blank"
@@ -167,14 +167,14 @@ <h2 class="text-xl mb-4 text-center sm:text-left uppercase">
           </ul>
         </div>
         <div class="mb-8">
-          <h2 class="text-xl mb-4 text-center sm:text-left uppercase">
+          <h2 class="mb-4 text-center text-xl uppercase sm:text-left">
             Miscellaneous
           </h2>
           <p class="mb-4">
             Here are some miscellaneous projects that don't really fit anywhere
             else. Mostly experiments and and other bits and bobs.
           </p>
-          <ul class="list-disc list-inside">
+          <ul class="list-inside list-disc">
             <li class="mb-2">
               <a
                 target="_blank"
diff --git a/src/style.css b/src/style.css
index 610b9d76..9b7e4ec9 100644
--- a/src/style.css
+++ b/src/style.css
@@ -27,34 +27,34 @@
 
 @layer components {
   .dot {
-    @apply hidden tiny:block w-dot h-dot rounded-full mr-2;
+    @apply mr-2 hidden h-dot w-dot rounded-full tiny:block;
   }
   .link {
-    @apply border-b border-dotted hover:text-white border-white;
+    @apply border-b border-dotted border-white hover:text-white;
   }
   .tab {
-    @apply px-4 flex border-bright_black items-end justify-center pt-1 grow;
+    @apply flex grow items-end justify-center border-bright_black px-4 pt-1;
   }
   .tab-inactive {
     @apply border-b-2 hover:bg-xgray1;
   }
   .tab-active {
-    @apply border-e-2 border-s-2 border-t-2 border-b-transparent border-b-2;
+    @apply border-b-2 border-e-2 border-s-2 border-t-2 border-b-transparent;
   }
   .svg > svg > * {
     @apply fill-bright_white;
   }
   .code {
-    @apply whitespace-nowrap overflow-x-auto flex mb-3 p-4 bg-hard_black;
+    @apply mb-3 flex overflow-x-auto whitespace-nowrap bg-hard_black p-4;
   }
   .inline-code {
     @apply whitespace-nowrap bg-hard_black p-1;
   }
   .list-dot {
-    @apply w-[5px] h-[5px] bg-bright_white rounded-full mr-2;
+    @apply mr-2 h-[5px] w-[5px] rounded-full bg-bright_white;
   }
   .sel {
-    @apply text-bright_blue border-bright_blue;
+    @apply border-bright_blue text-bright_blue;
   }
 }
 
diff --git a/src/themes/index.html b/src/themes/index.html
index 176b9bed..54e9e6ef 100644
--- a/src/themes/index.html
+++ b/src/themes/index.html
@@ -11,23 +11,23 @@
     <title>Srcery Theme - Themes and configurations</title>
   </head>
   <body
-    class="font-iosevka bg-black text-bright_white flex justify-center p-4 w-100"
+    class="w-100 flex justify-center bg-black p-4 font-iosevka text-bright_white"
   >
     {{> octocat }}
     <main
       x-data="state"
-      class="flex items-center flex-col grow sm:grow-0 width-[448px] sm:w-[780px] min-w-0"
+      class="width-[448px] flex min-w-0 grow flex-col items-center sm:w-[780px] sm:grow-0"
     >
       {{> header themes=true }}
-      <section class="flex flex-col w-full">
+      <section class="flex w-full flex-col">
         <form class="flex justify-center">
-          <div class="relative mb-8 max-w-sm sm:max-w-full w-full">
+          <div class="relative mb-8 w-full max-w-sm sm:max-w-full">
             <div
-              class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none"
+              class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3"
             >
               <svg
                 aria-hidden="true"
-                class="w-5 h-5 text-bright_black"
+                class="h-5 w-5 text-bright_black"
                 fill="none"
                 stroke="currentColor"
                 viewBox="0 0 24 24"
@@ -44,25 +44,25 @@
             <input
               type="filter"
               x-model="query"
-              class="block w-full p-4 pl-10 placeholder-bright_black text-sm text-bright_white border-2 border-bright_black bg-black focus:border-bright_white focus:outline-none"
+              class="block w-full border-2 border-bright_black bg-black p-4 pl-10 text-sm text-bright_white placeholder-bright_black focus:border-bright_white focus:outline-none"
               placeholder="Search for a theme, configuration, or application..."
               required
             />
           </div>
         </form>
         <div
-          class="grid grid-cols-1 justify-items-center sm:grid-cols-2 md:grid-cols-3 gap-5"
+          class="grid grid-cols-1 justify-items-center gap-5 sm:grid-cols-2 md:grid-cols-3"
         >
           <template x-for="theme in themes">
             <div
-              class="flex w-full flex-col items-center max-w-sm border-bright_black p-5 border-2"
+              class="flex w-full max-w-sm flex-col items-center border-2 border-bright_black p-5"
             >
-              <div class="svg w-24 mb-5" x-html="theme.icon"></div>
+              <div class="svg mb-5 w-24" x-html="theme.icon"></div>
               <template x-if="theme.url">
                 <a
                   :href="theme.url"
                   target="_blank"
-                  class="link uppercase mb-5"
+                  class="link mb-5 uppercase"
                   x-text="theme.name"
                 ></a>
               </template>
@@ -70,17 +70,17 @@
                 <span
                   :href="theme.url"
                   target="_blank"
-                  class="uppercase mb-5"
+                  class="mb-5 uppercase"
                   x-text="theme.name"
                 ></span>
               </template>
-              <a :href="theme.repo" target="_blank" class="link uppercase mb-5"
+              <a :href="theme.repo" target="_blank" class="link mb-5 uppercase"
                 >repository</a
               >
               <a
                 :href="theme.download"
                 target="_blank"
-                class="link uppercase mb-5"
+                class="link mb-5 uppercase"
                 >download</a
               >
             </div>
diff --git a/tailwind.config.js b/tailwind.config.js
index edd0b7ff..01e89be6 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -10,7 +10,8 @@ function parsePalette(palette) {
   }, {});
 }
 
-module.exports = {
+/** @type {import('tailwindcss').Config} */
+const config = {
   content: ["./src/**/*.{html,js}"],
   theme: {
     extend: {
@@ -39,3 +40,5 @@ module.exports = {
   },
   plugins: [],
 };
+
+export default config;
diff --git a/vite.config.js b/vite.config.js
index 163d30e4..0c9d94b6 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,8 +1,10 @@
-import { defineConfig } from "vite";
+// Vite Config
+
 import { resolve } from "path";
 import handlebars from "vite-plugin-handlebars";
 
-module.exports = defineConfig({
+/** @type {import('vite').UserConfig} */
+const config = {
   root: resolve(__dirname, "src"),
   plugins: [
     handlebars({
@@ -20,4 +22,6 @@ module.exports = defineConfig({
       },
     },
   },
-});
+};
+
+export default config;