Merge pull request #1953 from sportstimes/task/update-packages-plus-t…

…ailwind-all

Update Packages and Tailwind v4

package.json

@@ -28,6 +28,7 @@
   "dependencies": {
     "@ducanh2912/next-pwa": "^10.2.5",
     "@novu/node": "^2.0.1",
+    "@tailwindcss/postcss": "^4.0.0",
     "countries-and-timezones": "^3.2.3",
     "dayjs": "^1.11.5",
     "firebase": "^11.0.2",
@@ -56,11 +57,11 @@
     "autoprefixer": "^10.4.15",
     "eslint": "^9.17.0",
     "eslint-config-next": "^15.1.3",
-    "eslint-config-prettier": "^9.1.0",
+    "eslint-config-prettier": "^10.0.1",
     "next-translate-plugin": "^2.6.1",
     "postcss": "^8.4.28",
     "prettier": "^3.0.2",
-    "tailwindcss": "^3.3.5",
+    "tailwindcss": "^4.0.0",
     "typescript": "^5.0.4",
     "webpack": "^5.90.3"
   }

postcss.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-	plugins: ['tailwindcss', 'autoprefixer'],
-}
+  plugins: ['@tailwindcss/postcss', 'autoprefixer'],
+};

src/app/[locale]/globals.css

@@ -0,0 +1,98 @@
+@import 'tailwindcss';
+
+@plugin '@tailwindcss/forms';
+@plugin '@tailwindcss/typography';
+
+@theme {
+  --color-dark-green: #03120f;
+  --color-mid-green: #104134;
+  --color-light-green: #2d9977;
+  --color-row-gray: #151515;
+  --color-row-gray-darker: #101010;
+  --font-league-spartan: League Spartan;
+  --text-xsm: 0.65rem;
+}
+
+body {
+  margin: 0;
+  font-size: 14px;
+  line-height: 1.7;
+  font-weight: 400;
+  background: #000;
+  color: #fff;
+  font-family: -apple-system, BlinkMacSystemFont, Roboto, 'Segoe UI',
+    'Fira Sans', Avenir, 'Helvetica Neue', 'Lucida Grande', sans-serif;
+  text-rendering: optimizeLegibility;
+  height: 100%;
+}
+
+.form-tick:checked {
+  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z'/%3e%3c/svg%3e");
+  border-color: transparent;
+  background-color: currentColor;
+  background-size: 100% 100%;
+  background-position: 50%;
+  background-repeat: no-repeat;
+}
+
+@layer components {
+  p,
+  ul,
+  ol,
+  li {
+    @apply text-white;
+  }
+
+  a {
+    @apply font-semibold;
+  }
+
+  h6 {
+    @apply text-base font-bold font-league-spartan font-bold text-white;
+  }
+
+  h5 {
+    @apply text-lg font-bold font-league-spartan font-bold text-white;
+  }
+
+  h4 {
+    @apply text-xl font-bold font-league-spartan font-bold text-white;
+  }
+
+  h3 {
+    @apply text-2xl font-bold font-league-spartan font-bold text-white uppercase;
+  }
+
+  h2 {
+    @apply text-3xl font-bold tracking-normal font-league-spartan font-bold text-white uppercase;
+  }
+
+  h1 {
+    @apply text-4xl font-bold tracking-normal font-league-spartan font-extrabold text-white uppercase;
+  }
+
+  .btn {
+    @apply items-center justify-center px-4 py-2 space-x-2 text-sm font-medium transition-shadow bg-mid-green rounded shadow-sm hover:bg-light-green cursor-pointer focus:outline-none;
+  }
+
+  .destructive-btn {
+    @apply items-center justify-center px-4 py-2 space-x-2 text-sm font-medium transition-shadow bg-red-800 rounded shadow-sm hover:bg-red-900 cursor-pointer focus:outline-none;
+  }
+
+  .collapse-btn {
+    @apply items-center justify-center px-4 py-2 space-x-2 text-sm font-medium transition-shadow rounded shadow-sm cursor-pointer focus:outline-none;
+    background: #222;
+  }
+
+  .support-btn {
+    @apply flex items-center justify-center px-2 py-2 space-x-2 text-sm font-medium transition-shadow bg-red-600 rounded shadow-sm hover:bg-red-700 cursor-pointer focus:outline-none;
+  }
+
+  .support-btn-rounded {
+    @apply flex items-center justify-center px-2 py-2 space-x-2 text-sm font-medium transition-shadow bg-red-600 rounded-full shadow-sm hover:bg-red-700 cursor-pointer focus:outline-none w-12 h-12;
+  }
+
+  .support-btn-rounded-desktop {
+    @apply flex items-center justify-center px-2 py-2 space-x-2 text-sm font-medium transition-shadow bg-red-600 rounded-full shadow-sm hover:bg-red-700 cursor-pointer focus:outline-none w-16 h-16;
+  }
+}

src/app/[locale]/layout.tsx

@@ -1,7 +1,5 @@
 import { notFound } from 'next/navigation';
-import '../../styles/tailwind.css';
-import '../../styles/tailwind-utils.css';
-import '../../styles/index.css';
+import './globals.css';
 import { Metadata } from 'next';
 import PlausibleProvider from 'next-plausible';
 import Script from 'next/script';