Skip to content

Commit ca73396

Browse files
xerocxeroc
committed
refactor: migrate to tailwindcss 4
1 parent c9fc2e4 commit ca73396

14 files changed

Lines changed: 426 additions & 592 deletions

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,13 +18,13 @@
1818
"author": "ChainSquad GmbH",
1919
"license": "ISC",
2020
"dependencies": {
21-
"autoprefixer": "^10.4.24",
21+
"@tailwindcss/postcss": "^4.2.2",
2222
"lucide-react": "^0.564.0",
2323
"postcss": "^8.5.6",
2424
"react": "^19.2.4",
2525
"react-dom": "^19.2.4",
2626
"react-router-dom": "^7.13.1",
27-
"tailwindcss": "^3.4.19"
27+
"tailwindcss": "^4.2.2"
2828
},
2929
"devDependencies": {
3030
"@types/node": "25.2.3",

‎pnpm-lock.yaml‎

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

‎postcss.config.cjs‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
module.exports = {
22
plugins: {
3-
tailwindcss: {},
4-
autoprefixer: {},
3+
'@tailwindcss/postcss': {},
54
},
65
}

‎src/globals.css‎

Lines changed: 57 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,60 @@
1-
@tailwind base;
2-
@tailwind components;
3-
@tailwind utilities;
1+
@import 'tailwindcss';
2+
3+
@custom-variant dark (&:is(.dark *));
4+
5+
@theme {
6+
--color-border: hsl(var(--border));
7+
--color-input: hsl(var(--input));
8+
--color-ring: hsl(var(--ring));
9+
--color-background: hsl(var(--background));
10+
--color-foreground: hsl(var(--foreground));
11+
12+
--color-primary: hsl(var(--primary));
13+
--color-primary-foreground: hsl(var(--primary-foreground));
14+
15+
--color-secondary: hsl(var(--secondary));
16+
--color-secondary-foreground: hsl(var(--secondary-foreground));
17+
18+
--color-destructive: hsl(var(--destructive));
19+
--color-destructive-foreground: hsl(var(--destructive-foreground));
20+
21+
--color-muted: hsl(var(--muted));
22+
--color-muted-foreground: hsl(var(--muted-foreground));
23+
24+
--color-accent: hsl(var(--accent));
25+
--color-accent-foreground: hsl(var(--accent-foreground));
26+
27+
--color-popover: hsl(var(--popover));
28+
--color-popover-foreground: hsl(var(--popover-foreground));
29+
30+
--color-card: hsl(var(--card));
31+
--color-card-foreground: hsl(var(--card-foreground));
32+
33+
--radius-lg: var(--radius);
34+
--radius-md: calc(var(--radius) - 2px);
35+
--radius-sm: calc(var(--radius) - 4px);
36+
37+
--font-sans: Roboto Mono, Inter, sans-serif;
38+
--font-mono: Roboto Mono, monospace;
39+
}
40+
41+
/*
42+
The default border color has changed to `currentcolor` in Tailwind CSS v4,
43+
so we've added these compatibility styles to make sure everything still
44+
looks the same as it did with Tailwind CSS v3.
45+
46+
If we ever want to remove these styles, we need to add an explicit border
47+
color utility to any element that depends on these defaults.
48+
*/
49+
@layer base {
50+
*,
51+
::after,
52+
::before,
53+
::backdrop,
54+
::file-selector-button {
55+
border-color: var(--color-gray-200, currentcolor);
56+
}
57+
}
458

559
@layer base {
660
:root {

‎src/pages/Contact.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -141,7 +141,7 @@ export default function ContactPage() {
141141
required
142142
placeholder="Your name"
143143
disabled={loading}
144-
className="bg-input/30 border-input placeholder:text-muted-foreground/50 h-11 w-full border px-4 text-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
144+
className="bg-input/30 border-input placeholder:text-muted-foreground/50 h-11 w-full border px-4 text-sm transition-colors focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
145145
/>
146146
</div>
147147

@@ -158,7 +158,7 @@ export default function ContactPage() {
158158
required
159159
placeholder="your@email.com"
160160
disabled={loading}
161-
className="bg-input/30 border-input placeholder:text-muted-foreground/50 h-11 w-full border px-4 text-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
161+
className="bg-input/30 border-input placeholder:text-muted-foreground/50 h-11 w-full border px-4 text-sm transition-colors focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
162162
/>
163163
</div>
164164
</div>
@@ -175,7 +175,7 @@ export default function ContactPage() {
175175
onChange={(e) => setCompany(e.target.value)}
176176
placeholder="Your company"
177177
disabled={loading}
178-
className="bg-input/30 border-input placeholder:text-muted-foreground/50 h-11 w-full border px-4 text-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
178+
className="bg-input/30 border-input placeholder:text-muted-foreground/50 h-11 w-full border px-4 text-sm transition-colors focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
179179
/>
180180
</div>
181181

@@ -189,7 +189,7 @@ export default function ContactPage() {
189189
value={projectType}
190190
onChange={(e) => setProjectType(e.target.value)}
191191
disabled={loading}
192-
className="bg-input/30 border-input h-11 w-full border px-4 text-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
192+
className="bg-input/30 border-input h-11 w-full border px-4 text-sm transition-colors focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
193193
>
194194
<option value="">Select project type</option>
195195
<option value="blockchain">Blockchain Development</option>
@@ -215,14 +215,14 @@ export default function ContactPage() {
215215
rows={6}
216216
placeholder="Tell us about your project..."
217217
disabled={loading}
218-
className="bg-input/30 border-input placeholder:text-muted-foreground/50 w-full border px-4 py-3 text-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
218+
className="bg-input/30 border-input placeholder:text-muted-foreground/50 w-full border px-4 py-3 text-sm transition-colors focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
219219
/>
220220
</div>
221221

222222
<button
223223
type="submit"
224224
disabled={loading || !name || !email || !message}
225-
className="bg-primary text-primary-foreground shadow-xs hover:bg-primary/90 inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-none font-medium text-sm outline-none transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 h-11 px-6"
225+
className="bg-primary text-primary-foreground shadow-2xs hover:bg-primary/90 inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-none font-medium text-sm outline-hidden transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 h-11 px-6"
226226
>
227227
{loading ? (
228228
"Sending..."

‎src/pages/Home.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -87,14 +87,14 @@ export default function Home() {
8787
<div className="mt-4 flex flex-col gap-3 sm:flex-row">
8888
<Link
8989
to="/contact"
90-
className="bg-primary text-primary-foreground shadow-xs hover:bg-primary/90 inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-none font-medium text-sm outline-none transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 h-11 px-6"
90+
className="bg-primary text-primary-foreground shadow-2xs hover:bg-primary/90 inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-none font-medium text-sm outline-hidden transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 h-11 px-6"
9191
>
9292
<Mail className="h-4 w-4" />
9393
Get in Touch
9494
</Link>
9595
<a
9696
href="#services"
97-
className="border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-none font-medium text-sm outline-none transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 h-11 px-6"
97+
className="border bg-background shadow-2xs hover:bg-accent hover:text-accent-foreground inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-none font-medium text-sm outline-hidden transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 h-11 px-6"
9898
>
9999
Our Services
100100
</a>
@@ -348,7 +348,7 @@ export default function Home() {
348348
</p>
349349
<Link
350350
to="/contact"
351-
className="bg-primary text-primary-foreground shadow-xs hover:bg-primary/90 inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-none font-medium text-sm outline-none transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 h-11 px-6"
351+
className="bg-primary text-primary-foreground shadow-2xs hover:bg-primary/90 inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-none font-medium text-sm outline-hidden transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 h-11 px-6"
352352
>
353353
<Mail className="h-4 w-4" />
354354
Contact Us

‎src/pages/products/Allowly.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -221,7 +221,7 @@ export default function AllowlyPage() {
221221
</div>
222222
<h1 className="text-4xl md:text-5xl lg:text-6xl font-bold leading-snug tracking-tighter">
223223
Pocket money,{" "}
224-
<span className="bg-gradient-to-r from-[#9945FF] to-[#14F195] bg-clip-text text-transparent">
224+
<span className="bg-linear-to-r from-[#9945FF] to-[#14F195] bg-clip-text text-transparent">
225225
the web3 way
226226
</span>
227227
</h1>
@@ -232,7 +232,7 @@ export default function AllowlyPage() {
232232
<div className="flex gap-3">
233233
<a
234234
href="https://allowly.app"
235-
className="bg-primary text-primary-foreground shadow-xs hover:bg-primary/90 inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-none font-medium text-sm outline-none transition-all h-11 px-6"
235+
className="bg-primary text-primary-foreground shadow-2xs hover:bg-primary/90 inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-none font-medium text-sm outline-hidden transition-all h-11 px-6"
236236
>
237237
Visit allowly.app
238238
<ArrowRight className="h-4 w-4" />
@@ -560,7 +560,7 @@ export default function AllowlyPage() {
560560
<div className="flex justify-center gap-4 flex-wrap">
561561
<a
562562
href="/human"
563-
className="bg-primary text-primary-foreground shadow-xs hover:bg-primary/90 inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-none font-medium text-sm h-11 px-6"
563+
className="bg-primary text-primary-foreground shadow-2xs hover:bg-primary/90 inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-none font-medium text-sm h-11 px-6"
564564
>
565565
<UserCircle className="h-4 w-4" />
566566
Subscriptions (Kids)

‎src/pages/products/Chaoscraft.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -177,7 +177,7 @@ export default function ChaosCraftPage() {
177177
</div>
178178
<h1 className="text-4xl md:text-5xl lg:text-6xl font-bold leading-snug tracking-tighter">
179179
Pay $1, plant a star,{" "}
180-
<span className="bg-gradient-to-r from-[#9945FF] to-[#14F195] bg-clip-text text-transparent">
180+
<span className="bg-linear-to-r from-[#9945FF] to-[#14F195] bg-clip-text text-transparent">
181181
watch chaos
182182
</span>
183183
</h1>
@@ -191,7 +191,7 @@ export default function ChaosCraftPage() {
191191
href="https://repo.fun"
192192
target="_blank"
193193
rel="noopener noreferrer"
194-
className="bg-primary text-primary-foreground shadow-xs hover:bg-primary/90 inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-none font-medium text-sm outline-none transition-all h-11 px-6"
194+
className="bg-primary text-primary-foreground shadow-2xs hover:bg-primary/90 inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-none font-medium text-sm outline-hidden transition-all h-11 px-6"
195195
>
196196
Start Building
197197
<ArrowRight className="h-4 w-4" />
@@ -430,7 +430,7 @@ export default function ChaosCraftPage() {
430430
href="https://repo.fun"
431431
target="_blank"
432432
rel="noopener noreferrer"
433-
className="bg-primary text-primary-foreground shadow-xs hover:bg-primary/90 inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-none font-medium text-sm h-11 px-6"
433+
className="bg-primary text-primary-foreground shadow-2xs hover:bg-primary/90 inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-none font-medium text-sm h-11 px-6"
434434
>
435435
Start Building
436436
<ArrowRight className="h-4 w-4" />

‎src/pages/products/Contribute.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -226,7 +226,7 @@ export default function ContributePage() {
226226
</div>
227227
<h1 className="text-4xl md:text-5xl lg:text-6xl font-bold leading-snug tracking-tighter">
228228
Recurring donations,{" "}
229-
<span className="bg-gradient-to-r from-[#9945FF] to-[#14F195] bg-clip-text text-transparent">
229+
<span className="bg-linear-to-r from-[#9945FF] to-[#14F195] bg-clip-text text-transparent">
230230
finally automated
231231
</span>
232232
</h1>
@@ -240,7 +240,7 @@ export default function ContributePage() {
240240
href="https://contribute.so"
241241
target="_blank"
242242
rel="noopener noreferrer"
243-
className="bg-primary text-primary-foreground shadow-xs hover:bg-primary/90 inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-none font-medium text-sm outline-none transition-all h-11 px-6"
243+
className="bg-primary text-primary-foreground shadow-2xs hover:bg-primary/90 inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-none font-medium text-sm outline-hidden transition-all h-11 px-6"
244244
>
245245
Start Receiving
246246
<ArrowRight className="h-4 w-4" />
@@ -543,7 +543,7 @@ export default function ContributePage() {
543543
href="https://contribute.so"
544544
target="_blank"
545545
rel="noopener noreferrer"
546-
className="bg-primary text-primary-foreground shadow-xs hover:bg-primary/90 inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-none font-medium text-sm h-11 px-6"
546+
className="bg-primary text-primary-foreground shadow-2xs hover:bg-primary/90 inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-none font-medium text-sm h-11 px-6"
547547
>
548548
Start Receiving
549549
<ArrowRight className="h-4 w-4" />

‎src/pages/products/Lando.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -136,7 +136,7 @@ export default function LandoPage() {
136136
Agent Commerce
137137
</div>
138138
<h1 className="text-4xl md:text-5xl lg:text-6xl font-bold leading-snug tracking-tighter">
139-
<span className="bg-gradient-to-r from-[#9945FF] to-[#14F195] bg-clip-text text-transparent">
139+
<span className="bg-linear-to-r from-[#9945FF] to-[#14F195] bg-clip-text text-transparent">
140140
Stripe for AI Agents
141141
</span>
142142
</h1>
@@ -147,7 +147,7 @@ export default function LandoPage() {
147147
<div className="flex gap-3">
148148
<a
149149
href="/products/tributary"
150-
className="bg-primary text-primary-foreground shadow-xs hover:bg-primary/90 inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-none font-medium text-sm outline-none transition-all h-11 px-6"
150+
className="bg-primary text-primary-foreground shadow-2xs hover:bg-primary/90 inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-none font-medium text-sm outline-hidden transition-all h-11 px-6"
151151
>
152152
Tributary Protocol
153153
<ArrowRight className="h-4 w-4" />
@@ -378,7 +378,7 @@ export default function LandoPage() {
378378
<div className="flex justify-center gap-4 flex-wrap">
379379
<a
380380
href="/products/tributary"
381-
className="bg-primary text-primary-foreground shadow-xs hover:bg-primary/90 inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-none font-medium text-sm h-11 px-6"
381+
className="bg-primary text-primary-foreground shadow-2xs hover:bg-primary/90 inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-none font-medium text-sm h-11 px-6"
382382
>
383383
Tributary Protocol
384384
<ArrowRight className="h-4 w-4" />

0 commit comments

Comments
 (0)