Upgrade to tailwindcss v4 (#59)

lichess-org · Feb 5, 2025 · 0870f54 · 0870f54
1 parent 35c7068
commit 0870f54
Show file tree

Hide file tree

Showing 11 changed files with 308 additions and 643 deletions.
diff --git a/package.json b/package.json
@@ -32,15 +32,15 @@
   "devDependencies": {
     "@faker-js/faker": "^9.4.0",
     "@lichess-org/types": "^2.0.23",
+    "@tailwindcss/postcss": "^4.0.3",
     "@tauri-apps/cli": "^2.2.7",
     "@types/node": "^22.13.1",
     "@vitejs/plugin-vue": "^5.2.1",
-    "autoprefixer": "^10.4.20",
     "chess.js": "1.0.0",
     "jsdom": "^26.0.0",
     "postcss": "^8.5.1",
     "prettier": "^3.4.2",
-    "tailwindcss": "^3.4.17",
+    "tailwindcss": "^4.0.3",
     "typescript": "^5.7.3",
     "vite": "^6.0.11",
     "vitest": "^3.0.5",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/postcss.config.cjs b/postcss.config.cjs
@@ -1,6 +1,5 @@
 module.exports = {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    '@tailwindcss/postcss': {},
   },
 };
diff --git a/src/components/AddUserToSidebar.vue b/src/components/AddUserToSidebar.vue
@@ -51,7 +51,7 @@ function save() {
       <div class="mt-4 flex">
         <button
           type="submit"
-          class="rounded-md bg-indigo-500 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500"
+          class="rounded-md bg-indigo-500 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500"
         >
           Add
         </button>

diff --git a/src/components/BroadcastsByUser.vue b/src/components/BroadcastsByUser.vue
@@ -61,21 +61,21 @@ const viewOnLichessUrl = computed<string>(() => {
       <button
         type="button"
         @click="refresh"
-        class="inline-flex items-center rounded-md bg-white/10 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-white/20"
+        class="inline-flex items-center rounded-md bg-white/10 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-white/20"
       >
         Refresh
       </button>
       <button
         type="button"
         @click="openPath(viewOnLichessUrl)"
-        class="inline-flex items-center rounded-md bg-white/10 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-white/20"
+        class="inline-flex items-center rounded-md bg-white/10 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-white/20"
       >
         View on Lichess
       </button>
       <button
         type="button"
         @click="openPath(`${settings.lichessUrl}/broadcast/new`)"
-        class="inline-flex items-center rounded-md bg-indigo-500 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500"
+        class="inline-flex items-center rounded-md bg-indigo-500 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500"
       >
         &plus; New Broadcast
       </button>
@@ -117,7 +117,7 @@ const viewOnLichessUrl = computed<string>(() => {
         <button
           type="button"
           @click="openPath(`${settings.lichessUrl}/broadcast/new`)"
-          class="inline-flex items-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+          class="inline-flex items-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
         >
           <svg class="-ml-0.5 mr-1.5 h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
             <path

diff --git a/src/components/FolderWatcher.vue b/src/components/FolderWatcher.vue
@@ -140,14 +140,14 @@ async function resetAndReupload() {
             <button
               type="button"
               @click="stopWatching"
-              class="rounded-md bg-gray-500 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-gray-400"
+              class="rounded-md bg-gray-500 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-gray-400"
             >
               Stop watching this folder
             </button>
             <button
               type="button"
               @click="resetAndReupload"
-              class="rounded-md bg-gray-500 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-gray-400"
+              class="rounded-md bg-gray-500 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-gray-400"
             >
               Reset round + Re-upload game PGNs
             </button>
@@ -204,7 +204,7 @@ async function resetAndReupload() {
     <form class="mt-2">
       <button
         @click="selectPgnFolder"
-        class="rounded-md bg-teal-500 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-teal-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-500"
+        class="rounded-md bg-teal-500 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-teal-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-500"
         type="button"
       >
         <svg

diff --git a/src/components/LichessLogin.vue b/src/components/LichessLogin.vue
@@ -21,7 +21,7 @@ async function login() {
       <button
         type="button"
         @click="login"
-        class="inline-flex items-center rounded-md bg-indigo-600 px-8 py-3 font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+        class="inline-flex items-center rounded-md bg-indigo-600 px-8 py-3 font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
       >
         <svg
           xmlns="http://www.w3.org/2000/svg"

diff --git a/src/components/Round.vue b/src/components/Round.vue
@@ -40,22 +40,22 @@ getRound();
         <button
           type="button"
           @click="getRound"
-          class="inline-flex items-center rounded-md bg-white/10 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-white/20"
+          class="inline-flex items-center rounded-md bg-white/10 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-white/20"
         >
           Refresh
         </button>
 
         <button
           type="button"
           @click="round?.round.url && openPath(round.round.url)"
-          class="inline-flex items-center rounded-md bg-white/10 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-white/20"
+          class="inline-flex items-center rounded-md bg-white/10 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-white/20"
         >
           View on Lichess
         </button>
         <button
           type="button"
           @click="openPath(`${settings.lichessUrl}/broadcast/${round?.tour.id}/new`)"
-          class="inline-flex items-center rounded-md bg-indigo-500 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500"
+          class="inline-flex items-center rounded-md bg-indigo-500 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500"
         >
           &plus; New Round
         </button>

diff --git a/src/components/Settings.vue b/src/components/Settings.vue
@@ -50,7 +50,7 @@ function logout() {
       <form class="flex items-start md:col-span-2" @submit.prevent="logout()">
         <button
           type="submit"
-          class="rounded-md bg-indigo-500 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-400"
+          class="rounded-md bg-indigo-500 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-400"
         >
           Logout
         </button>
@@ -101,7 +101,7 @@ function logout() {
         <form class="flex items-start md:col-span-2" @submit.prevent="clearAllData()">
           <button
             type="submit"
-            class="rounded-md bg-gray-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-gray-500"
+            class="rounded-md bg-gray-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-gray-500"
           >
             Reset All Settings
           </button>
@@ -143,7 +143,7 @@ function logout() {
           <div class="mt-4 flex">
             <button
               type="submit"
-              class="rounded-md bg-indigo-500 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500"
+              class="rounded-md bg-indigo-500 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500"
             >
               Save
             </button>

diff --git a/src/styles.css b/src/styles.css
@@ -1,6 +1,4 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
 
 .nav-item {
   @apply text-indigo-100 hover:text-indigo-800 hover:bg-indigo-200 rounded-md px-3 py-2 text-sm font-medium;

diff --git a/tailwind.config.js b/tailwind.config.js