Skip to content

Commit 6bf92a5

Browse files
WarningImHack3rWarningImHack3r
authored
Upgrade to Tailwind 4 (#41)
1 parent dca53a2 commit 6bf92a5

File tree

17 files changed

+638
-737
lines changed

17 files changed

+638
-737
lines changed

‎.prettierrc‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,5 +11,6 @@
1111
"parser": "svelte"
1212
}
1313
}
14-
]
14+
],
15+
"tailwindStylesheet": "./src/app.css"
1516
}

‎package.json‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -24,12 +24,12 @@
2424
"@sveltejs/kit": "^2.17.1",
2525
"@sveltejs/vite-plugin-svelte": "^5.0.3",
2626
"@tailwindcss/typography": "^0.5.16",
27+
"@tailwindcss/vite": "^4.0.4",
2728
"@total-typescript/ts-reset": "^0.6.1",
2829
"@types/eslint-config-prettier": "^6.11.3",
2930
"@types/semver": "^7.5.8",
3031
"@vercel/speed-insights": "^1.1.0",
3132
"arctic": "^3.2.4",
32-
"autoprefixer": "^10.4.20",
3333
"bits-ui": "1.0.0-next.89",
3434
"clsx": "^2.1.1",
3535
"eslint": "^9.20.0",
@@ -39,8 +39,6 @@
3939
"lucide-svelte": "^0.475.0",
4040
"mode-watcher": "^0.5.1",
4141
"octokit": "^4.1.1",
42-
"postcss": "^8.5.1",
43-
"postcss-load-config": "^6.0.1",
4442
"prettier": "^3.4.2",
4543
"prettier-plugin-svelte": "^3.3.3",
4644
"prettier-plugin-tailwindcss": "^0.6.11",
@@ -54,9 +52,9 @@
5452
"svelte-persisted-store": "^0.12.0",
5553
"svelte-sonner": "^0.3.28",
5654
"sveltekit-search-params": "^3.0.0",
57-
"tailwind-merge": "^2.6.0",
55+
"tailwind-merge": "^3.0.1",
5856
"tailwind-variants": "^0.3.1",
59-
"tailwindcss": "^3.4.17",
57+
"tailwindcss": "^4.0.4",
6058
"tailwindcss-animate": "^1.0.7",
6159
"tslib": "^2.8.1",
6260
"typescript": "^5.7.3",

‎pnpm-lock.yaml‎

Lines changed: 371 additions & 508 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎postcss.config.cjs‎

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎src/app.css‎

