Skip to content

Commit c049b60

Browse files
zpg6zpg6
committed
fix: example/opennextjs downgrade tailwind
1 parent d6d64d0 commit c049b60

File tree

6 files changed

+172
-115
lines changed

6 files changed

+172
-115
lines changed

‎examples/opennextjs/components.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"rsc": true,
55
"tsx": true,
66
"tailwind": {
7-
"config": "",
7+
"config": "tailwind.config.ts",
88
"css": "src/app/globals.css",
99
"baseColor": "zinc",
1010
"cssVariables": true,

‎examples/opennextjs/package.json‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -41,14 +41,15 @@
4141
"devDependencies": {
4242
"@cloudflare/workers-types": "^4.20250813.0",
4343
"@opennextjs/cloudflare": "^1.6.5",
44-
"@tailwindcss/postcss": "^4",
4544
"@types/node": "^20",
4645
"@types/react": "^19",
4746
"@types/react-dom": "^19",
47+
"autoprefixer": "^10.4.20",
4848
"drizzle-kit": "^0.31.0",
49+
"postcss": "^8.4.35",
4950
"prettier": "^3.5.3",
50-
"tailwindcss": "^4",
51-
"tw-animate-css": "^1.2.9",
51+
"tailwindcss": "^3.4.15",
52+
"tailwindcss-animate": "^1.0.7",
5253
"typescript": "^5",
5354
"wrangler": "^4.13.2"
5455
}

‎examples/opennextjs/postcss.config.mjs‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
const config = {
2+
plugins: {
3+
tailwindcss: {},
4+
autoprefixer: {},
5+
},
6+
};
7+
8+
export default config;

‎examples/opennextjs/postcss.config.ts‎

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

‎examples/opennextjs/src/app/globals.css‎

Lines changed: 67 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -1,115 +1,76 @@
1-
@import "tailwindcss";
2-
@import "tw-animate-css";
3-
4-
@custom-variant dark (&:is(.dark *));
5-
6-
@theme inline {
7-
--color-background: var(--background);
8-
--color-foreground: var(--foreground);
9-
--font-sans: var(--font-geist-sans);
10-
--font-mono: var(--font-geist-mono);
11-
--color-sidebar-ring: var(--sidebar-ring);
12-
--color-sidebar-border: var(--sidebar-border);
13-
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
14-
--color-sidebar-accent: var(--sidebar-accent);
15-
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
16-
--color-sidebar-primary: var(--sidebar-primary);
17-
--color-sidebar-foreground: var(--sidebar-foreground);
18-
--color-sidebar: var(--sidebar);
19-
--color-chart-5: var(--chart-5);
20-
--color-chart-4: var(--chart-4);
21-
--color-chart-3: var(--chart-3);
22-
--color-chart-2: var(--chart-2);
23-
--color-chart-1: var(--chart-1);
24-
--color-ring: var(--ring);
25-
--color-input: var(--input);
26-
--color-border: var(--border);
27-
--color-destructive: var(--destructive);
28-
--color-accent-foreground: var(--accent-foreground);
29-
--color-accent: var(--accent);
30-
--color-muted-foreground: var(--muted-foreground);
31-
--color-muted: var(--muted);
32-
--color-secondary-foreground: var(--secondary-foreground);
33-
--color-secondary: var(--secondary);
34-
--color-primary-foreground: var(--primary-foreground);
35-
--color-primary: var(--primary);
36-
--color-popover-foreground: var(--popover-foreground);
37-
--color-popover: var(--popover);
38-
--color-card-foreground: var(--card-foreground);
39-
--color-card: var(--card);
40-
--radius-sm: calc(var(--radius) - 4px);
41-
--radius-md: calc(var(--radius) - 2px);
42-
--radius-lg: var(--radius);
43-
--radius-xl: calc(var(--radius) + 4px);
44-
}
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;
454

465
:root {
476
--radius: 0.625rem;
48-
--background: oklch(1 0 0);
49-
--foreground: oklch(0.141 0.005 285.823);
50-
--card: oklch(1 0 0);
51-
--card-foreground: oklch(0.141 0.005 285.823);
52-
--popover: oklch(1 0 0);
53-
--popover-foreground: oklch(0.141 0.005 285.823);
54-
--primary: oklch(0.21 0.006 285.885);
55-
--primary-foreground: oklch(0.985 0 0);
56-
--secondary: oklch(0.967 0.001 286.375);
57-
--secondary-foreground: oklch(0.21 0.006 285.885);
58-
--muted: oklch(0.967 0.001 286.375);
59-
--muted-foreground: oklch(0.552 0.016 285.938);
60-
--accent: oklch(0.967 0.001 286.375);
61-
--accent-foreground: oklch(0.21 0.006 285.885);
62-
--destructive: oklch(0.577 0.245 27.325);
63-
--border: oklch(0.92 0.004 286.32);
64-
--input: oklch(0.92 0.004 286.32);
65-
--ring: oklch(0.705 0.015 286.067);
66-
--chart-1: oklch(0.646 0.222 41.116);
67-
--chart-2: oklch(0.6 0.118 184.704);
68-
--chart-3: oklch(0.398 0.07 227.392);
69-
--chart-4: oklch(0.828 0.189 84.429);
70-
--chart-5: oklch(0.769 0.188 70.08);
71-
--sidebar: oklch(0.985 0 0);
72-
--sidebar-foreground: oklch(0.141 0.005 285.823);
73-
--sidebar-primary: oklch(0.21 0.006 285.885);
74-
--sidebar-primary-foreground: oklch(0.985 0 0);
75-
--sidebar-accent: oklch(0.967 0.001 286.375);
76-
--sidebar-accent-foreground: oklch(0.21 0.006 285.885);
77-
--sidebar-border: oklch(0.92 0.004 286.32);
78-
--sidebar-ring: oklch(0.705 0.015 286.067);
7+
--background: 0 0% 100%;
8+
--foreground: 224 71.4% 4.1%;
9+
--card: 0 0% 100%;
10+
--card-foreground: 224 71.4% 4.1%;
11+
--popover: 0 0% 100%;
12+
--popover-foreground: 224 71.4% 4.1%;
13+
--primary: 220.9 39.3% 11%;
14+
--primary-foreground: 210 20% 98%;
15+
--secondary: 220 14.3% 95.9%;
16+
--secondary-foreground: 220.9 39.3% 11%;
17+
--muted: 220 14.3% 95.9%;
18+
--muted-foreground: 220 8.9% 46.1%;
19+
--accent: 220 14.3% 95.9%;
20+
--accent-foreground: 220.9 39.3% 11%;
21+
--destructive: 0 84.2% 60.2%;
22+
--destructive-foreground: 210 20% 98%;
23+
--border: 220 13% 91%;
24+
--input: 220 13% 91%;
25+
--ring: 224 71.4% 4.1%;
26+
--chart-1: 12 76% 61%;
27+
--chart-2: 173 58% 39%;
28+
--chart-3: 197 37% 24%;
29+
--chart-4: 43 74% 66%;
30+
--chart-5: 27 87% 67%;
31+
--sidebar: 210 20% 98%;
32+
--sidebar-foreground: 224 71.4% 4.1%;
33+
--sidebar-primary: 220.9 39.3% 11%;
34+
--sidebar-primary-foreground: 210 20% 98%;
35+
--sidebar-accent: 220 14.3% 95.9%;
36+
--sidebar-accent-foreground: 220.9 39.3% 11%;
37+
--sidebar-border: 220 13% 91%;
38+
--sidebar-ring: 224 71.4% 4.1%;
7939
}
8040

8141
.dark {
82-
--background: oklch(0.141 0.005 285.823);
83-
--foreground: oklch(0.985 0 0);
84-
--card: oklch(0.21 0.006 285.885);
85-
--card-foreground: oklch(0.985 0 0);
86-
--popover: oklch(0.21 0.006 285.885);
87-
--popover-foreground: oklch(0.985 0 0);
88-
--primary: oklch(0.92 0.004 286.32);
89-
--primary-foreground: oklch(0.21 0.006 285.885);
90-
--secondary: oklch(0.274 0.006 286.033);
91-
--secondary-foreground: oklch(0.985 0 0);
92-
--muted: oklch(0.274 0.006 286.033);
93-
--muted-foreground: oklch(0.705 0.015 286.067);
94-
--accent: oklch(0.274 0.006 286.033);
95-
--accent-foreground: oklch(0.985 0 0);
96-
--destructive: oklch(0.704 0.191 22.216);
97-
--border: oklch(1 0 0 / 10%);
98-
--input: oklch(1 0 0 / 15%);
99-
--ring: oklch(0.552 0.016 285.938);
100-
--chart-1: oklch(0.488 0.243 264.376);
101-
--chart-2: oklch(0.696 0.17 162.48);
102-
--chart-3: oklch(0.769 0.188 70.08);
103-
--chart-4: oklch(0.627 0.265 303.9);
104-
--chart-5: oklch(0.645 0.246 16.439);
105-
--sidebar: oklch(0.21 0.006 285.885);
106-
--sidebar-foreground: oklch(0.985 0 0);
107-
--sidebar-primary: oklch(0.488 0.243 264.376);
108-
--sidebar-primary-foreground: oklch(0.985 0 0);
109-
--sidebar-accent: oklch(0.274 0.006 286.033);
110-
--sidebar-accent-foreground: oklch(0.985 0 0);
111-
--sidebar-border: oklch(1 0 0 / 10%);
112-
--sidebar-ring: oklch(0.552 0.016 285.938);
42+
--background: 224 71.4% 4.1%;
43+
--foreground: 210 20% 98%;
44+
--card: 224 71.4% 4.1%;
45+
--card-foreground: 210 20% 98%;
46+
--popover: 224 71.4% 4.1%;
47+
--popover-foreground: 210 20% 98%;
48+
--primary: 210 20% 98%;
49+
--primary-foreground: 220.9 39.3% 11%;
50+
--secondary: 215 27.9% 16.9%;
51+
--secondary-foreground: 210 20% 98%;
52+
--muted: 215 27.9% 16.9%;
53+
--muted-foreground: 217.9 10.6% 64.9%;
54+
--accent: 215 27.9% 16.9%;
55+
--accent-foreground: 210 20% 98%;
56+
--destructive: 0 62.8% 30.6%;
57+
--destructive-foreground: 210 20% 98%;
58+
--border: 215 27.9% 16.9%;
59+
--input: 215 27.9% 16.9%;
60+
--ring: 216 12.2% 83.9%;
61+
--chart-1: 220 70% 50%;
62+
--chart-2: 160 60% 45%;
63+
--chart-3: 30 80% 55%;
64+
--chart-4: 280 65% 60%;
65+
--chart-5: 340 75% 55%;
66+
--sidebar: 224 71.4% 4.1%;
67+
--sidebar-foreground: 210 20% 98%;
68+
--sidebar-primary: 220 70% 50%;
69+
--sidebar-primary-foreground: 210 20% 98%;
70+
--sidebar-accent: 215 27.9% 16.9%;
71+
--sidebar-accent-foreground: 210 20% 98%;
72+
--sidebar-border: 215 27.9% 16.9%;
73+
--sidebar-ring: 216 12.2% 83.9%;
11374
}
11475

11576
@layer base {

‎examples/opennextjs/tailwind.config.ts‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
import type { Config } from "tailwindcss";
2+
3+
const config: Config = {
4+
darkMode: ["class"],
5+
content: ["./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}"],
6+
prefix: "",
7+
theme: {
8+
container: {
9+
center: true,
10+
padding: "2rem",
11+
screens: {
12+
"2xl": "1400px",
13+
},
14+
},
15+
extend: {
16+
colors: {
17+
border: "hsl(var(--border))",
18+
input: "hsl(var(--input))",
19+
ring: "hsl(var(--ring))",
20+
background: "hsl(var(--background))",
21+
foreground: "hsl(var(--foreground))",
22+
primary: {
23+
DEFAULT: "hsl(var(--primary))",
24+
foreground: "hsl(var(--primary-foreground))",
25+
},
26+
secondary: {
27+
DEFAULT: "hsl(var(--secondary))",
28+
foreground: "hsl(var(--secondary-foreground))",
29+
},
30+
destructive: {
31+
DEFAULT: "hsl(var(--destructive))",
32+
foreground: "hsl(var(--destructive-foreground))",
33+
},
34+
muted: {
35+
DEFAULT: "hsl(var(--muted))",
36+
foreground: "hsl(var(--muted-foreground))",
37+
},
38+
accent: {
39+
DEFAULT: "hsl(var(--accent))",
40+
foreground: "hsl(var(--accent-foreground))",
41+
},
42+
popover: {
43+
DEFAULT: "hsl(var(--popover))",
44+
foreground: "hsl(var(--popover-foreground))",
45+
},
46+
card: {
47+
DEFAULT: "hsl(var(--card))",
48+
foreground: "hsl(var(--card-foreground))",
49+
},
50+
sidebar: {
51+
DEFAULT: "hsl(var(--sidebar))",
52+
foreground: "hsl(var(--sidebar-foreground))",
53+
primary: "hsl(var(--sidebar-primary))",
54+
"primary-foreground": "hsl(var(--sidebar-primary-foreground))",
55+
accent: "hsl(var(--sidebar-accent))",
56+
"accent-foreground": "hsl(var(--sidebar-accent-foreground))",
57+
border: "hsl(var(--sidebar-border))",
58+
ring: "hsl(var(--sidebar-ring))",
59+
},
60+
chart: {
61+
"1": "hsl(var(--chart-1))",
62+
"2": "hsl(var(--chart-2))",
63+
"3": "hsl(var(--chart-3))",
64+
"4": "hsl(var(--chart-4))",
65+
"5": "hsl(var(--chart-5))",
66+
},
67+
},
68+
borderRadius: {
69+
lg: "var(--radius)",
70+
md: "calc(var(--radius) - 2px)",
71+
sm: "calc(var(--radius) - 4px)",
72+
},
73+
keyframes: {
74+
"accordion-down": {
75+
from: { height: "0" },
76+
to: { height: "var(--radix-accordion-content-height)" },
77+
},
78+
"accordion-up": {
79+
from: { height: "var(--radix-accordion-content-height)" },
80+
to: { height: "0" },
81+
},
82+
},
83+
animation: {
84+
"accordion-down": "accordion-down 0.2s ease-out",
85+
"accordion-up": "accordion-up 0.2s ease-out",
86+
},
87+
},
88+
},
89+
plugins: [require("tailwindcss-animate")],
90+
};
91+
92+
export default config;

0 commit comments

Comments
 (0)