Skip to content

Commit 64af497

Browse files
rodneyosodorodneyosodo
committed
fix: update Tailwind CSS configuration and dependencies for compatibility
Signed-off-by: Rodney Osodo <socials@rodneyosodo.com>
1 parent 1cd6215 commit 64af497

17 files changed

+198
-346
lines changed

‎bun.lock

Lines changed: 51 additions & 200 deletions
Large diffs are not rendered by default.

‎package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,11 +31,12 @@
3131
},
3232
"devDependencies": {
3333
"@biomejs/biome": "^1.9.4",
34+
"@tailwindcss/postcss": "^4.0.17",
3435
"@types/node": "^22",
3536
"@types/react": "^19",
3637
"@types/react-dom": "^19",
3738
"postcss": "^8",
38-
"tailwindcss": "^3.4.17",
39+
"tailwindcss": "^4.0.17",
3940
"typescript": "^5"
4041
}
4142
}

‎postcss.config.mjs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/** @type {import('postcss-load-config').Config} */
22
const config = {
33
plugins: {
4-
tailwindcss: {},
4+
'@tailwindcss/postcss': {},
55
},
66
};
77

‎src/app/(about)/overview/_components/organising-team.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -165,7 +165,7 @@ export function OrganisingTeam() {
165165
</AnimatePresence>
166166
<AnimatePresence>
167167
{active && typeof active === "object" ? (
168-
<div className="fixed inset-0 grid place-items-center z-[100]">
168+
<div className="fixed inset-0 grid place-items-center z-100">
169169
<motion.button
170170
key={`button-${active.id}-${id}`}
171171
layout={true}

‎src/app/globals.css

Lines changed: 112 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,116 @@
1-
@tailwind base;
2-
@tailwind components;
3-
@tailwind utilities;
1+
@import 'tailwindcss';
42

5-
body {
6-
font-family: Arial, Helvetica, sans-serif;
3+
@plugin 'tailwindcss-animate';
4+
5+
@custom-variant dark (&:is(.dark *));
6+
7+
@theme {
8+
--color-background: hsl(var(--background));
9+
--color-foreground: hsl(var(--foreground));
10+
11+
--color-card: hsl(var(--card));
12+
--color-card-foreground: hsl(var(--card-foreground));
13+
14+
--color-popover: hsl(var(--popover));
15+
--color-popover-foreground: hsl(var(--popover-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-muted: hsl(var(--muted));
24+
--color-muted-foreground: hsl(var(--muted-foreground));
25+
26+
--color-accent: hsl(var(--accent));
27+
--color-accent-foreground: hsl(var(--accent-foreground));
28+
29+
--color-destructive: hsl(var(--destructive));
30+
--color-destructive-foreground: hsl(var(--destructive-foreground));
31+
32+
--color-border: hsl(var(--border));
33+
--color-input: hsl(var(--input));
34+
--color-ring: hsl(var(--ring));
35+
36+
--color-chart-1: hsl(var(--chart-1));
37+
--color-chart-2: hsl(var(--chart-2));
38+
--color-chart-3: hsl(var(--chart-3));
39+
--color-chart-4: hsl(var(--chart-4));
40+
--color-chart-5: hsl(var(--chart-5));
41+
42+
--color-color-1: hsl(var(--color-1));
43+
--color-color-2: hsl(var(--color-2));
44+
--color-color-3: hsl(var(--color-3));
45+
--color-color-4: hsl(var(--color-4));
46+
--color-color-5: hsl(var(--color-5));
47+
48+
--radius-lg: var(--radius);
49+
--radius-md: calc(var(--radius) - 2px);
50+
--radius-sm: calc(var(--radius) - 4px);
51+
52+
--animate-pulse: pulse var(--duration) ease-out infinite;
53+
--animate-accordion-down: accordion-down 0.2s ease-out;
54+
--animate-accordion-up: accordion-up 0.2s ease-out;
55+
--animate-rainbow: rainbow var(--speed, 2s) infinite linear;
56+
57+
@keyframes pulse {
58+
0%,
59+
100% {
60+
box-shadow: 0 0 0 0 var(--pulse-color);
61+
}
62+
50% {
63+
box-shadow: 0 0 0 8px var(--pulse-color);
64+
}
65+
}
66+
@keyframes accordion-down {
67+
from {
68+
height: 0;
69+
}
70+
to {
71+
height: var(--radix-accordion-content-height);
72+
}
73+
}
74+
@keyframes accordion-up {
75+
from {
76+
height: var(--radix-accordion-content-height);
77+
}
78+
to {
79+
height: 0;
80+
}
81+
}
82+
@keyframes rainbow {
83+
0% {
84+
background-position: 0%;
85+
}
86+
100% {
87+
background-position: 200%;
88+
}
89+
}
90+
}
91+
92+
/*
93+
The default border color has changed to `currentColor` in Tailwind CSS v4,
94+
so we've added these compatibility styles to make sure everything still
95+
looks the same as it did with Tailwind CSS v3.
96+
97+
If we ever want to remove these styles, we need to add an explicit border
98+
color utility to any element that depends on these defaults.
99+
*/
100+
@layer base {
101+
*,
102+
::after,
103+
::before,
104+
::backdrop,
105+
::file-selector-button {
106+
border-color: var(--color-gray-200, currentColor);
107+
}
108+
}
109+
110+
@layer utilities {
111+
body {
112+
font-family: Arial, Helvetica, sans-serif;
113+
}
7114
}
8115

9116
@layer base {

‎src/components/about-section.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export default function AboutSection() {
1616
</div>
1717
<div className="space-y-6 lg:space-y-10">
1818
<div className="flex">
19-
<Building2Icon className="flex-shrink-0 mt-2 h-6 w-6" />
19+
<Building2Icon className="shrink-0 mt-2 h-6 w-6" />
2020
<div className="ms-5 sm:ms-8">
2121
<h3 className="text-base sm:text-lg font-semibold">
2222
Building a welcoming community
@@ -28,7 +28,7 @@ export default function AboutSection() {
2828
</div>
2929
</div>
3030
<div className="flex">
31-
<Speech className="flex-shrink-0 mt-2 h-6 w-6" />
31+
<Speech className="shrink-0 mt-2 h-6 w-6" />
3232
<div className="ms-5 sm:ms-8">
3333
<h3 className="text-base sm:text-lg font-semibold">Talks</h3>
3434
<p className="mt-1 text-muted-foreground">
@@ -38,7 +38,7 @@ export default function AboutSection() {
3838
</div>
3939
</div>
4040
<div className="flex">
41-
<Code2Icon className="flex-shrink-0 mt-2 h-6 w-6" />
41+
<Code2Icon className="shrink-0 mt-2 h-6 w-6" />
4242
<div className="ms-5 sm:ms-8">
4343
<h3 className="text-base sm:text-lg font-semibold">
4444
Workshops
@@ -50,7 +50,7 @@ export default function AboutSection() {
5050
</div>
5151
</div>
5252
<div className="flex">
53-
<ThumbsUpIcon className="flex-shrink-0 mt-2 h-6 w-6" />
53+
<ThumbsUpIcon className="shrink-0 mt-2 h-6 w-6" />
5454
<div className="ms-5 sm:ms-8">
5555
<h3 className="text-base sm:text-lg font-semibold">
5656
Simple and all-inclusive

‎src/components/hero-section.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,10 +35,10 @@ export default function HeroSection() {
3535
className="rounded-xl"
3636
alt="PyConKE 2022"
3737
/>
38-
<div className="absolute bottom-12 -start-20 -z-[1] w-48 h-48 bg-gradient-to-b from-primary-foreground via-primary-foreground to-background p-px rounded-lg">
38+
<div className="absolute bottom-12 -start-20 -z-1 w-48 h-48 bg-linear-to-b from-primary-foreground via-primary-foreground to-background p-px rounded-lg">
3939
<div className="w-48 h-48 rounded-lg bg-background/10" />
4040
</div>
41-
<div className="absolute -top-12 -end-20 -z-[1] w-48 h-48 bg-gradient-to-t from-primary-foreground via-primary-foreground to-background p-px rounded-full">
41+
<div className="absolute -top-12 -end-20 -z-1 w-48 h-48 bg-linear-to-t from-primary-foreground via-primary-foreground to-background p-px rounded-full">
4242
<div className="w-48 h-48 rounded-full bg-background/10" />
4343
</div>
4444
</div>

‎src/components/mdx.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ const components = {
6060
),
6161
p: ({ className = "" as string, ...props }) => (
6262
<p
63-
className={cn("leading-7 [&:not(:first-child)]:mt-6", className)}
63+
className={cn("leading-7 not-first:mt-6", className)}
6464
{...props}
6565
/>
6666
),
@@ -76,7 +76,7 @@ const components = {
7676
blockquote: ({ className = "" as string, ...props }) => (
7777
<blockquote
7878
className={cn(
79-
"mt-6 border-l-2 pl-6 italic [&>*]:text-muted-foreground",
79+
"mt-6 border-l-2 pl-6 italic *:text-muted-foreground",
8080
className,
8181
)}
8282
{...props}

‎src/components/nav-bar.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -141,7 +141,7 @@ export default function Navbar1() {
141141
<li key={item.title}>
142142
<a
143143
className={cn(
144-
"flex select-none gap-4 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
144+
"flex select-none gap-4 rounded-md p-3 leading-none no-underline outline-hidden transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
145145
)}
146146
href={item.url}
147147
>
@@ -170,7 +170,7 @@ export default function Navbar1() {
170170
<li key={item.title}>
171171
<a
172172
className={cn(
173-
"flex select-none gap-4 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
173+
"flex select-none gap-4 rounded-md p-3 leading-none no-underline outline-hidden transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
174174
)}
175175
href={item.url}
176176
>
@@ -273,7 +273,7 @@ export default function Navbar1() {
273273
<a
274274
key={item.title}
275275
className={cn(
276-
"flex select-none gap-4 rounded-md p-3 leading-none outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
276+
"flex select-none gap-4 rounded-md p-3 leading-none outline-hidden transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
277277
)}
278278
href={item.url}
279279
>
@@ -296,7 +296,7 @@ export default function Navbar1() {
296296
<a
297297
key={item.title}
298298
className={cn(
299-
"flex select-none gap-4 rounded-md p-3 leading-none outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
299+
"flex select-none gap-4 rounded-md p-3 leading-none outline-hidden transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
300300
)}
301301
href={item.url}
302302
>

‎src/components/ui/badge.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,16 @@ import { cva, type VariantProps } from "class-variance-authority";
44
import { cn } from "@/lib/utils";
55

66
const badgeVariants = cva(
7-
"inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors 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 font-semibold transition-colors focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2",
88
{
99
variants: {
1010
variant: {
1111
default:
12-
"border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
12+
"border-transparent bg-primary text-primary-foreground shadow-sm hover:bg-primary/80",
1313
secondary:
1414
"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
1515
destructive:
16-
"border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
16+
"border-transparent bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/80",
1717
outline: "text-foreground",
1818
},
1919
},

0 commit comments

Comments
 (0)