Skip to content

Commit e9a38b1

Browse files
bernaferraribernaferrari
committed
Tailwind 4 inside the plugin
1 parent e85ebf5 commit e9a38b1

19 files changed

+514
-334
lines changed

‎apps/plugin/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,21 +24,21 @@
2424
"tailwindcss-animate": "^1.0.7"
2525
},
2626
"devDependencies": {
27+
"@tailwindcss/postcss": "^4.0.14",
2728
"@types/node": "^22.13.10",
2829
"@types/react": "^19.0.10",
2930
"@types/react-dom": "^19.0.4",
3031
"@typescript-eslint/eslint-plugin": "^8.26.0",
3132
"@typescript-eslint/parser": "^8.26.0",
3233
"@vitejs/plugin-react": "^4.3.4",
3334
"@vitejs/plugin-react-swc": "^3.8.0",
34-
"autoprefixer": "^10.4.21",
3535
"concurrently": "^9.1.2",
3636
"esbuild": "^0.25.1",
3737
"eslint-config-custom": "workspace:*",
3838
"eslint-plugin-react-hooks": "^5.2.0",
3939
"eslint-plugin-react-refresh": "^0.4.19",
4040
"postcss": "^8.5.3",
41-
"tailwindcss": "3.4.6",
41+
"tailwindcss": "4.0.14",
4242
"tsconfig": "workspace:*",
4343
"types": "workspace:*",
4444
"typescript": "^5.8.2",

‎apps/plugin/postcss.config.js‎

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
};

‎apps/plugin/tailwind.config.js‎

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

‎apps/plugin/ui-src/index.css‎

Lines changed: 125 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,131 @@
1-
@tailwind base;
2-
@tailwind components;
3-
@tailwind utilities;
1+
@import "tailwindcss";
42

3+
@source '../../../packages/plugin-ui/**/*.{js,ts,jsx,tsx}';
54

