From 2fe19adb9637cd4abeaec38ffde2c22b0d64e69d Mon Sep 17 00:00:00 2001 From: UUBulb <35923940+uubulb@users.noreply.github.com> Date: Sat, 14 Feb 2026 18:06:12 +0800 Subject: [PATCH] fix: downgrade tailwindcss to v3 (#151) * fix: downgrade tailwindcss to v3 * chore: auto-fix linting and formatting issues --- package.json | 4 +- postcss.config.js | 6 + postcss.config.mjs | 5 - src/components/server.tsx | 8 +- src/components/ui/badge.tsx | 3 +- src/components/ui/button.tsx | 3 +- src/components/xui/multi-select.tsx | 3 +- src/components/xui/overlayless-sheet.tsx | 3 +- src/index.css | 187 ++++++++++------------- 9 files changed, 93 insertions(+), 129 deletions(-) create mode 100644 postcss.config.js delete mode 100644 postcss.config.mjs diff --git a/package.json b/package.json index 0dd2c5e..130721c 100644 --- a/package.json +++ b/package.json @@ -74,9 +74,9 @@ "eslint-plugin-react-hooks": "^7.0.0", "eslint-plugin-react-refresh": "^0.4.23", "globals": "^16.4.0", - "postcss": "^8.5.6", + "postcss": "8.4.24", "swagger-typescript-api": "^13.2.15", - "tailwindcss": "^4.1.14", + "tailwindcss": "3.4.19", "typescript": "~5.9.3", "typescript-eslint": "^8.46.0", "vite": "^7.1.9" diff --git a/postcss.config.js b/postcss.config.js new file mode 100644 index 0000000..d41ad63 --- /dev/null +++ b/postcss.config.js @@ -0,0 +1,6 @@ +export default { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +} diff --git a/postcss.config.mjs b/postcss.config.mjs deleted file mode 100644 index 521f73c..0000000 --- a/postcss.config.mjs +++ /dev/null @@ -1,5 +0,0 @@ -export default { - plugins: { - "@tailwindcss/postcss": {}, - }, -} diff --git a/src/components/server.tsx b/src/components/server.tsx index bc437be..aac177e 100644 --- a/src/components/server.tsx +++ b/src/components/server.tsx @@ -465,9 +465,7 @@ export const ServerCard: React.FC = ({ data, mutate }) => { {publicNoteObj.billingDataMod ?.startDate ? new Date( - publicNoteObj - .billingDataMod! - .startDate!, + publicNoteObj.billingDataMod!.startDate!, ).toLocaleDateString() : "YYYY-MM-DD"} @@ -492,9 +490,7 @@ export const ServerCard: React.FC = ({ data, mutate }) => { .billingDataMod ?.startDate ? new Date( - publicNoteObj - .billingDataMod! - .startDate!, + publicNoteObj.billingDataMod!.startDate!, ) : undefined } diff --git a/src/components/ui/badge.tsx b/src/components/ui/badge.tsx index 658a142..f7c1d40 100644 --- a/src/components/ui/badge.tsx +++ b/src/components/ui/badge.tsx @@ -23,7 +23,8 @@ const badgeVariants = cva( ) export interface BadgeProps - extends HTMLAttributes, VariantProps {} + extends HTMLAttributes, + VariantProps {} function Badge({ className, variant, ...props }: BadgeProps) { return
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx index 2571352..f09e440 100644 --- a/src/components/ui/button.tsx +++ b/src/components/ui/button.tsx @@ -31,7 +31,8 @@ const buttonVariants = cva( ) export interface ButtonProps - extends ButtonHTMLAttributes, VariantProps { + extends ButtonHTMLAttributes, + VariantProps { asChild?: boolean } diff --git a/src/components/xui/multi-select.tsx b/src/components/xui/multi-select.tsx index ace38a9..43da126 100644 --- a/src/components/xui/multi-select.tsx +++ b/src/components/xui/multi-select.tsx @@ -67,8 +67,7 @@ const multiSelectVariants = cva( * Props for MultiSelect component */ interface MultiSelectProps - extends - React.ButtonHTMLAttributes, + extends React.ButtonHTMLAttributes, VariantProps { /** * An array of option objects to be displayed in the multi-select component. diff --git a/src/components/xui/overlayless-sheet.tsx b/src/components/xui/overlayless-sheet.tsx index e31b188..765edb1 100644 --- a/src/components/xui/overlayless-sheet.tsx +++ b/src/components/xui/overlayless-sheet.tsx @@ -37,8 +37,7 @@ const sheetVariants = cva( ) interface SheetContentProps - extends - ComponentPropsWithoutRef, + extends ComponentPropsWithoutRef, VariantProps { setOpen: Dispatch> } diff --git a/src/index.css b/src/index.css index ab995a3..f533e66 100644 --- a/src/index.css +++ b/src/index.css @@ -1,121 +1,88 @@ -@import "tailwindcss"; +@tailwind base; +@tailwind components; +@tailwind utilities; -@plugin "tailwindcss-animate"; +@layer base { + :root { + --radius: 0.5rem; + --background: 0 0% 100%; + --foreground: 0 0% 3.9%; + --card: 0 0% 100%; + --card-foreground: 0 0% 3.9%; + --popover: 0 0% 100%; + --popover-foreground: 0 0% 3.9%; + --primary: 0 0% 9%; + --primary-foreground: 0 0% 98%; + --secondary: 0 0% 96.1%; + --secondary-foreground: 0 0% 9%; + --muted: 0 0% 96.1%; + --muted-foreground: 0 0% 45.1%; + --accent: 0 0% 96.1%; + --accent-foreground: 0 0% 9%; + --destructive: 0 84.2% 60.2%; + --destructive-foreground: 0 0% 98%; + --border: 0 0% 89.8%; + --input: 0 0% 89.8%; + --ring: 0 0% 3.9%; + --chart-1: 12 76% 61%; + --chart-2: 173 58% 39%; + --chart-3: 197 37% 24%; + --chart-4: 43 74% 66%; + --chart-5: 27 87% 67%; + } -@custom-variant dark (&:is(.dark *)); - -@theme inline { - --radius-sm: calc(var(--radius) - 4px); - --radius-md: calc(var(--radius) - 2px); - --radius-lg: var(--radius); - --radius-xl: calc(var(--radius) + 4px); - --color-background: var(--background); - --color-foreground: var(--foreground); - --color-card: var(--card); - --color-card-foreground: var(--card-foreground); - --color-popover: var(--popover); - --color-popover-foreground: var(--popover-foreground); - --color-primary: var(--primary); - --color-primary-foreground: var(--primary-foreground); - --color-secondary: var(--secondary); - --color-secondary-foreground: var(--secondary-foreground); - --color-muted: var(--muted); - --color-muted-foreground: var(--muted-foreground); - --color-accent: var(--accent); - --color-accent-foreground: var(--accent-foreground); - --color-destructive: var(--destructive); - --color-border: var(--border); - --color-input: var(--input); - --color-ring: var(--ring); - --color-chart-1: var(--chart-1); - --color-chart-2: var(--chart-2); - --color-chart-3: var(--chart-3); - --color-chart-4: var(--chart-4); - --color-chart-5: var(--chart-5); - --color-sidebar: var(--sidebar); - --color-sidebar-foreground: var(--sidebar-foreground); - --color-sidebar-primary: var(--sidebar-primary); - --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); - --color-sidebar-accent: var(--sidebar-accent); - --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); - --color-sidebar-border: var(--sidebar-border); - --color-sidebar-ring: var(--sidebar-ring); -} - -:root { - --radius: 0.625rem; - --background: oklch(1 0 0); - --foreground: oklch(0.145 0 0); - --card: oklch(1 0 0); - --card-foreground: oklch(0.145 0 0); - --popover: oklch(1 0 0); - --popover-foreground: oklch(0.145 0 0); - --primary: oklch(0.205 0 0); - --primary-foreground: oklch(0.985 0 0); - --secondary: oklch(0.97 0 0); - --secondary-foreground: oklch(0.205 0 0); - --muted: oklch(0.97 0 0); - --muted-foreground: oklch(0.556 0 0); - --accent: oklch(0.97 0 0); - --accent-foreground: oklch(0.205 0 0); - --destructive: oklch(0.577 0.245 27.325); - --border: oklch(0.922 0 0); - --input: oklch(0.922 0 0); - --ring: oklch(0.708 0 0); - --chart-1: oklch(0.646 0.222 41.116); - --chart-2: oklch(0.6 0.118 184.704); - --chart-3: oklch(0.398 0.07 227.392); - --chart-4: oklch(0.828 0.189 84.429); - --chart-5: oklch(0.769 0.188 70.08); - --sidebar: oklch(0.985 0 0); - --sidebar-foreground: oklch(0.145 0 0); - --sidebar-primary: oklch(0.205 0 0); - --sidebar-primary-foreground: oklch(0.985 0 0); - --sidebar-accent: oklch(0.97 0 0); - --sidebar-accent-foreground: oklch(0.205 0 0); - --sidebar-border: oklch(0.922 0 0); - --sidebar-ring: oklch(0.708 0 0); -} - -.dark { - --background: oklch(0.145 0 0); - --foreground: oklch(0.985 0 0); - --card: oklch(0.205 0 0); - --card-foreground: oklch(0.985 0 0); - --popover: oklch(0.205 0 0); - --popover-foreground: oklch(0.985 0 0); - --primary: oklch(0.922 0 0); - --primary-foreground: oklch(0.205 0 0); - --secondary: oklch(0.269 0 0); - --secondary-foreground: oklch(0.985 0 0); - --muted: oklch(0.269 0 0); - --muted-foreground: oklch(0.708 0 0); - --accent: oklch(0.269 0 0); - --accent-foreground: oklch(0.985 0 0); - --destructive: oklch(0.704 0.191 22.216); - --border: oklch(1 0 0 / 10%); - --input: oklch(1 0 0 / 15%); - --ring: oklch(0.556 0 0); - --chart-1: oklch(0.488 0.243 264.376); - --chart-2: oklch(0.696 0.17 162.48); - --chart-3: oklch(0.769 0.188 70.08); - --chart-4: oklch(0.627 0.265 303.9); - --chart-5: oklch(0.645 0.246 16.439); - --sidebar: oklch(0.205 0 0); - --sidebar-foreground: oklch(0.985 0 0); - --sidebar-primary: oklch(0.488 0.243 264.376); - --sidebar-primary-foreground: oklch(0.985 0 0); - --sidebar-accent: oklch(0.269 0 0); - --sidebar-accent-foreground: oklch(0.985 0 0); - --sidebar-border: oklch(1 0 0 / 10%); - --sidebar-ring: oklch(0.556 0 0); + .dark { + --background: 0 0% 9%; + --foreground: 0 0% 98%; + --card: 0 0% 3.9%; + --card-foreground: 0 0% 98%; + --popover: 0 0% 3.9%; + --popover-foreground: 0 0% 98%; + --primary: 0 0% 98%; + --primary-foreground: 0 0% 9%; + --secondary: 0 0% 14.9%; + --secondary-foreground: 0 0% 98%; + --muted: 0 0% 14.9%; + --muted-foreground: 0 0% 63.9%; + --accent: 0 0% 14.9%; + --accent-foreground: 0 0% 98%; + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 0 0% 98%; + --border: 0 0% 14.9%; + --input: 0 0% 14.9%; + --ring: 0 0% 83.1%; + --chart-1: 220 70% 50%; + --chart-2: 160 60% 45%; + --chart-3: 30 80% 55%; + --chart-4: 280 65% 60%; + --chart-5: 340 75% 55%; + } } @layer base { * { - @apply border-border outline-ring/50; + @apply border-border; } + body { @apply bg-background text-foreground; } } + +html, +body, +#root { + height: 100%; +} + +::-webkit-scrollbar { + @apply h-2.5 w-2.5; +} + +::-webkit-scrollbar-track { + @apply bg-transparent; +} + +::-webkit-scrollbar-thumb { + @apply rounded-full border-[1px] border-solid border-transparent bg-border bg-clip-padding; +}