Skip to content

Commit a6c2c41

Browse files
codebyaadicodebyaadi
committed
migration: tailwind v3 --> v4
1 parent e834ada commit a6c2c41

File tree

18 files changed

+105
-105
lines changed

18 files changed

+105
-105
lines changed

‎www/bun.lockb

10.6 KB
Binary file not shown.

‎www/package.json

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@
3535
"zod": "^3.23.8"
3636
},
3737
"devDependencies": {
38+
"@tailwindcss/postcss": "^4.1.3",
3839
"@types/node": "^20",
3940
"@types/react": "^18",
4041
"@types/react-dom": "^18",
@@ -43,8 +44,8 @@
4344
"eslint-config-prettier": "^9.1.0",
4445
"postcss": "^8",
4546
"prettier": "^3.3.3",
46-
"prettier-plugin-tailwindcss": "^0.6.8",
47-
"tailwindcss": "^3.4.1",
47+
"prettier-plugin-tailwindcss": "^0.6.11",
48+
"tailwindcss": "^4.1.3",
4849
"typescript": "^5"
4950
}
5051
}

‎www/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

‎www/src/app/(auth)/layout.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@ export default function AuthLayout({
99
children: React.ReactNode;
1010
}) {
1111
return (
12-
<div className='relative flex h-screen w-full items-center font-outfit'>
13-
<nav className='fixed top-0 z-[1] w-full bg-transparent px-0 font-outfit lg:px-6'>
12+
<div className='font-outfit relative flex h-screen w-full items-center'>
13+
<nav className='font-outfit fixed top-0 z-1 w-full bg-transparent px-0 lg:px-6'>
1414
<div className='mx-4 flex items-center justify-between py-2'>
1515
<Link href='/' className='font-semibold text-amber-300 lg:text-white'>
1616
{siteConfig.name}

‎www/src/app/(auth)/signin/page.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,7 @@ export default function SignIn() {
112112
</FormItem>
113113
)}
114114
/>
115-
<Button type='submit' variant='amber' className='!mt-4 w-full'>
115+
<Button type='submit' variant='amber' className='mt-4! w-full'>
116116
Log In
117117
</Button>
118118
</CardContent>

‎www/src/app/(auth)/signup/page.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -135,7 +135,7 @@ export default function SignUp() {
135135
</FormItem>
136136
)}
137137
/>
138-
<Button type='submit' variant='amber' className='!mt-4 w-full'>
138+
<Button type='submit' variant='amber' className='mt-4! w-full'>
139139
Sign Up
140140
</Button>
141141
</CardContent>

‎www/src/app/(landing)/layout.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export default function LandingLayout({
77
children: React.ReactNode;
88
}) {
99
return (
10-
<div className='relative pt-16 font-outfit'>
10+
<div className='font-outfit relative pt-16'>
1111
<Navbar />
1212
<div className='absolute top-0 h-1/3 w-full' />
1313
{children}

‎www/src/app/(landing)/page.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export default function Home() {
1414
<h1 className='text-4xl font-semibold text-amber-300 md:text-4xl lg:text-5xl'>
1515
Stay Informed. Stay Connected
1616
</h1>
17-
<p className='leading-tight text-muted-foreground'>
17+
<p className='text-muted-foreground leading-tight'>
1818
Feedoku brings the power of real-time news and content aggregation
1919
to your fingertips. Discover, organize, and read your favorite RSS
2020
feeds from across the web in one simple platform.

‎www/src/app/globals.css

Lines changed: 70 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,74 @@
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+
--font-outfit: var(--font-outfit), ui-sans-serif, system-ui, sans-serif,
9+
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
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+
--color-chart-1: hsl(var(--chart-1));
40+
--color-chart-2: hsl(var(--chart-2));
41+
--color-chart-3: hsl(var(--chart-3));
42+
--color-chart-4: hsl(var(--chart-4));
43+
--color-chart-5: hsl(var(--chart-5));
44+
45+
--radius-lg: var(--radius);
46+
--radius-md: calc(var(--radius) - 2px);
47+
--radius-sm: calc(var(--radius) - 4px);
48+
}
49+
50+
/*
51+
The default border color has changed to `currentcolor` in Tailwind CSS v4,
52+
so we've added these compatibility styles to make sure everything still
53+
looks the same as it did with Tailwind CSS v3.
54+
55+
If we ever want to remove these styles, we need to add an explicit border
56+
color utility to any element that depends on these defaults.
57+
*/
58+
@layer base {
59+
*,
60+
::after,
61+
::before,
62+
::backdrop,
63+
::file-selector-button {
64+
border-color: var(--color-gray-200, currentcolor);
65+
}
66+
}
67+
68+
@layer utilities {
69+
body {
70+
font-family: Arial, Helvetica, sans-serif;
71+
}
772
}
873

974
@layer base {

‎www/src/components/_ui/animated-tooltip.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -68,10 +68,10 @@ export const AnimatedTooltip = ({
6868
rotate: rotate,
6969
whiteSpace: 'nowrap',
7070
}}
71-
className='absolute -left-1/2 -top-16 z-50 flex translate-x-1/2 flex-col items-center justify-center rounded-md bg-black px-4 py-2 text-xs shadow-xl'
71+
className='absolute -top-16 -left-1/2 z-50 flex translate-x-1/2 flex-col items-center justify-center rounded-md bg-black px-4 py-2 text-xs shadow-xl'
7272
>
73-
<div className='absolute inset-x-10 -bottom-px z-30 h-px w-[20%] bg-gradient-to-r from-transparent via-emerald-500 to-transparent' />
74-
<div className='absolute -bottom-px left-10 z-30 h-px w-[40%] bg-gradient-to-r from-transparent via-sky-500 to-transparent' />
73+
<div className='absolute inset-x-10 -bottom-px z-30 h-px w-[20%] bg-linear-to-r from-transparent via-emerald-500 to-transparent' />
74+
<div className='absolute -bottom-px left-10 z-30 h-px w-[40%] bg-linear-to-r from-transparent via-sky-500 to-transparent' />
7575
<div className='relative z-30 text-base font-bold text-white'>
7676
{item.name}
7777
</div>
@@ -85,7 +85,7 @@ export const AnimatedTooltip = ({
8585
width={100}
8686
src={item.image}
8787
alt={item.name}
88-
className='relative !m-0 h-12 w-12 rounded-full border-2 border-white object-cover object-top !p-0 transition duration-500 group-hover:z-30 group-hover:scale-105'
88+
className='relative m-0! h-12 w-12 rounded-full border-2 border-white object-cover object-top p-0! transition duration-500 group-hover:z-30 group-hover:scale-105'
8989
/>
9090
</div>
9191
))}

0 commit comments

Comments
 (0)