feat: migrated to tailwind v4

jurerotar · Oct 6, 2024 · cc2e6c2 · cc2e6c2
1 parent c41004c
commit cc2e6c2
Show file tree

Hide file tree

Showing 7 changed files with 670 additions and 1,113 deletions.
diff --git a/app/index.tsx b/app/index.tsx
@@ -4,7 +4,7 @@ import React, { Suspense } from 'react';
 import ReactDOM from 'react-dom/client';
 import { RouterProvider } from 'react-router-dom';
 import { router } from './router';
-import './styles/styles.scss';
+import './styles/styles.css';
 import './i18n';
 
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);

diff --git a/app/styles/styles.scss → app/styles/styles.css b/app/styles/styles.scss → app/styles/styles.css
@@ -1,31 +1,59 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
 
-//@import "tailwindcss";
+@theme {
+  --breakpoint-xs: 425px;
+  --breakpoint-2xl: 1920px;
 
-//@theme {
-//  // Breakpoints
-//  --breakpoint-xs: 425px;
-//  --breakpoint-sm: 640px;
-//  --breakpoint-md: 768px;
-//  --breakpoint-lg: 1024px;
-//  --breakpoint-xl: 1280px;
-//  --breakpoint-2xl: 1920px;
-//
-//  // Colors
-//  --color-reputation-player: '#4338ca';
-//  --color-reputation-ecstatic: '#1d4ed8';
-//  --color-reputation-respected: '#0891b2';
-//  --color-reputation-friendly: '#22c55e';
-//  --color-reputation-neutral: '#facc15';
-//  --color-reputation-unfriendly: '#f97316';
-//  --color-reputation-hostile: '#e11d48';
-//
-//  --duration-default: 300ms;
-//
-//  --backdrop-blur-xs: 1px;
-//}
+  --color-reputation-player: #4338ca;
+  --color-reputation-ecstatic: #1d4ed8;
+  --color-reputation-respected: #0891b2;
+  --color-reputation-friendly: #22c55e;
+  --color-reputation-neutral: #facc15;
+  --color-reputation-unfriendly: #f97316;
+  --color-reputation-hostile: #e11d48;
+}
+
+.container {
+  width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+@media (min-width: var(--breakpoint-xs)) {
+  .container {
+    max-width: var(--breakpoint-xs);
+  }
+}
+
+@media (min-width: var(--breakpoint-sm)) {
+  .container {
+    max-width: var(--breakpoint-sm);
+  }
+}
+
+@media (min-width: var(--breakpoint-md)) {
+  .container {
+    max-width: var(--breakpoint-md);
+  }
+}
+
+@media (min-width: var(--breakpoint-lg)) {
+  .container {
+    max-width: var(--breakpoint-lg);
+  }
+}
+
+@media (min-width: var(--breakpoint-xl)) {
+  .container {
+    max-width: var(--breakpoint-xl);
+  }
+}
+
+@media (min-width: var(--breakpoint-2xl)) {
+  .container {
+    max-width: var(--breakpoint-2xl);
+  }
+}
 
 @layer base {
   .text-xxs {
@@ -49,33 +77,12 @@
   @apply top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2;
 }
 
-.fade-enter {
-  opacity: 0;
-}
-
-.fade-exit {
-  opacity: 1;
-}
-
-.fade-enter-active {
-  opacity: 1;
-}
-
-.fade-exit-active {
-  opacity: 0;
-}
-
-.fade-enter-active,
-.fade-exit-active {
-  transition: opacity 500ms;
-}
-
 .toggle-label::before {
   position: absolute;
   top: 0.125rem;
   left: 0.125rem;
   display: block;
-  content: '';
+  content: "";
   width: 1.25rem;
   height: 1.25rem;
   border-radius: 9999%;
@@ -86,9 +93,7 @@
   background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23a0aec0" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>');
   transition: transform 0.15s cubic-bezier(0, 0, 0.2, 1);
   transform: translateX(0);
-  box-shadow:
-    0 4px 6px -1px rgba(0, 0, 0, 0.1),
-    0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
 }
 .toggle-checkbox:checked + .toggle-label:before {
   transform: translateX(1.5rem);