6-
@layer base {
7-
:root {
8-
--background: 0 0% 100%;
9-
--foreground: 240 10% 3.9%;
10-
--card: 220 14% 96%;
11-
--card-foreground: 240 10% 3.9%;
12-
--popover: 0 0% 100%;
13-
--popover-foreground: 240 10% 3.9%;
14-
--primary: 142 70% 45%;
15-
--primary-foreground: 0 0% 100%;
16-
--secondary: 240 4.8% 95.9%;
17-
--secondary-foreground: 240 5.9% 10%;
18-
--muted: 240 4.8% 95.9%;
19-
--muted-foreground: 240 3.8% 46.1%;
20-
--accent: 240 4.8% 95.9%;
21-
--accent-foreground: 240 5.9% 10%;
22-
--destructive: 0 84.2% 60.2%;
23-
--destructive-foreground: 0 0% 98%;
24-
--border: 240 5.9% 90%;
25-
--input: 240 5.9% 90%;
26-
--ring: 240 5.9% 10%;
27-
--radius: 0.5rem;
28-
--chart-1: 12 76% 61%;
29-
--chart-2: 173 58% 39%;
30-
--chart-3: 197 37% 24%;
31-
--chart-4: 43 74% 66%;
32-
--chart-5: 27 87% 67%;
5+
@custom-variant dark (&:is(.dark *));
6+
7+
:root {
8+
--radius: 0.5rem;
9+
--background: oklch(1 0 0);
10+
--foreground: oklch(0.12 0.04 266.7);
11+
--card: oklch(0.99 0 264);
12+
--card-foreground: oklch(0.12 0.04 266.7);
13+
--popover: oklch(1 0 0);
14+
--popover-foreground: oklch(0.12 0.04 266.7);
15+
--primary: oklch(0.63 0.25 161.73);
16+
--primary-foreground: oklch(1 0 0);
17+
--secondary: oklch(0.93 0.01 266.23);
18+
--secondary-foreground: oklch(0.14 0.01 266.4);
19+
--muted: oklch(0.97 0.0 266.23);
20+
--muted-foreground: oklch(0.5 0.01 266.33);
21+
--accent: oklch(0.93 0.01 266.23);
22+
--accent-foreground: oklch(0.14 0.01 266.4);
23+
--destructive: oklch(0.53 0.31 24.65);
24+
--destructive-foreground: oklch(0.97 0 0);
25+
--border: oklch(0.89 0.01 266.3);
26+
--input: oklch(0.89 0.01 266.3);
27+
--ring: oklch(0.14 0.01 266.4);
28+
--chart-1: oklch(0.68 0.29 41.48);
29+
--chart-2: oklch(0.48 0.23 154.44);
30+
--chart-3: oklch(0.27 0.13 244.46);
31+
--chart-4: oklch(0.72 0.31 81.39);
32+
--chart-5: oklch(0.74 0.36 50.3);
33+
}
34+
35+
.dark {
36+
--background: oklch(0.12 0.04 266.7);
37+
--foreground: oklch(0.97 0 0);
38+
--card: oklch(0.237 0 0);
39+
--card-foreground: oklch(0.97 0 0);
40+
--popover: oklch(0.12 0.04 266.7);
41+
--popover-foreground: oklch(0.97 0 0);
42+
--primary: oklch(0.63 0.25 161.73);
43+
--primary-foreground: oklch(1 0 0);
44+
--secondary: oklch(0.18 0.01 266.3);
45+
--secondary-foreground: oklch(0.97 0 0);
46+
--muted: oklch(0.18 0.01 266.3);
47+
--muted-foreground: oklch(0.67 0.01 266.38);
48+
--accent: oklch(0.18 0.01 266.3);
49+
--accent-foreground: oklch(0.97 0 0);
50+
--destructive: oklch(0.34 0.24 24.48);
51+
--destructive-foreground: oklch(0.97 0 0);
52+
--border: oklch(0.237 0 0);
53+
--input: oklch(0.18 0.01 266.3);
54+
--ring: oklch(0.82 0.01 266.4);
55+
--chart-1: oklch(0.55 0.28 262.73);
56+
--chart-2: oklch(0.51 0.24 150.67);
57+
--chart-3: oklch(0.43 0.33 48.41);
58+
--chart-4: oklch(0.61 0.26 300.96);
59+
--chart-5: oklch(0.58 0.38 320.79);
60+
}
61+
62+
@theme inline {
63+
--radius-sm: calc(var(--radius) - 4px);
64+
--radius-md: calc(var(--radius) - 2px);
65+
--radius-lg: var(--radius);
66+
--radius-xl: calc(var(--radius) + 4px);
67+
--color-background: var(--background);
68+
--color-foreground: var(--foreground);
69+
--color-card: var(--card);
70+
--color-card-foreground: var(--card-foreground);
71+
--color-popover: var(--popover);
72+
--color-popover-foreground: var(--popover-foreground);
73+
--color-primary: var(--primary);
74+
--color-primary-foreground: var(--primary-foreground);
75+
--color-secondary: var(--secondary);
76+
--color-secondary-foreground: var(--secondary-foreground);
77+
--color-muted: var(--muted);
78+
--color-muted-foreground: var(--muted-foreground);
79+
--color-accent: var(--accent);
80+
--color-accent-foreground: var(--accent-foreground);
81+
--color-destructive: var(--destructive);
82+
--color-border: var(--border);
83+
--color-input: var(--input);
84+
--color-ring: var(--ring);
85+
--color-chart-1: var(--chart-1);
86+
--color-chart-2: var(--chart-2);
87+
--color-chart-3: var(--chart-3);
88+
--color-chart-4: var(--chart-4);
89+
--color-chart-5: var(--chart-5);
90+
--color-sidebar: var(--sidebar);
91+
--color-sidebar-foreground: var(--sidebar-foreground);
92+
--color-sidebar-primary: var(--sidebar-primary);
93+
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
94+
--color-sidebar-accent: var(--sidebar-accent);
95+
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
96+
--color-sidebar-border: var(--sidebar-border);
97+
--color-sidebar-ring: var(--sidebar-ring);
98+
--animate-accordion-down: accordion-down 0.2s ease-out;
99+
--animate-accordion-up: accordion-up 0.2s ease-out;
100+
101+
@keyframes accordion-down {
102+
from {
103+
height: 0;
33104
}
34-
35-
.dark {
36-
--background: 240 10% 3.9%;
37-
--foreground: 0 0% 98%;
38-
--card: 0 0% 13%;
39-
--card-foreground: 0 0% 98%;
40-
--popover: 240 10% 3.9%;
41-
--popover-foreground: 0 0% 98%;
42-
--primary: 142 70% 45%;
43-
--primary-foreground: 0 0% 100%;
44-
--secondary: 240 3.7% 15.9%;
45-
--secondary-foreground: 0 0% 98%;
46-
--muted: 240 3.7% 15.9%;
47-
--muted-foreground: 240 5% 64.9%;
48-
--accent: 240 3.7% 15.9%;
49-
--accent-foreground: 0 0% 98%;
50-
--destructive: 0 62.8% 30.6%;
51-
--destructive-foreground: 0 0% 98%;
52-
--border: 240 3.7% 15.9%;
53-
--input: 240 3.7% 15.9%;
54-
--ring: 240 4.9% 83.9%;
55-
--chart-1: 220 70% 50%;
56-
--chart-2: 160 60% 45%;
57-
--chart-3: 30 80% 55%;
58-
--chart-4: 280 65% 60%;
59-
--chart-5: 340 75% 55%;
105+
to {
106+
height: var(--radix-accordion-content-height);
60107
}
61108
}
62-
63-
@layer base {
64-
* {
65-
@apply border-border outline-ring/50;
109+
110+
@keyframes accordion-up {
111+
from {
112+
height: var(--radix-accordion-content-height);
66113
}
67-
/* body {
68-
@apply bg-background text-foreground;
69-
} */
70-
}
114+
to {
115+
height: 0;
116+
}
117+
}
118+
}
119+
120+
@layer base {
121+
* {
122+
@apply border-border outline-ring/50;
123+
}
124+
/* body {
125+
@apply bg-background text-foreground;
126+
} */
127+
button:not([disabled]),
128+
[role="button"]:not([disabled]) {
129+
cursor: pointer;
130+
}
131+
}

‎packages/plugin-ui/src/PluginUI.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -56,13 +56,13 @@ const FrameworkTabs = ({
5656
setShowAbout,
5757
}: FrameworkTabsProps) => {
5858
return (
59-
<div className="grid grid-cols-4 sm:grid-cols-2 md:grid-cols-4 gap-1 flex-grow">
59+
<div className="grid grid-cols-4 sm:grid-cols-2 md:grid-cols-4 gap-1 grow">
6060
{frameworks.map((tab) => (
6161
<button
6262
key={`tab ${tab}`}
6363
className={`w-full text-sm rounded-md transition-colors font-medium ${
6464
selectedFramework === tab && !showAbout
65-
? "bg-primary text-primary-foreground shadow"
65+
? "bg-primary text-primary-foreground shadow-sm"
6666
: "bg-muted hover:bg-primary/90 hover:text-primary-foreground"
6767
}`}
6868
onClick={() => {
@@ -107,7 +107,7 @@ export const PluginUI = (props: PluginUIProps) => {
107107
<button
108108
className={`w-8 h-8 flex items-center justify-center rounded-md text-sm font-medium ${
109109
showAbout
110-
? "bg-primary text-primary-foreground shadow"
110+
? "bg-primary text-primary-foreground shadow-sm"
111111
: "bg-muted hover:bg-primary/90 hover:text-primary-foreground"
112112
}`}
113113
onClick={() => setShowAbout(!showAbout)}

‎packages/plugin-ui/src/components/About.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ const About = ({
5353
<div className="flex flex-col p-5 gap-6 text-sm max-w-2xl mx-auto">
5454
{/* Header Section with Logo and Title */}
5555
<div className="flex flex-col items-center text-center mb-2">
56-
<div className="w-16 h-16 bg-gradient-to-br from-green-400 to-emerald-600 rounded-xl flex items-center justify-center shadow-lg mb-3">
56+
<div className="w-16 h-16 bg-linear-to-br from-green-400 to-emerald-600 rounded-xl flex items-center justify-center shadow-lg mb-3">
5757
<Code size={32} className="text-white" />
5858
</div>
5959
<h2 className="text-2xl font-bold mb-1">Figma to Code</h2>
@@ -96,7 +96,7 @@ const About = ({
9696
{/* Cards Section */}
9797
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
9898
{/* Privacy Policy Card */}
99-
<div className="bg-white dark:bg-neutral-800 rounded-xl p-5 shadow-sm border border-neutral-200 dark:border-neutral-700 hover:border-green-300 dark:hover:border-green-700 transition-colors">
99+
<div className="bg-white dark:bg-neutral-800 rounded-xl p-5 shadow-xs border border-neutral-200 dark:border-neutral-700 hover:border-green-300 dark:hover:border-green-700 transition-colors">
100100
<div className="flex items-center gap-3 mb-3">
101101
<div className="p-2 bg-blue-100 dark:bg-blue-900/40 rounded-lg">
102102
<Lock size={20} className="text-blue-600 dark:text-blue-400" />
@@ -111,7 +111,7 @@ const About = ({
111111
</div>
112112

113113
{/* Open Source Card */}
114-
<div className="bg-white dark:bg-neutral-800 rounded-xl p-5 shadow-sm border border-neutral-200 dark:border-neutral-700 hover:border-green-300 dark:hover:border-green-700 transition-colors">
114+
<div className="bg-white dark:bg-neutral-800 rounded-xl p-5 shadow-xs border border-neutral-200 dark:border-neutral-700 hover:border-green-300 dark:hover:border-green-700 transition-colors">
115115
<div className="flex items-center gap-3 mb-3">
116116
<div className="p-2 bg-purple-100 dark:bg-purple-900/40 rounded-lg">
117117
<Github
@@ -137,7 +137,7 @@ const About = ({
137137
</div>
138138

139139
{/* Features Card */}
140-
<div className="bg-white dark:bg-neutral-800 rounded-xl p-5 shadow-sm border border-neutral-200 dark:border-neutral-700 hover:border-green-300 dark:hover:border-green-700 transition-colors">
140+
<div className="bg-white dark:bg-neutral-800 rounded-xl p-5 shadow-xs border border-neutral-200 dark:border-neutral-700 hover:border-green-300 dark:hover:border-green-700 transition-colors">
141141
<div className="flex items-center gap-3 mb-3">
142142
<div className="p-2 bg-amber-100 dark:bg-amber-900/40 rounded-lg">
143143
<Zap size={20} className="text-amber-600 dark:text-amber-400" />
@@ -169,7 +169,7 @@ const About = ({
169169
</div>
170170

171171
{/* Contact Card */}
172-
<div className="bg-card rounded-xl p-5 shadow-sm border border-neutral-200 dark:border-neutral-700 hover:border-green-300 dark:hover:border-green-700 transition-colors">
172+
<div className="bg-card rounded-xl p-5 shadow-xs border border-neutral-200 dark:border-neutral-700 hover:border-green-300 dark:hover:border-green-700 transition-colors">
173173
<div className="flex items-center gap-3 mb-3">
174174
<div className="p-2 bg-green-100 dark:bg-green-900/40 rounded-lg">
175175
<MessageCircle
@@ -206,7 +206,7 @@ const About = ({
206206
</div>
207207

208208
{/* Debug Helper Card */}
209-
<div className="bg-card rounded-xl p-5 shadow-sm border border-neutral-200 dark:border-neutral-700 hover:border-green-300 dark:hover:border-green-700 transition-colors">
209+
<div className="bg-card rounded-xl p-5 shadow-xs border border-neutral-200 dark:border-neutral-700 hover:border-green-300 dark:hover:border-green-700 transition-colors">
210210
<div className="flex items-center gap-3 mb-3">
211211
<div className="p-2 bg-rose-100 dark:bg-rose-900/40 rounded-lg">
212212
<Code size={20} className="text-rose-600 dark:text-rose-400" />

‎packages/plugin-ui/src/components/CopyButton.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -49,10 +49,10 @@ export function CopyButton({
4949
onMouseEnter={onMouseEnter}
5050
onMouseLeave={onMouseLeave}
5151
className={cn(
52-
`inline-flex items-center justify-center px-3 py-1.5 text-sm font-medium border rounded-md transition-all duration-300`,
52+
`inline-flex items-center justify-center px-3 py-1.5 text-sm font-medium rounded-md transition-all duration-300`,
5353
isCopied
54-
? "bg-primary border-primary text-primary-foreground"
55-
: "bg-neutral-100 dark:bg-neutral-700 dark:hover:bg-muted-foreground/30 border-border text-foreground",
54+
? "bg-primary text-primary-foreground"
55+
: "bg-neutral-100 dark:bg-neutral-700 dark:hover:bg-muted-foreground/30 text-foreground",
5656
className,
5757
`relative`,
5858
)}

‎packages/plugin-ui/src/components/CustomPrefixInput.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -199,7 +199,7 @@ const FormField = React.memo(
199199
onBlur={handleBlur}
200200
onKeyDown={handleKeyDown}
201201
placeholder={placeholder}
202-
className={`p-1.5 px-2.5 text-sm w-full transition-all focus:outline-none ${
202+
className={`p-1.5 px-2.5 text-sm w-full transition-all focus:outline-hidden ${
203203
suffix ? "rounded-l-md" : "rounded-md"
204204
} ${
205205
hasError

0 commit comments

Comments
 (0)