Skip to content

Commit ff4328c

Browse files
dgcadgca
committed
Update for tailwind v4
2 parents d1cfbfd + 3063a61 commit ff4328c

File tree

264 files changed

+3911
-6224
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

264 files changed

+3911
-6224
lines changed

‎.github/workflows/build.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ on:
33
push:
44
branches: ['main']
55
pull_request:
6-
branches: ['main']
6+
branches: ['main', 'onchainkit-v1']
77
permissions:
88
contents: read
99
jobs:

‎.gitignore

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ esm
66
tmp
77
/out-tsc
88
src/styles.css
9-
src/tailwind.css
109

1110
# dependencies
1211
node_modules

‎packages/create-onchain/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "create-onchain",
33
"description": "Instantly create onchain applications with OnchainKit.",
4-
"version": "0.0.17-alpha.6",
4+
"version": "0.0.18",
55
"license": "MIT",
66
"scripts": {
77
"build": "pnpm run clean && pnpm run build:esm+types && pnpm run build:manifest",

‎packages/create-onchain/templates/minikit-basic/app/globals.css

Lines changed: 24 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,32 @@
1-
@tailwind base;
2-
@tailwind components;
3-
@tailwind utilities;
1+
@import "tailwindcss";
2+
@custom-variant dark (&:where(.dark, .dark *));
43

54
:root {
65
--background: #ffffff;
7-
--foreground: #111111;
6+
--foreground: #171717;
87
}
98

10-
@media (prefers-color-scheme: dark) {
11-
:root {
12-
--background: #111111;
13-
--foreground: #ffffff;
14-
}
9+
.dark {
10+
--background: #0a0a0a;
11+
--foreground: #ededed;
1512
}
1613

17-
body {
18-
color: var(--foreground);
19-
background: var(--background);
20-
font-family: "Geist", sans-serif;
21-
font-optical-sizing: auto;
22-
font-weight: 400;
23-
font-style: normal;
24-
font-size: 80%;
14+
@theme inline {
15+
--color-background: var(--background);
16+
--color-foreground: var(--foreground);
2517
}
18+
19+
@layer base {
20+
body {
21+
@apply bg-background text-foreground;
22+
font-family: "Geist", sans-serif;
23+
font-optical-sizing: auto;
24+
font-weight: 400;
25+
font-style: normal;
26+
font-size: 80%;
27+
}
28+
}
29+
30+
* {
31+
touch-action: manipulation;
32+
}

‎packages/create-onchain/templates/minikit-basic/app/layout.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ export default function RootLayout({
4242
}>) {
4343
return (
4444
<html lang="en">
45-
<body className="bg-background">
45+
<body className="bg-background text-foreground">
4646
<Providers>{children}</Providers>
4747
</body>
4848
</html>

‎packages/create-onchain/templates/minikit-basic/app/page.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,7 @@ export default function App() {
104104
<Button
105105
variant="ghost"
106106
size="sm"
107-
className="text-[var(--ock-text-foreground-muted)] text-xs"
107+
className="text-ock-text-foreground-muted text-xs"
108108
onClick={() => openUrl("https://base.org/builders/minikit")}
109109
>
110110
Built on Base with MiniKit

‎packages/create-onchain/templates/minikit-basic/app/theme.css

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
@import url("https://fonts.googleapis.com/css2?family=Geist:[email protected]&display=swap");
22

3-
@tailwind base;
4-
@tailwind components;
5-
@tailwind utilities;
3+
@import "tailwindcss";
64

75
:root {
86
--app-background: #ffffff;
@@ -101,7 +99,7 @@ body {
10199
font-style: normal;
102100
}
103101

104-
@layer utilities {
102+
@utility text-balance {
105103
.text-balance {
106104
text-wrap: balance;
107105
}

‎packages/create-onchain/templates/minikit-basic/package.json

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,13 @@
1212
"@coinbase/onchainkit": "latest",
1313
"@farcaster/frame-sdk": "^0.0.35",
1414
"@upstash/redis": "^1.34.4",
15+
"postcss": "^8.5.3",
1516
"next": "^14.2.15",
1617
"react": "^18",
1718
"react-dom": "^18",
1819
"@tanstack/react-query": "^5",
20+
"tailwindcss": "^4.1.4",
21+
"@tailwindcss/postcss": "^4.1.4",
1922
"viem": "^2.27.2",
2023
"wagmi": "^2.14.11"
2124
},
@@ -30,8 +33,6 @@
3033
"eslint-plugin-react": "^7.37.4",
3134
"eslint-plugin-react-hooks": "^5.2.0",
3235
"prettier": "^3.5.3",
33-
"postcss": "^8",
34-
"tailwindcss": "^3.4.1",
3536
"typescript": "^5"
3637
}
3738
}

‎packages/create-onchain/templates/minikit-basic/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

‎packages/create-onchain/templates/minikit-snake/app/components/snake.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1100,14 +1100,14 @@ const Sammy = () => {
11001100
id="map"
11011101
width={500}
11021102
height={500}
1103-
className="absolute top-0 left-0 z-3"
1103+
className="absolute top-0 left-0 z-2"
11041104
/>
11051105
<canvas
11061106
ref={sammyCanvasRef}
11071107
id="sammy"
11081108
width={500}
11091109
height={500}
1110-
className="absolute top-0 left-0 z-2"
1110+
className="absolute top-0 left-0 z-3"
11111111
/>
11121112
<canvas
11131113
ref={scoreCanvasRef}

‎packages/create-onchain/templates/minikit-snake/app/globals.css

Lines changed: 21 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,40 @@
1-
@tailwind base;
2-
@tailwind components;
3-
@tailwind utilities;
1+
@import "tailwindcss";
2+
@custom-variant dark (&:where(.dark, .dark *));
43

54
:root {
6-
--background: #e5e5e5;
5+
--background: #ffffff;
76
--foreground: #171717;
87
}
98

10-
@media (prefers-color-scheme: dark) {
11-
:root {
12-
--background: #e5e5e5;
13-
--foreground: #171717;
14-
}
9+
.dark {
10+
--background: #0a0a0a;
11+
--foreground: #ededed;
1512
}
1613

17-
* {
18-
touch-action: manipulation;
14+
@theme inline {
15+
--color-background: var(--background);
16+
--color-foreground: var(--foreground);
1917
}
2018

21-
body {
22-
color: var(--foreground);
23-
background: var(--background);
19+
@layer base {
20+
body {
21+
@apply bg-background text-foreground;
22+
font-family: "Pixelify Sans", sans-serif;
23+
font-optical-sizing: auto;
24+
font-weight: 400;
25+
font-style: normal;
26+
}
27+
}
2428

25-
font-family: "Pixelify Sans", sans-serif;
26-
font-optical-sizing: auto;
27-
font-weight: 400;
28-
font-style: normal;
29+
* {
30+
touch-action: manipulation;
2931
}
3032

3133
.high-score-badge + div {
3234
transform: translate(10px, 20px) !important;
3335
}
3436

35-
@layer utilities {
37+
@utility text-balance {
3638
.text-balance {
3739
text-wrap: balance;
3840
}

‎packages/create-onchain/templates/minikit-snake/app/layout.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ export default function RootLayout({
4141
}>) {
4242
return (
4343
<html lang="en">
44-
<body className="bg-background overflow-hidden">
44+
<body className="bg-background text-foreground">
4545
<Providers>{children}</Providers>
4646
</body>
4747
</html>

‎packages/create-onchain/templates/minikit-snake/package.json

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,13 @@
1212
"@coinbase/onchainkit": "latest",
1313
"@farcaster/frame-sdk": "^0.0.35",
1414
"@upstash/redis": "^1.34.4",
15+
"postcss": "^8.5.3",
1516
"next": "^14.2.15",
1617
"react": "^18",
1718
"react-dom": "^18",
1819
"@tanstack/react-query": "^5",
20+
"tailwindcss": "^4.1.4",
21+
"@tailwindcss/postcss": "^4.1.4",
1922
"viem": "^2.27.2",
2023
"wagmi": "^2.14.11"
2124
},
@@ -30,8 +33,6 @@
3033
"eslint-plugin-react": "^7.37.4",
3134
"eslint-plugin-react-hooks": "^5.2.0",
3235
"prettier": "^3.5.3",
33-
"postcss": "^8",
34-
"tailwindcss": "^3.4.1",
3536
"typescript": "^5"
3637
}
3738
}

‎packages/create-onchain/templates/minikit-snake/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

‎packages/create-onchain/templates/next/app/globals.css

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,29 @@
1-
@tailwind base;
2-
@tailwind components;
3-
@tailwind utilities;
1+
@import 'tailwindcss';
2+
@custom-variant dark (&:where(.dark, .dark *));
43

54
:root {
65
--background: #ffffff;
76
--foreground: #171717;
87
}
98

10-
@media (prefers-color-scheme: dark) {
11-
:root {
12-
--background: #0a0a0a;
13-
--foreground: #ededed;
14-
}
9+
.dark {
10+
--background: #0a0a0a;
11+
--foreground: #ededed;
12+
}
13+
14+
@theme inline {
15+
--color-background: var(--background);
16+
--color-foreground: var(--foreground);
1517
}
1618

17-
body {
18-
color: var(--foreground);
19-
background: var(--background);
20-
font-family: Arial, Helvetica, sans-serif;
19+
@layer base {
20+
body {
21+
@apply bg-background text-foreground;
22+
font-family: Arial, Helvetica, sans-serif;
23+
}
2124
}
2225

23-
@layer utilities {
26+
@utility text-balance {
2427
.text-balance {
2528
text-wrap: balance;
2629
}

‎packages/create-onchain/templates/next/app/layout.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@ export default function RootLayout({
1414
children: React.ReactNode;
1515
}>) {
1616
return (
17-
<html lang="en">
18-
<body className="bg-background dark">
17+
<html lang="en" className="dark">
18+
<body className="bg-background text-foreground font-sans">
1919
<Providers>{children}</Providers>
2020
</body>
2121
</html>

‎packages/create-onchain/templates/next/app/page.tsx

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -31,16 +31,19 @@ const components = [
3131

3232
const templates = [
3333
{ name: 'NFT', url: 'https://github.com/coinbase/onchain-app-template' },
34-
{ name: 'Commerce', url: 'https://github.com/coinbase/onchain-commerce-template'},
34+
{
35+
name: 'Commerce',
36+
url: 'https://github.com/coinbase/onchain-commerce-template',
37+
},
3538
{ name: 'Fund', url: 'https://github.com/fakepixels/fund-component' },
3639
];
3740

3841
export default function App() {
3942
return (
40-
<div className="flex flex-col min-h-screen font-sans dark:bg-background dark:text-white bg-white text-black">
43+
<div className="flex flex-col min-h-screen">
4144
<header className="pt-4 pr-4">
42-
<div className="flex justify-end">
43-
<div className="wallet-container">
45+
<div className="flex justify-end items-center gap-2">
46+
<div>
4447
<Wallet>
4548
<ConnectWallet>
4649
<Avatar className="h-6 w-6" />
@@ -75,12 +78,14 @@ export default function App() {
7578
</div>
7679
<div className="flex justify-center mb-6">
7780
<a target="_blank" rel="_template" href="https://onchainkit.xyz">
78-
<OnchainkitSvg className="dark:text-white text-black" />
81+
<OnchainkitSvg />
7982
</a>
8083
</div>
8184
<p className="text-center mb-6">
8285
Get started by editing
83-
<code className="p-1 ml-1 rounded dark:bg-gray-800 bg-gray-200">app/page.tsx</code>.
86+
<code className="p-1 ml-1 rounded dark:bg-gray-800 bg-gray-200">
87+
app/page.tsx
88+
</code>
8489
</p>
8590
<div className="flex flex-col items-center">
8691
<div className="max-w-2xl w-full">
@@ -94,7 +99,7 @@ export default function App() {
9499
<li key={index}>
95100
<a
96101
href={component.url}
97-
className="hover:underline inline-flex items-center dark:text-white text-black"
102+
className="hover:underline inline-flex items-center"
98103
target="_blank"
99104
rel="noopener noreferrer"
100105
>
@@ -114,12 +119,12 @@ export default function App() {
114119
<li key={index}>
115120
<a
116121
href={template.url}
117-
className="hover:underline inline-flex items-center dark:text-white text-black"
122+
className="hover:underline inline-flex items-center"
118123
target="_blank"
119124
rel="noopener noreferrer"
120125
>
121126
{template.name}
122-
<ArrowSvg/>
127+
<ArrowSvg />
123128
</a>
124129
</li>
125130
))}

0 commit comments

Comments
 (0)