Skip to content

Commit df05804

Browse files
json-qjson-q
authored
chore: update tailwindcss to v4 and so on (#10)
* chore(deps): update dependency tailwindcss to v4, next to 15.2.0 * chore: upgrade deps
1 parent 3534540 commit df05804

File tree

13 files changed

+1400
-1447
lines changed

13 files changed

+1400
-1447
lines changed

‎app/globals.css‎

Lines changed: 124 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,72 +1,136 @@
1-
@tailwind base;
2-
@tailwind components;
3-
@tailwind utilities;
1+
@import 'tailwindcss';
2+
3+
@plugin "tailwindcss-animate";
4+
5+
@plugin "@tailwindcss/typography";
6+
@config "./tailwind.config.js";
7+
8+
@custom-variant dark (&:is(.dark *));
9+
10+
@theme {
11+
--font-sans: var(--font-geist-sans);
12+
--font-mono: var(--font-geist-mono);
13+
}
14+
15+
:root {
16+
--background: oklch(1 0 0);
17+
--foreground: oklch(0.141 0.005 285.823);
18+
--card: oklch(1 0 0);
19+
--card-foreground: oklch(0.141 0.005 285.823);
20+
--popover: oklch(1 0 0);
21+
--popover-foreground: oklch(0.141 0.005 285.823);
22+
--primary: oklch(0.21 0.006 285.885);
23+
--primary-foreground: oklch(0.985 0 0);
24+
--secondary: oklch(0.967 0.001 286.375);
25+
--secondary-foreground: oklch(0.21 0.006 285.885);
26+
--muted: oklch(0.967 0.001 286.375);
27+
--muted-foreground: oklch(0.552 0.016 285.938);
28+
--accent: oklch(0.967 0.001 286.375);
29+
--accent-foreground: oklch(0.21 0.006 285.885);
30+
--destructive: oklch(0.577 0.245 27.325);
31+
--destructive-foreground: oklch(0.577 0.245 27.325);
32+
--border: oklch(0.92 0.004 286.32);
33+
--input: oklch(0.92 0.004 286.32);
34+
--ring: oklch(0.705 0.015 286.067);
35+
--chart-1: oklch(0.646 0.222 41.116);
36+
--chart-2: oklch(0.6 0.118 184.704);
37+
--chart-3: oklch(0.398 0.07 227.392);
38+
--chart-4: oklch(0.828 0.189 84.429);
39+
--chart-5: oklch(0.769 0.188 70.08);
40+
--radius: 0.625rem;
41+
--sidebar: oklch(0.985 0 0);
42+
--sidebar-foreground: oklch(0.141 0.005 285.823);
43+
--sidebar-primary: oklch(0.21 0.006 285.885);
44+
--sidebar-primary-foreground: oklch(0.985 0 0);
45+
--sidebar-accent: oklch(0.967 0.001 286.375);
46+
--sidebar-accent-foreground: oklch(0.21 0.006 285.885);
47+
--sidebar-border: oklch(0.92 0.004 286.32);
48+
--sidebar-ring: oklch(0.705 0.015 286.067);
49+
}
50+
51+
.dark {
52+
--background: oklch(0.141 0.005 285.823);
53+
--foreground: oklch(0.985 0 0);
54+
--card: oklch(0.141 0.005 285.823);
55+
--card-foreground: oklch(0.985 0 0);
56+
--popover: oklch(0.141 0.005 285.823);
57+
--popover-foreground: oklch(0.985 0 0);
58+
--primary: oklch(0.985 0 0);
59+
--primary-foreground: oklch(0.21 0.006 285.885);
60+
--secondary: oklch(0.274 0.006 286.033);
61+
--secondary-foreground: oklch(0.985 0 0);
62+
--muted: oklch(0.274 0.006 286.033);
63+
--muted-foreground: oklch(0.705 0.015 286.067);
64+
--accent: oklch(0.274 0.006 286.033);
65+
--accent-foreground: oklch(0.985 0 0);
66+
--destructive: oklch(0.396 0.141 25.723);
67+
--destructive-foreground: oklch(0.637 0.237 25.331);
68+
--border: oklch(0.274 0.006 286.033);
69+
--input: oklch(0.274 0.006 286.033);
70+
--ring: oklch(0.442 0.017 285.786);
71+
--chart-1: oklch(0.488 0.243 264.376);
72+
--chart-2: oklch(0.696 0.17 162.48);
73+
--chart-3: oklch(0.769 0.188 70.08);
74+
--chart-4: oklch(0.627 0.265 303.9);
75+
--chart-5: oklch(0.645 0.246 16.439);
76+
--sidebar: oklch(0.21 0.006 285.885);
77+
--sidebar-foreground: oklch(0.985 0 0);
78+
--sidebar-primary: oklch(0.488 0.243 264.376);
79+
--sidebar-primary-foreground: oklch(0.985 0 0);
80+
--sidebar-accent: oklch(0.274 0.006 286.033);
81+
--sidebar-accent-foreground: oklch(0.985 0 0);
82+
--sidebar-border: oklch(0.274 0.006 286.033);
83+
--sidebar-ring: oklch(0.442 0.017 285.786);
84+
}
85+
86+
@theme inline {
87+
--color-background: var(--background);
88+
--color-foreground: var(--foreground);
89+
--color-card: var(--card);
90+
--color-card-foreground: var(--card-foreground);
91+
--color-popover: var(--popover);
92+
--color-popover-foreground: var(--popover-foreground);
93+
--color-primary: var(--primary);
94+
--color-primary-foreground: var(--primary-foreground);
95+
--color-secondary: var(--secondary);
96+
--color-secondary-foreground: var(--secondary-foreground);
97+
--color-muted: var(--muted);
98+
--color-muted-foreground: var(--muted-foreground);
99+
--color-accent: var(--accent);
100+
--color-accent-foreground: var(--accent-foreground);
101+
--color-destructive: var(--destructive);
102+
--color-destructive-foreground: var(--destructive-foreground);
103+
--color-border: var(--border);
104+
--color-input: var(--input);
105+
--color-ring: var(--ring);
106+
--color-chart-1: var(--chart-1);
107+
--color-chart-2: var(--chart-2);
108+
--color-chart-3: var(--chart-3);
109+
--color-chart-4: var(--chart-4);
110+
--color-chart-5: var(--chart-5);
111+
--radius-sm: calc(var(--radius) - 4px);
112+
--radius-md: calc(var(--radius) - 2px);
113+
--radius-lg: var(--radius);
114+
--radius-xl: calc(var(--radius) + 4px);
115+
--color-sidebar: var(--sidebar);
116+
--color-sidebar-foreground: var(--sidebar-foreground);
117+
--color-sidebar-primary: var(--sidebar-primary);
118+
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
119+
--color-sidebar-accent: var(--sidebar-accent);
120+
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
121+
--color-sidebar-border: var(--sidebar-border);
122+
--color-sidebar-ring: var(--sidebar-ring);
123+
}
4124

5125
@layer base {
6126
* {
7-
@apply border-border;
127+
@apply border-border outline-ring/50;
8128
}
9129
body {
10130
@apply bg-background text-foreground;
11131
}
12132
}
13133

14-
@layer base {
15-
:root {
16-
--background: 0 0% 100%;
17-
--foreground: 240 10% 3.9%;
18-
--card: 0 0% 100%;
19-
--card-foreground: 240 10% 3.9%;
20-
--popover: 0 0% 100%;
21-
--popover-foreground: 240 10% 3.9%;
22-
--primary: 240 5.9% 10%;
23-
--primary-foreground: 0 0% 98%;
24-
--secondary: 240 4.8% 95.9%;
25-
--secondary-foreground: 240 5.9% 10%;
26-
--muted: 240 4.8% 95.9%;
27-
--muted-foreground: 240 3.8% 46.1%;
28-
--accent: 240 4.8% 95.9%;
29-
--accent-foreground: 240 5.9% 10%;
30-
--destructive: 0 84.2% 60.2%;
31-
--destructive-foreground: 0 0% 98%;
32-
--border: 240 5.9% 90%;
33-
--input: 240 5.9% 90%;
34-
--ring: 240 10% 3.9%;
35-
--chart-1: 12 76% 61%;
36-
--chart-2: 173 58% 39%;
37-
--chart-3: 197 37% 24%;
38-
--chart-4: 43 74% 66%;
39-
--chart-5: 27 87% 67%;
40-
--radius: 0.5rem;
41-
}
42-
.dark {
43-
--background: 240 10% 3.9%;
44-
--foreground: 0 0% 98%;
45-
--card: 240 10% 3.9%;
46-
--card-foreground: 0 0% 98%;
47-
--popover: 240 10% 3.9%;
48-
--popover-foreground: 0 0% 98%;
49-
--primary: 0 0% 98%;
50-
--primary-foreground: 240 5.9% 10%;
51-
--secondary: 240 3.7% 15.9%;
52-
--secondary-foreground: 0 0% 98%;
53-
--muted: 240 3.7% 15.9%;
54-
--muted-foreground: 240 5% 64.9%;
55-
--accent: 240 3.7% 15.9%;
56-
--accent-foreground: 0 0% 98%;
57-
--destructive: 0 62.8% 30.6%;
58-
--destructive-foreground: 0 0% 98%;
59-
--border: 240 3.7% 15.9%;
60-
--input: 240 3.7% 15.9%;
61-
--ring: 240 4.9% 83.9%;
62-
--chart-1: 220 70% 50%;
63-
--chart-2: 160 60% 45%;
64-
--chart-3: 30 80% 55%;
65-
--chart-4: 280 65% 60%;
66-
--chart-5: 340 75% 55%;
67-
}
68-
}
69-
70134
* {
71135
scrollbar-width: thin;
72136
scrollbar-color: hsl(var(--border)) transparent;

‎app/tailwind.config.js‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
/** @type {import('tailwindcss').Config} */
2+
module.exports = {
3+
theme: {
4+
extend: {
5+
typography: {
6+
DEFAULT: {
7+
css: {
8+
'blockquote p:first-of-type::before': { content: 'none' },
9+
'blockquote p:first-of-type::after': { content: 'none' },
10+
a: {
11+
color: 'var(--color-blue-600)',
12+
'&:hover': {
13+
color: 'var(--color-blue-800)',
14+
},
15+
code: { color: 'var(--color-blue-600)' },
16+
},
17+
code: {
18+
color: 'var(--color-pink-600)',
19+
},
20+
hr: {
21+
marginTop: '1rem',
22+
marginBottom: '1rem',
23+
},
24+
img: {
25+
marginTop: 0,
26+
marginBottom: 0,
27+
},
28+
blockquote: {
29+
p: {
30+
color: 'var(--color-slate-600)',
31+
},
32+
},
33+
figure: {
34+
marginTop: '0.5rem',
35+
marginBottom: '0.5rem',
36+
},
37+
ul: {
38+
'padding-inline-start': '0.5rem',
39+
},
40+
},
41+
},
42+
},
43+
},
44+
},
45+
};

‎components/ui/avatar.tsx‎

Lines changed: 30 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -5,43 +5,37 @@ import * as AvatarPrimitive from '@radix-ui/react-avatar';
55

66
import { cn } from '~/lib/utils';
77

8-
const Avatar = React.forwardRef<
9-
React.ElementRef<typeof AvatarPrimitive.Root>,
10-
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
11-
>(({ className, ...props }, ref) => (
12-
<AvatarPrimitive.Root
13-
ref={ref}
14-
className={cn('relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full', className)}
15-
{...props}
16-
/>
17-
));
18-
Avatar.displayName = AvatarPrimitive.Root.displayName;
8+
function Avatar({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Root>) {
9+
return (
10+
<AvatarPrimitive.Root
11+
data-slot="avatar"
12+
className={cn('relative flex size-8 shrink-0 overflow-hidden rounded-full', className)}
13+
{...props}
14+
/>
15+
);
16+
}
1917

20-
const AvatarImage = React.forwardRef<
21-
React.ElementRef<typeof AvatarPrimitive.Image>,
22-
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
23-
>(({ className, ...props }, ref) => (
24-
<AvatarPrimitive.Image
25-
ref={ref}
26-
className={cn('aspect-square h-full w-full', className)}
27-
{...props}
28-
/>
29-
));
30-
AvatarImage.displayName = AvatarPrimitive.Image.displayName;
18+
function AvatarImage({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Image>) {
19+
return (
20+
<AvatarPrimitive.Image
21+
data-slot="avatar-image"
22+
className={cn('aspect-square size-full', className)}
23+
{...props}
24+
/>
25+
);
26+
}
3127

32-
const AvatarFallback = React.forwardRef<
33-
React.ElementRef<typeof AvatarPrimitive.Fallback>,
34-
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
35-
>(({ className, ...props }, ref) => (
36-
<AvatarPrimitive.Fallback
37-
ref={ref}
38-
className={cn(
39-
'flex h-full w-full items-center justify-center rounded-full bg-muted',
40-
className,
41-
)}
42-
{...props}
43-
/>
44-
));
45-
AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
28+
function AvatarFallback({
29+
className,
30+
...props
31+
}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
32+
return (
33+
<AvatarPrimitive.Fallback
34+
data-slot="avatar-fallback"
35+
className={cn('bg-muted flex size-full items-center justify-center rounded-full', className)}
36+
{...props}
37+
/>
38+
);
39+
}
4640

4741
export { Avatar, AvatarImage, AvatarFallback };

‎components/ui/button.tsx‎

Lines changed: 29 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -5,23 +5,24 @@ import { cva, type VariantProps } from 'class-variance-authority';
55
import { cn } from '~/lib/utils';
66

77
const buttonVariants = cva(
8-
'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
8+
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
99
{
1010
variants: {
1111
variant: {
12-
default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
13-
destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
12+
default: 'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
13+
destructive:
14+
'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40',
1415
outline:
15-
'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
16-
secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
16+
'border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground',
17+
secondary: 'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
1718
ghost: 'hover:bg-accent hover:text-accent-foreground',
1819
link: 'text-primary underline-offset-4 hover:underline',
1920
},
2021
size: {
21-
default: 'h-9 px-4 py-2',
22-
sm: 'h-8 rounded-md px-3 text-xs',
23-
lg: 'h-10 rounded-md px-8',
24-
icon: 'h-9 w-9',
22+
default: 'h-9 px-4 py-2 has-[>svg]:px-3',
23+
sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
24+
lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
25+
icon: 'size-9',
2526
},
2627
},
2728
defaultVariants: {
@@ -31,20 +32,25 @@ const buttonVariants = cva(
3132
},
3233
);
3334

34-
export interface ButtonProps
35-
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
36-
VariantProps<typeof buttonVariants> {
37-
asChild?: boolean;
38-
}
35+
function Button({
36+
className,
37+
variant,
38+
size,
39+
asChild = false,
40+
...props
41+
}: React.ComponentProps<'button'> &
42+
VariantProps<typeof buttonVariants> & {
43+
asChild?: boolean;
44+
}) {
45+
const Comp = asChild ? Slot : 'button';
3946

40-
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
41-
({ className, variant, size, asChild = false, ...props }, ref) => {
42-
const Comp = asChild ? Slot : 'button';
43-
return (
44-
<Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
45-
);
46-
},
47-
);
48-
Button.displayName = 'Button';
47+
return (
48+
<Comp
49+
data-slot="button"
50+
className={cn(buttonVariants({ variant, size, className }))}
51+
{...props}
52+
/>
53+
);
54+
}
4955

5056
export { Button, buttonVariants };

0 commit comments

Comments
 (0)