Skip to content

Commit f7f7c8b

Browse files
taevel02taevel02
committed
feat: upgrade tailwindcss@4 and other dependencies
1 parent 8a92590 commit f7f7c8b

File tree

9 files changed

+2514
-1842
lines changed

9 files changed

+2514
-1842
lines changed

Diff for: ‎app/components/ui/Badge.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,14 @@ import { cva, type VariantProps } from "class-variance-authority";
44
import cn from "~/utils/cn";
55

66
const badgeVariants = cva(
7-
"inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
7+
"inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2",
88
{
99
variants: {
1010
variant: {
11-
default: "border-transparent bg-primary text-primary-foreground shadow",
11+
default: "border-transparent bg-primary text-primary-foreground shadow-sm",
1212
secondary: "border-transparent bg-secondary text-secondary-foreground",
1313
destructive:
14-
"border-transparent bg-destructive text-destructive-foreground shadow",
14+
"border-transparent bg-destructive text-destructive-foreground shadow-sm",
1515
outline: "text-muted-foreground",
1616
},
1717
},

Diff for: ‎app/root.tsx

+2-4
Original file line numberDiff line numberDiff line change
@@ -17,14 +17,12 @@ import { Footer } from "./components/Footer";
1717

1818
import { GoogleAnalyticsScripts } from "./utils/google-analytics";
1919

20-
import resetStyles from "./styles/reset.css";
2120
import globalStyles from "./styles/globals.css";
2221
import articleStyles from "./styles/article.css";
2322

2423
import blogConfig from "blog.config";
2524

2625
export const links: LinksFunction = () => [
27-
{ rel: "stylesheet", href: resetStyles },
2826
{ rel: "stylesheet", href: globalStyles },
2927
{ rel: "stylesheet", href: articleStyles },
3028
{
@@ -33,7 +31,7 @@ export const links: LinksFunction = () => [
3331
},
3432
{
3533
rel: "stylesheet",
36-
href: "https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard-dynamic-subset.min.css",
34+
href: "https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/variable/pretendardvariable-dynamic-subset.min.css",
3735
},
3836
{
3937
rel: "icon",
@@ -78,7 +76,7 @@ export default function App() {
7876

7977
function Layout({ children }: { children: React.ReactNode }) {
8078
return (
81-
<div className="container max-w-screen-md overflow-auto">
79+
<div className="container max-w-(--breakpoint-md) overflow-auto">
8280
<GlobalNavigationBar />
8381
{children}
8482
<Footer />

Diff for: ‎app/styles/article.css

+4-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,10 @@ article > p > a {
1717
}
1818

1919
article > p > strong {
20-
font-family: "Pretendard", system-ui, sans-serif;
20+
font-family: "Pretendard Variable", Pretendard, -apple-system,
21+
BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI",
22+
"Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji",
23+
"Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
2124
font-weight: 500;
2225
}
2326

Diff for: ‎app/styles/globals.css

+82-30
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,75 @@
1-
@tailwind base;
2-
@tailwind components;
3-
@tailwind utilities;
1+
@import "tailwindcss";
2+
3+
@theme {
4+
--font-*: initial;
5+
--font-sans: "Pretendard Variable", Pretendard, -apple-system,
6+
BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI",
7+
"Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji",
8+
"Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
9+
--font-serif: MaruBuri;
10+
11+
--color-border: hsl(var(--border));
12+
--color-input: hsl(var(--input));
13+
--color-ring: hsl(var(--ring));
14+
--color-background: hsl(var(--background));
15+
--color-foreground: hsl(var(--foreground));
16+
17+
--color-primary: hsl(var(--primary));
18+
--color-primary-foreground: hsl(var(--primary-foreground));
19+
20+
--color-secondary: hsl(var(--secondary));
21+
--color-secondary-foreground: hsl(var(--secondary-foreground));
22+
23+
--color-destructive: hsl(var(--destructive));
24+
--color-destructive-foreground: hsl(var(--destructive-foreground));
25+
26+
--color-muted: hsl(var(--muted));
27+
--color-muted-foreground: hsl(var(--muted-foreground));
28+
29+
--color-accent: hsl(var(--accent));
30+
--color-accent-foreground: hsl(var(--accent-foreground));
31+
32+
--color-popover: hsl(var(--popover));
33+
--color-popover-foreground: hsl(var(--popover-foreground));
34+
35+
--color-card: hsl(var(--card));
36+
--color-card-foreground: hsl(var(--card-foreground));
37+
38+
--radius-lg: var(--radius);
39+
--radius-md: calc(var(--radius) - 2px);
40+
--radius-sm: calc(var(--radius) - 4px);
41+
42+
--animate-accordion-down: accordion-down 0.2s ease-out;
43+
--animate-accordion-up: accordion-up 0.2s ease-out;
44+
45+
@keyframes accordion-down {
46+
from {
47+
height: 0;
48+
}
49+
to {
50+
height: var(--radix-accordion-content-height);
51+
}
52+
}
53+
@keyframes accordion-up {
54+
from {
55+
height: var(--radix-accordion-content-height);
56+
}
57+
to {
58+
height: 0;
59+
}
60+
}
61+
}
62+
63+
@utility container {
64+
margin-inline: auto;
65+
padding-inline: 2rem;
66+
@media (width >= --theme(--breakpoint-sm)) {
67+
max-width: none;
68+
}
69+
@media (width >= 1400px) {
70+
max-width: 1400px;
71+
}
72+
}
473

574
@layer base {
675
:root {
@@ -26,32 +95,12 @@
2695
--radius: 0.5rem;
2796
}
2897

29-
.dark,
30-
:root[class~="dark"] {
31-
--background: 222.2 84% 4.9%;
32-
--foreground: 210 40% 98%;
33-
--card: 222.2 84% 4.9%;
34-
--card-foreground: 210 40% 98%;
35-
--popover: 222.2 84% 4.9%;
36-
--popover-foreground: 210 40% 98%;
37-
--primary: 217.2 91.2% 59.8%;
38-
--primary-foreground: 222.2 47.4% 11.2%;
39-
--secondary: 217.2 32.6% 17.5%;
40-
--secondary-foreground: 210 40% 98%;
41-
--muted: 217.2 32.6% 17.5%;
42-
--muted-foreground: 215 20.2% 65.1%;
43-
--accent: 217.2 32.6% 17.5%;
44-
--accent-foreground: 210 40% 98%;
45-
--destructive: 0 62.8% 30.6%;
46-
--destructive-foreground: 210 40% 98%;
47-
--border: 217.2 32.6% 17.5%;
48-
--input: 217.2 32.6% 17.5%;
49-
--ring: 224.3 76.3% 48%;
50-
}
51-
}
52-
53-
@layer base {
54-
* {
98+
*,
99+
::after,
100+
::before,
101+
::backdrop,
102+
::file-selector-button {
103+
border-color: var(--color-gray-200, currentColor);
55104
@apply border-border;
56105
}
57106

@@ -75,7 +124,10 @@
75124
a,
76125
span,
77126
div {
78-
font-family: "Pretendard", system-ui, sans-serif;
127+
font-family: "Pretendard Variable", Pretendard, -apple-system,
128+
BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI",
129+
"Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic",
130+
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
79131
color: hsl(var(--foreground));
80132
}
81133
}

Diff for: ‎app/styles/reset.css

-89
This file was deleted.

Diff for: ‎package.json

+28-28
Original file line numberDiff line numberDiff line change
@@ -12,49 +12,49 @@
1212
"typecheck": "tsc"
1313
},
1414
"dependencies": {
15-
"@radix-ui/react-slot": "^1.1.0",
16-
"@remix-run/css-bundle": "^2.13.1",
17-
"@remix-run/node": "^2.13.1",
18-
"@remix-run/react": "^2.13.1",
19-
"@remix-run/serve": "^2.13.1",
20-
"@remixicon/react": "^4.5.0",
21-
"@shikijs/rehype": "^1.22.2",
22-
"@vercel/analytics": "^1.4.0",
23-
"@vercel/speed-insights": "^1.1.0",
24-
"class-variance-authority": "^0.7.0",
15+
"@radix-ui/react-slot": "^1.1.2",
16+
"@remix-run/css-bundle": "^2.16.2",
17+
"@remix-run/node": "^2.16.2",
18+
"@remix-run/react": "^2.16.2",
19+
"@remix-run/serve": "^2.16.2",
20+
"@remixicon/react": "^4.6.0",
21+
"@shikijs/rehype": "^3.2.1",
22+
"@vercel/analytics": "^1.5.0",
23+
"@vercel/speed-insights": "^1.2.0",
24+
"class-variance-authority": "^0.7.1",
2525
"clsx": "^2.1.1",
2626
"dayjs": "^1.11.13",
2727
"front-matter": "^4.0.2",
28-
"globby": "^14.0.2",
29-
"isbot": "^5.1.17",
30-
"react": "^18.3.1",
31-
"react-dom": "^18.3.1",
28+
"globby": "^14.1.0",
29+
"isbot": "^5.1.25",
30+
"react": "^19.0.0",
31+
"react-dom": "^19.0.0",
3232
"rehype-stringify": "^10.0.1",
3333
"remark-frontmatter": "^5.0.0",
3434
"remark-parse": "^11.0.0",
3535
"remark-rehype": "^11.1.1",
36-
"tailwind-merge": "^2.5.4",
36+
"tailwind-merge": "^3.0.2",
3737
"tailwindcss-animate": "^1.0.7",
3838
"unified": "^11.0.5"
3939
},
4040
"devDependencies": {
41-
"@remix-run/dev": "^2.13.1",
41+
"@remix-run/dev": "^2.16.2",
42+
"@tailwindcss/postcss": "^4.0.14",
4243
"@types/fs-extra": "^11.0.4",
43-
"@types/react": "^18.3.12",
44-
"@types/react-dom": "^18.3.1",
45-
"@typescript-eslint/eslint-plugin": "^8.13.0",
46-
"@typescript-eslint/parser": "^8.13.0",
47-
"autoprefixer": "^10.4.20",
48-
"eslint": "^9.14.0",
49-
"eslint-import-resolver-typescript": "^3.6.3",
44+
"@types/react": "^19.0.12",
45+
"@types/react-dom": "^19.0.4",
46+
"@typescript-eslint/eslint-plugin": "^8.27.0",
47+
"@typescript-eslint/parser": "^8.27.0",
48+
"eslint": "^9.22.0",
49+
"eslint-import-resolver-typescript": "^4.2.2",
5050
"eslint-plugin-import": "^2.31.0",
5151
"eslint-plugin-jsx-a11y": "^6.10.2",
52-
"eslint-plugin-react": "^7.37.2",
53-
"eslint-plugin-react-hooks": "^5.0.0",
54-
"fs-extra": "^11.2.0",
55-
"tailwindcss": "^3.4.14",
52+
"eslint-plugin-react": "^7.37.4",
53+
"eslint-plugin-react-hooks": "^5.2.0",
54+
"fs-extra": "^11.3.0",
55+
"tailwindcss": "^4.0.14",
5656
"ts-node": "^10.9.2",
57-
"typescript": "^5.6.3"
57+
"typescript": "^5.8.2"
5858
},
5959
"engines": {
6060
"node": "22.x"

0 commit comments

Comments
 (0)