diff --git a/app/(main)/header.tsx b/app/(main)/header.tsx
index 2cb28a6..00eecf9 100644
--- a/app/(main)/header.tsx
+++ b/app/(main)/header.tsx
@@ -36,7 +36,7 @@ function Header() {
unoptimized
alt="apple-touch-icon"
src={customLogo ? customLogo : "/apple-touch-icon.png"}
- className="relative !m-0 border-2 border-transparent h-6 w-6 object-cover object-top !p-0"
+ className="relative m-0! border-2 border-transparent h-6 w-6 object-cover object-top p-0!"
/>
{customTitle ? customTitle : "NezhaDash"}
diff --git a/app/(main)/layout.tsx b/app/(main)/layout.tsx
index 8df46a4..0bec7e5 100644
--- a/app/(main)/layout.tsx
+++ b/app/(main)/layout.tsx
@@ -11,7 +11,7 @@ type DashboardProps = {
export default function MainLayout({ children }: DashboardProps) {
return (
-
+
{children}
diff --git a/bun.lockb b/bun.lockb
index 06550fc..de4b231 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/components/BlurLayer.tsx b/components/BlurLayer.tsx
index 45b86de..72e9027 100644
--- a/components/BlurLayer.tsx
+++ b/components/BlurLayer.tsx
@@ -9,8 +9,8 @@ const BlurLayers = () => {
maskEnd = 100;
}
return {
- backdropFilter: `blur(${blurAmount}px)`,
- WebkitBackdropFilter: `blur(${blurAmount}px)`,
+ backdropFilter: `blur-sm(${blurAmount}px)`,
+ WebkitBackdropFilter: `blur-sm(${blurAmount}px)`,
zIndex: index + 1,
maskImage: `linear-gradient(rgba(0, 0, 0, 0) ${maskStart}%, rgb(0, 0, 0) ${maskEnd}%)`,
};
diff --git a/components/GlobalBackButton.tsx b/components/GlobalBackButton.tsx
index fba367d..8907b3c 100644
--- a/components/GlobalBackButton.tsx
+++ b/components/GlobalBackButton.tsx
@@ -23,7 +23,7 @@ export default function GlobalBackButton() {
onClick={() => {
router.push(`/`);
}}
- className="rounded-[50px] w-fit bg-stone-100 p-[10px] transition-all hover:bg-stone-200 dark:hover:bg-stone-700 dark:bg-stone-800"
+ className="rounded-[50px] cursor-pointer w-fit bg-stone-100 p-[10px] transition-all hover:bg-stone-200 dark:hover:bg-stone-700 dark:bg-stone-800"
>
diff --git a/components/Icon.tsx b/components/Icon.tsx
index f690beb..1781a55 100644
--- a/components/Icon.tsx
+++ b/components/Icon.tsx
@@ -12,7 +12,7 @@ export function BackIcon() {
return (
<>
(
{children}
-
+
Close
diff --git a/package.json b/package.json
index fb5dd3f..7bfda4c 100644
--- a/package.json
+++ b/package.json
@@ -53,19 +53,19 @@
"typescript-eslint": "^8.15.0"
},
"devDependencies": {
- "eslint-plugin-turbo": "^2.3.0",
- "eslint-plugin-unused-imports": "^4.1.4",
"@next/bundle-analyzer": "^15.0.3",
+ "@tailwindcss/postcss": "^4.0.0-beta.1",
"@types/node": "^22.9.1",
"@types/react": "npm:types-react@19.0.0-rc.1",
"@types/react-dom": "npm:types-react-dom@19.0.0-rc.1",
- "autoprefixer": "^10.4.20",
"eslint": "^9.15.0",
"eslint-config-next": "^15.0.3",
+ "eslint-plugin-turbo": "^2.3.1",
+ "eslint-plugin-unused-imports": "^4.1.4",
"postcss": "^8.4.49",
"prettier": "^3.3.3",
"prettier-plugin-tailwindcss": "^0.6.9",
- "tailwindcss": "^3.4.15",
+ "tailwindcss": "^4.0.0-beta.1",
"typescript": "^5.6.3"
},
"overrides": {
diff --git a/postcss.config.js b/postcss.config.js
index 12a703d..483f378 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -1,6 +1,5 @@
module.exports = {
plugins: {
- tailwindcss: {},
- autoprefixer: {},
+ "@tailwindcss/postcss": {},
},
};
diff --git a/styles/globals.css b/styles/globals.css
index 64de661..78d6ba4 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -1,6 +1,118 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+
+@variant dark (&:is(.dark *));
+
+@theme {
+ --font-sans: var(--font-sans), ui-sans-serif, system-ui, sans-serif,
+ "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+
+ --color-border: hsl(var(--border));
+ --color-input: hsl(var(--input));
+ --color-ring: hsl(var(--ring));
+ --color-background: hsl(var(--background));
+ --color-foreground: hsl(var(--foreground));
+
+ --color-primary: hsl(var(--primary));
+ --color-primary-foreground: hsl(var(--primary-foreground));
+
+ --color-secondary: hsl(var(--secondary));
+ --color-secondary-foreground: hsl(var(--secondary-foreground));
+
+ --color-destructive: hsl(var(--destructive));
+ --color-destructive-foreground: hsl(var(--destructive-foreground));
+
+ --color-muted: hsl(var(--muted));
+ --color-muted-foreground: hsl(var(--muted-foreground));
+
+ --color-accent: hsl(var(--accent));
+ --color-accent-foreground: hsl(var(--accent-foreground));
+
+ --color-popover: hsl(var(--popover));
+ --color-popover-foreground: hsl(var(--popover-foreground));
+
+ --color-card: hsl(var(--card));
+ --color-card-foreground: hsl(var(--card-foreground));
+
+ --radius-lg: var(--radius);
+ --radius-md: calc(var(--radius) - 2px);
+ --radius-sm: calc(var(--radius) - 4px);
+
+ --animate-accordion-down: accordion-down 0.2s ease-out;
+ --animate-accordion-up: accordion-up 0.2s ease-out;
+
+ @keyframes accordion-down {
+ from {
+ height: 0;
+ }
+ to {
+ height: var(--radix-accordion-content-height);
+ }
+ }
+ @keyframes accordion-up {
+ from {
+ height: var(--radix-accordion-content-height);
+ }
+ to {
+ height: 0;
+ }
+ }
+}
+
+@utility container {
+ margin-inline: auto;
+ padding-inline: 2rem;
+ @media (width >= theme(--breakpoint-sm)) {
+ max-width: none;
+ }
+ @media (width >= 1400px) {
+ max-width: 1400px;
+ }
+}
+
+/*
+ In Tailwind CSS v4, basic styles are applied to form elements by default. To
+ maintain compatibility with v3, the following resets have been added:
+*/
+@layer base {
+ input,
+ textarea,
+ select,
+ button {
+ border: 0px solid;
+ border-radius: 0;
+ padding: 0;
+ color: inherit;
+ background-color: transparent;
+ }
+}
+
+/*
+ The default border color has changed to `currentColor` in Tailwind CSS v4,
+ so we've added these compatibility styles to make sure everything still
+ looks the same as it did with Tailwind CSS v3.
+
+ If we ever want to remove these styles, we need to add an explicit border
+ color utility to any element that depends on these defaults.
+*/
+@layer base {
+ *,
+ ::after,
+ ::before,
+ ::backdrop,
+ ::file-selector-button {
+ border-color: var(--color-gray-200, currentColor);
+ }
+}
+
+@utility step {
+ counter-increment: step;
+
+ &:before {
+ @apply border-background bg-muted absolute inline-flex h-9 w-9 items-center justify-center rounded-full border-4 text-center -indent-px font-mono text-base font-medium;
+ @apply mt-[-4px] ml-[-50px];
+ content: counter(step);
+ }
+}
@layer base {
:root {
@@ -84,18 +196,6 @@
}
}
-@layer utilities {
- .step {
- counter-increment: step;
- }
-
- .step:before {
- @apply absolute inline-flex h-9 w-9 items-center justify-center rounded-full border-4 border-background bg-muted text-center -indent-px font-mono text-base font-medium;
- @apply ml-[-50px] mt-[-4px];
- content: counter(step);
- }
-}
-
@media (max-width: 640px) {
.container {
@apply px-4;
diff --git a/tailwind.config.ts b/tailwind.config.ts
deleted file mode 100644
index 0628323..0000000
--- a/tailwind.config.ts
+++ /dev/null
@@ -1,84 +0,0 @@
-import type { Config } from "tailwindcss";
-import { fontFamily } from "tailwindcss/defaultTheme";
-
-const config = {
- darkMode: "class",
- content: [
- "./pages/**/*.{ts,tsx}",
- "./components/**/*.{ts,tsx}",
- "./app/**/*.{ts,tsx}",
- "./src/**/*.{ts,tsx}",
- ],
- prefix: "",
- theme: {
- container: {
- center: true,
- padding: "2rem",
- screens: {
- "2xl": "1400px",
- },
- },
- extend: {
- fontFamily: {
- sans: ["var(--font-sans)", ...fontFamily.sans],
- },
- colors: {
- border: "hsl(var(--border))",
- input: "hsl(var(--input))",
- ring: "hsl(var(--ring))",
- background: "hsl(var(--background))",
- foreground: "hsl(var(--foreground))",
- primary: {
- DEFAULT: "hsl(var(--primary))",
- foreground: "hsl(var(--primary-foreground))",
- },
- secondary: {
- DEFAULT: "hsl(var(--secondary))",
- foreground: "hsl(var(--secondary-foreground))",
- },
- destructive: {
- DEFAULT: "hsl(var(--destructive))",
- foreground: "hsl(var(--destructive-foreground))",
- },
- muted: {
- DEFAULT: "hsl(var(--muted))",
- foreground: "hsl(var(--muted-foreground))",
- },
- accent: {
- DEFAULT: "hsl(var(--accent))",
- foreground: "hsl(var(--accent-foreground))",
- },
- popover: {
- DEFAULT: "hsl(var(--popover))",
- foreground: "hsl(var(--popover-foreground))",
- },
- card: {
- DEFAULT: "hsl(var(--card))",
- foreground: "hsl(var(--card-foreground))",
- },
- },
- borderRadius: {
- lg: "var(--radius)",
- md: "calc(var(--radius) - 2px)",
- sm: "calc(var(--radius) - 4px)",
- },
- keyframes: {
- "accordion-down": {
- from: { height: "0" },
- to: { height: "var(--radix-accordion-content-height)" },
- },
- "accordion-up": {
- from: { height: "var(--radix-accordion-content-height)" },
- to: { height: "0" },
- },
- },
- animation: {
- "accordion-down": "accordion-down 0.2s ease-out",
- "accordion-up": "accordion-up 0.2s ease-out",
- },
- },
- },
- plugins: [require("tailwindcss-animate")],
-} satisfies Config;
-
-export default config;