Lines changed: 162 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,162 @@
1+
@import "tailwindcss";
2+
@plugin "@tailwindcss/typography";
3+
@plugin "tailwindcss-animate";
4+
5+
@variant dark (&:is(.dark *));
6+
7+
@theme {
8+
--breakpoint-xs: 475px;
9+
--breakpoint-2xl: 1400px;
10+
11+
--color-background: hsl(var(--background));
12+
--color-foreground: hsl(var(--foreground));
13+
14+
--color-card: hsl(var(--card));
15+
--color-card-foreground: hsl(var(--card-foreground));
16+
17+
--color-popover: hsl(var(--popover));
18+
--color-popover-foreground: hsl(var(--popover-foreground));
19+
20+
--color-primary: hsl(var(--primary));
21+
--color-primary-foreground: hsl(var(--primary-foreground));
22+
23+
--color-secondary: hsl(var(--secondary));
24+
--color-secondary-foreground: hsl(var(--secondary-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-destructive: hsl(var(--destructive));
33+
--color-destructive-foreground: hsl(var(--destructive-foreground));
34+
35+
--color-border: hsl(var(--border));
36+
--color-input: hsl(var(--input));
37+
--color-ring: hsl(var(--ring));
38+
39+
/*
40+
--color-sidebar: hsl(var(--sidebar-background));
41+
--color-sidebar-foreground: hsl(var(--sidebar-foreground));
42+
--color-sidebar-primary: hsl(var(--sidebar-primary));
43+
--color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground));
44+
--color-sidebar-accent: hsl(var(--sidebar-accent));
45+
--color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground));
46+
--color-sidebar-border: hsl(var(--sidebar-border));
47+
--color-sidebar-ring: hsl(var(--sidebar-ring));
48+
*/
49+
50+
--radius-xl: calc(var(--radius) + 4px);
51+
--radius-lg: var(--radius);
52+
--radius-md: calc(var(--radius) - 2px);
53+
--radius-sm: calc(var(--radius) - 4px);
54+
55+
--animate-accordion-down: accordion-down 0.2s ease-out;
56+
--animate-accordion-up: accordion-up 0.2s ease-out;
57+
--animate-caret-blink: caret-blink 1.25s ease-out infinite;
58+
59+
@keyframes accordion-down {
60+
from {
61+
height: 0;
62+
}
63+
to {
64+
height: var(--bits-accordion-content-height);
65+
}
66+
}
67+
68+
@keyframes accordion-up {
69+
from {
70+
height: var(--bits-accordion-content-height);
71+
}
72+
to {
73+
height: 0;
74+
}
75+
}
76+
77+
@keyframes caret-blink {
78+
0%,
79+
70%,
80+
100% {
81+
opacity: 1;
82+
}
83+
84+
20%,
85+
50% {
86+
opacity: 0;
87+
}
88+
}
89+
}
90+
91+
@utility container {
92+
margin-inline: auto;
93+
padding-inline: 2rem;
94+
/* Cancels the undocumented default breakpoint-driven max-width */
95+
max-width: var(--breakpoint-2xl);
96+
}
97+
98+
@layer base {
99+
:root {
100+
--background: 0 0% 100%;
101+
--foreground: 20 14.3% 4.1%;
102+
--card: 0 0% 100%;
103+
--card-foreground: 20 14.3% 4.1%;
104+
--popover: 0 0% 100%;
105+
--popover-foreground: 20 14.3% 4.1%;
106+
--primary: 24.6 95% 53.1%;
107+
--primary-foreground: 60 9.1% 97.8%;
108+
--secondary: 60 4.8% 95.9%;
109+
--secondary-foreground: 24 9.8% 10%;
110+
--muted: 60 4.8% 95.9%;
111+
--muted-foreground: 25 5.3% 44.7%;
112+
--accent: 60 4.8% 95.9%;
113+
--accent-foreground: 24 9.8% 10%;
114+
--destructive: 0 72.22% 50.59%;
115+
--destructive-foreground: 60 9.1% 97.8%;
116+
--border: 20 5.9% 90%;
117+
--input: 20 5.9% 90%;
118+
--ring: 24.6 95% 53.1%;
119+
--radius: 0.5rem;
120+
}
121+
.dark {
122+
--background: 20 14.3% 4.1%;
123+
--foreground: 60 9.1% 97.8%;
124+
--card: 20 14.3% 4.1%;
125+
--card-foreground: 60 9.1% 97.8%;
126+
--popover: 20 14.3% 4.1%;
127+
--popover-foreground: 60 9.1% 97.8%;
128+
--primary: 20.5 90.2% 48.2%;
129+
--primary-foreground: 60 9.1% 97.8%;
130+
--secondary: 12 6.5% 15.1%;
131+
--secondary-foreground: 60 9.1% 97.8%;
132+
--muted: 12 6.5% 15.1%;
133+
--muted-foreground: 24 5.4% 63.9%;
134+
--accent: 12 6.5% 15.1%;
135+
--accent-foreground: 60 9.1% 97.8%;
136+
--destructive: 0 72.2% 50.6%;
137+
--destructive-foreground: 60 9.1% 97.8%;
138+
--border: 12 6.5% 15.1%;
139+
--input: 12 6.5% 15.1%;
140+
--ring: 20.5 90.2% 48.2%;
141+
}
142+
}
143+
144+
@layer base {
145+
::selection {
146+
@apply bg-primary text-primary-foreground;
147+
}
148+
149+
* {
150+
@apply border-border;
151+
}
152+
153+
body {
154+
@apply flex min-h-screen flex-col bg-background text-foreground;
155+
}
156+
157+
/* I like pointer cursors on buttons */
158+
button:not(:disabled),
159+
[role="button"]:not(:disabled) {
160+
cursor: pointer;
161+
}
162+
}

‎src/app.pcss‎

Lines changed: 0 additions & 63 deletions
This file was deleted.

‎src/lib/components/BlinkingBadge.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636
{#if show && shouldShowPulse}
3737
<div class="relative inline-flex">
3838
{@render children?.()}
39-
<span class="absolute right-0 top-0 -mr-0.5 -mt-0.5 flex size-2.5">
39+
<span class="absolute top-0 right-0 -mt-0.5 -mr-0.5 flex size-2.5">
4040
<span
4141
class="absolute inline-flex h-full w-full animate-ping rounded-full bg-primary opacity-75"
4242
></span>

‎src/lib/components/MarkdownRenderer.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@
3131
<svelte:element
3232
this={inline ? "span" : "div"}
3333
class={cn(
34-
"prose dark:prose-invert prose-a:no-underline prose-a:underline-offset-4 prose-a:[overflow-wrap:_anywhere] hover:prose-a:underline prose-code:[overflow-wrap:_anywhere] prose-li:my-1",
34+
"prose dark:prose-invert prose-a:[overflow-wrap:_anywhere] prose-a:text-primary prose-a:no-underline prose-a:underline-offset-4 prose-a:hover:underline prose-code:[overflow-wrap:_anywhere] prose-li:my-1",
3535
"prose-pre:text-wrap", // remove with TODO
3636
inline && "*:inline",
3737
className

0 commit comments

Comments
 (0)