Skip to content

Commit be3852b

Browse files
matthewlipskimatthewlipski
authored
fix: Remove Tailwind dependency from ShadCN package (#1964)
* Removed prefix * Removed Tailwind dependency from ShadCN package * Removed unneeded ShadCN things from playground * Removed `tailwind-merge` dep from playground * Moved tailwind import & shadcn theme from playground to example * Small fix * Fixed docs
1 parent 16900fb commit be3852b

Some content is hidden

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

51 files changed

+479
-419
lines changed

‎docs/app/global.css‎

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,131 @@
11
@import "tailwindcss";
2+
@import "tw-animate-css";
23
@import "fumadocs-ui/css/vitepress.css";
34
@import "fumadocs-ui/css/preset.css";
45
@import "fumadocs-twoslash/twoslash.css";
56

67
@source ".";
78
@source "../components";
89
@source "../content";
10+
/* Ensures CSS is generated also for ShadCN components. */
11+
@source "../node_modules/@blocknote/shadcn";
12+
13+
/* Add ShadCN theme variables. */
14+
@custom-variant dark (&:is(.dark *));
15+
16+
:root {
17+
--radius: 0.625rem;
18+
--background: oklch(1 0 0);
19+
--foreground: oklch(0.145 0 0);
20+
--card: oklch(1 0 0);
21+
--card-foreground: oklch(0.145 0 0);
22+
--popover: oklch(1 0 0);
23+
--popover-foreground: oklch(0.145 0 0);
24+
--primary: oklch(0.205 0 0);
25+
--primary-foreground: oklch(0.985 0 0);
26+
--secondary: oklch(0.97 0 0);
27+
--secondary-foreground: oklch(0.205 0 0);
28+
--muted: oklch(0.97 0 0);
29+
--muted-foreground: oklch(0.556 0 0);
30+
--accent: oklch(0.97 0 0);
31+
--accent-foreground: oklch(0.205 0 0);
32+
--destructive: oklch(0.577 0.245 27.325);
33+
--border: oklch(0.922 0 0);
34+
--input: oklch(0.922 0 0);
35+
--ring: oklch(0.708 0 0);
36+
--chart-1: oklch(0.646 0.222 41.116);
37+
--chart-2: oklch(0.6 0.118 184.704);
38+
--chart-3: oklch(0.398 0.07 227.392);
39+
--chart-4: oklch(0.828 0.189 84.429);
40+
--chart-5: oklch(0.769 0.188 70.08);
41+
--sidebar: oklch(0.985 0 0);
42+
--sidebar-foreground: oklch(0.145 0 0);
43+
--sidebar-primary: oklch(0.205 0 0);
44+
--sidebar-primary-foreground: oklch(0.985 0 0);
45+
--sidebar-accent: oklch(0.97 0 0);
46+
--sidebar-accent-foreground: oklch(0.205 0 0);
47+
--sidebar-border: oklch(0.922 0 0);
48+
--sidebar-ring: oklch(0.708 0 0);
49+
}
50+
51+
.dark {
52+
--background: oklch(0.145 0 0);
53+
--foreground: oklch(0.985 0 0);
54+
--card: oklch(0.205 0 0);
55+
--card-foreground: oklch(0.985 0 0);
56+
--popover: oklch(0.205 0 0);
57+
--popover-foreground: oklch(0.985 0 0);
58+
--primary: oklch(0.922 0 0);
59+
--primary-foreground: oklch(0.205 0 0);
60+
--secondary: oklch(0.269 0 0);
61+
--secondary-foreground: oklch(0.985 0 0);
62+
--muted: oklch(0.269 0 0);
63+
--muted-foreground: oklch(0.708 0 0);
64+
--accent: oklch(0.269 0 0);
65+
--accent-foreground: oklch(0.985 0 0);
66+
--destructive: oklch(0.704 0.191 22.216);
67+
--border: oklch(1 0 0 / 10%);
68+
--input: oklch(1 0 0 / 15%);
69+
--ring: oklch(0.556 0 0);
70+
--chart-1: oklch(0.488 0.243 264.376);
71+
--chart-2: oklch(0.696 0.17 162.48);
72+
--chart-3: oklch(0.769 0.188 70.08);
73+
--chart-4: oklch(0.627 0.265 303.9);
74+
--chart-5: oklch(0.645 0.246 16.439);
75+
--sidebar: oklch(0.205 0 0);
76+
--sidebar-foreground: oklch(0.985 0 0);
77+
--sidebar-primary: oklch(0.488 0.243 264.376);
78+
--sidebar-primary-foreground: oklch(0.985 0 0);
79+
--sidebar-accent: oklch(0.269 0 0);
80+
--sidebar-accent-foreground: oklch(0.985 0 0);
81+
--sidebar-border: oklch(1 0 0 / 10%);
82+
--sidebar-ring: oklch(0.556 0 0);
83+
}
84+
85+
@theme inline {
86+
--color-background: var(--background);
87+
--color-foreground: var(--foreground);
88+
--color-card: var(--card);
89+
--color-card-foreground: var(--card-foreground);
90+
--color-popover: var(--popover);
91+
--color-popover-foreground: var(--popover-foreground);
92+
--color-primary: var(--primary);
93+
--color-primary-foreground: var(--primary-foreground);
94+
--color-secondary: var(--secondary);
95+
--color-secondary-foreground: var(--secondary-foreground);
96+
--color-muted: var(--muted);
97+
--color-muted-foreground: var(--muted-foreground);
98+
--color-accent: var(--accent);
99+
--color-accent-foreground: var(--accent-foreground);
100+
--color-destructive: var(--destructive);
101+
--color-destructive-foreground: var(--destructive-foreground);
102+
--color-border: var(--border);
103+
--color-input: var(--input);
104+
--color-ring: var(--ring);
105+
--color-chart-1: var(--chart-1);
106+
--color-chart-2: var(--chart-2);
107+
--color-chart-3: var(--chart-3);
108+
--color-chart-4: var(--chart-4);
109+
--color-chart-5: var(--chart-5);
110+
--radius-sm: calc(var(--radius) - 4px);
111+
--radius-md: calc(var(--radius) - 2px);
112+
--radius-lg: var(--radius);
113+
--radius-xl: calc(var(--radius) + 4px);
114+
--color-sidebar: var(--sidebar);
115+
--color-sidebar-foreground: var(--sidebar-foreground);
116+
--color-sidebar-primary: var(--sidebar-primary);
117+
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
118+
--color-sidebar-accent: var(--sidebar-accent);
119+
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
120+
--color-sidebar-border: var(--sidebar-border);
121+
--color-sidebar-ring: var(--sidebar-ring);
122+
}
123+
124+
@layer base {
125+
* {
126+
@apply border-border outline-ring/50;
127+
}
128+
body {
129+
@apply bg-background text-foreground;
130+
}
131+
}

‎docs/package.json‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,9 @@
102102
"y-partykit": "^0.0.25",
103103
"yjs": "^13.6.27",
104104
"zod": "^3.25.67",
105-
"zustand": "^5.0.3"
105+
"zustand": "^5.0.3",
106+
"tailwindcss": "^4.1.12",
107+
"tw-animate-css": "^1.3.7"
106108
},
107109
"devDependencies": {
108110
"@blocknote/ariakit": "workspace:^",
@@ -134,9 +136,10 @@
134136
"postcss": "^8.5.6",
135137
"react-email": "^4.0.16",
136138
"react-icons": "^5.5.0",
137-
"tailwindcss": "^4.1.10",
139+
"tailwindcss": "^4.1.12",
140+
"tw-animate-css": "^1.3.7",
138141
"typescript": "^5.8.3",
139142
"y-partykit": "^0.0.33",
140143
"yjs": "^13.6.27"
141144
}
142-
}
145+
}

‎examples/01-basic/09-shadcn/.bnexample.json‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,9 @@
22
"playground": true,
33
"docs": true,
44
"author": "matthewlipski",
5-
"tags": ["Basic"]
5+
"tags": ["Basic"],
6+
"dependencies": {
7+
"tailwindcss": "^4.1.12",
8+
"tw-animate-css": "^1.3.7"
9+
}
610
}

‎examples/01-basic/09-shadcn/package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,9 @@
1616
"@blocknote/mantine": "latest",
1717
"@blocknote/shadcn": "latest",
1818
"react": "^19.1.0",
19-
"react-dom": "^19.1.0"
19+
"react-dom": "^19.1.0",
20+
"tailwindcss": "^4.1.12",
21+
"tw-animate-css": "^1.3.7"
2022
},
2123
"devDependencies": {
2224
"@types/react": "^19.1.0",

‎examples/01-basic/09-shadcn/src/App.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import { useCreateBlockNote } from "@blocknote/react";
33
import { BlockNoteView } from "@blocknote/shadcn";
44
import "@blocknote/shadcn/style.css";
55

6+
import "./style.css";
7+
68
export default function App() {
79
// Creates a new editor instance.
810
const editor = useCreateBlockNote();

‎examples/01-basic/09-shadcn/src/style.css‎

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
@import "tailwindcss";
2+
@import "tw-animate-css";
3+
4+
@source "../node_modules/@blocknote/shadcn";
5+
6+
@custom-variant dark (&:is(.dark *));
7+
8+
:root {
9+
--radius: 0.625rem;
10+
--background: oklch(1 0 0);
11+
--foreground: oklch(0.145 0 0);
12+
--card: oklch(1 0 0);
13+
--card-foreground: oklch(0.145 0 0);
14+
--popover: oklch(1 0 0);
15+
--popover-foreground: oklch(0.145 0 0);
16+
--primary: oklch(0.205 0 0);
17+
--primary-foreground: oklch(0.985 0 0);
18+
--secondary: oklch(0.97 0 0);
19+
--secondary-foreground: oklch(0.205 0 0);
20+
--muted: oklch(0.97 0 0);
21+
--muted-foreground: oklch(0.556 0 0);
22+
--accent: oklch(0.97 0 0);
23+
--accent-foreground: oklch(0.205 0 0);
24+
--destructive: oklch(0.577 0.245 27.325);
25+
--border: oklch(0.922 0 0);
26+
--input: oklch(0.922 0 0);
27+
--ring: oklch(0.708 0 0);
28+
--chart-1: oklch(0.646 0.222 41.116);
29+
--chart-2: oklch(0.6 0.118 184.704);
30+
--chart-3: oklch(0.398 0.07 227.392);
31+
--chart-4: oklch(0.828 0.189 84.429);
32+
--chart-5: oklch(0.769 0.188 70.08);
33+
--sidebar: oklch(0.985 0 0);
34+
--sidebar-foreground: oklch(0.145 0 0);
35+
--sidebar-primary: oklch(0.205 0 0);
36+
--sidebar-primary-foreground: oklch(0.985 0 0);
37+
--sidebar-accent: oklch(0.97 0 0);
38+
--sidebar-accent-foreground: oklch(0.205 0 0);
39+
--sidebar-border: oklch(0.922 0 0);
40+
--sidebar-ring: oklch(0.708 0 0);
41+
}
42+
43+
.dark {
44+
--background: oklch(0.145 0 0);
45+
--foreground: oklch(0.985 0 0);
46+
--card: oklch(0.205 0 0);
47+
--card-foreground: oklch(0.985 0 0);
48+
--popover: oklch(0.205 0 0);
49+
--popover-foreground: oklch(0.985 0 0);
50+
--primary: oklch(0.922 0 0);
51+
--primary-foreground: oklch(0.205 0 0);
52+
--secondary: oklch(0.269 0 0);
53+
--secondary-foreground: oklch(0.985 0 0);
54+
--muted: oklch(0.269 0 0);
55+
--muted-foreground: oklch(0.708 0 0);
56+
--accent: oklch(0.269 0 0);
57+
--accent-foreground: oklch(0.985 0 0);
58+
--destructive: oklch(0.704 0.191 22.216);
59+
--border: oklch(1 0 0 / 10%);
60+
--input: oklch(1 0 0 / 15%);
61+
--ring: oklch(0.556 0 0);
62+
--chart-1: oklch(0.488 0.243 264.376);
63+
--chart-2: oklch(0.696 0.17 162.48);
64+
--chart-3: oklch(0.769 0.188 70.08);
65+
--chart-4: oklch(0.627 0.265 303.9);
66+
--chart-5: oklch(0.645 0.246 16.439);
67+
--sidebar: oklch(0.205 0 0);
68+
--sidebar-foreground: oklch(0.985 0 0);
69+
--sidebar-primary: oklch(0.488 0.243 264.376);
70+
--sidebar-primary-foreground: oklch(0.985 0 0);
71+
--sidebar-accent: oklch(0.269 0 0);
72+
--sidebar-accent-foreground: oklch(0.985 0 0);
73+
--sidebar-border: oklch(1 0 0 / 10%);
74+
--sidebar-ring: oklch(0.556 0 0);
75+
}
76+
77+
@theme inline {
78+
--color-background: var(--background);
79+
--color-foreground: var(--foreground);
80+
--color-card: var(--card);
81+
--color-card-foreground: var(--card-foreground);
82+
--color-popover: var(--popover);
83+
--color-popover-foreground: var(--popover-foreground);
84+
--color-primary: var(--primary);
85+
--color-primary-foreground: var(--primary-foreground);
86+
--color-secondary: var(--secondary);
87+
--color-secondary-foreground: var(--secondary-foreground);
88+
--color-muted: var(--muted);
89+
--color-muted-foreground: var(--muted-foreground);
90+
--color-accent: var(--accent);
91+
--color-accent-foreground: var(--accent-foreground);
92+
--color-destructive: var(--destructive);
93+
--color-destructive-foreground: var(--destructive-foreground);
94+
--color-border: var(--border);
95+
--color-input: var(--input);
96+
--color-ring: var(--ring);
97+
--color-chart-1: var(--chart-1);
98+
--color-chart-2: var(--chart-2);
99+
--color-chart-3: var(--chart-3);
100+
--color-chart-4: var(--chart-4);
101+
--color-chart-5: var(--chart-5);
102+
--radius-sm: calc(var(--radius) - 4px);
103+
--radius-md: calc(var(--radius) - 2px);
104+
--radius-lg: var(--radius);
105+
--radius-xl: calc(var(--radius) + 4px);
106+
--color-sidebar: var(--sidebar);
107+
--color-sidebar-foreground: var(--sidebar-foreground);
108+
--color-sidebar-primary: var(--sidebar-primary);
109+
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
110+
--color-sidebar-accent: var(--sidebar-accent);
111+
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
112+
--color-sidebar-border: var(--sidebar-border);
113+
--color-sidebar-ring: var(--sidebar-ring);
114+
}
115+
116+
@layer base {
117+
* {
118+
@apply border-border outline-ring/50;
119+
}
120+
body {
121+
@apply bg-background text-foreground;
122+
}
123+
}

‎packages/shadcn/components.json‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,10 @@
44
"rsc": false,
55
"tsx": true,
66
"tailwind": {
7-
"config": "tailwind.config.js",
87
"css": "src/style.css",
98
"baseColor": "slate",
109
"cssVariables": true,
11-
"prefix": "bn"
10+
"prefix": ""
1211
},
1312
"aliases": {
1413
"components": "@/components",

‎packages/shadcn/package.json‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -74,13 +74,10 @@
7474
"lucide-react": "^0.525.0",
7575
"react-hook-form": "^7.54.2",
7676
"tailwind-merge": "^2.3.0",
77-
"tailwindcss": "^4.1.12",
78-
"tw-animate-css": "^1.3.7",
7977
"zod": "^3.24.2"
8078
},
8179
"devDependencies": {
8280
"@radix-ui/colors": "^3.0.0",
83-
"@tailwindcss/vite": "^4.1.12",
8481
"@types/node": "^20.12.7",
8582
"@types/react": "^19.1.0",
8683
"@types/react-dom": "^19.1.0",
@@ -97,7 +94,8 @@
9794
},
9895
"peerDependencies": {
9996
"react": "^18.0 || ^19.0 || >= 19.0.0-rc",
100-
"react-dom": "^18.0 || ^19.0 || >= 19.0.0-rc"
97+
"react-dom": "^18.0 || ^19.0 || >= 19.0.0-rc",
98+
"tailwindcss": "^4.1.12"
10199
},
102100
"eslintConfig": {
103101
"extends": [

‎packages/shadcn/src/badge/Badge.tsx‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ export const Badge = forwardRef<
3030
variant={isSelected ? "secondary" : "outline"}
3131
className={cn(
3232
className,
33-
"bn-flex bn-items-center bn-gap-1 bn-rounded-full bn-h-7 bn-px-2.5",
33+
"flex h-7 items-center gap-1 rounded-full px-2.5",
3434
)}
3535
onClick={onClick}
3636
onMouseEnter={onMouseEnter}
@@ -51,7 +51,7 @@ export const Badge = forwardRef<
5151
{badge}
5252
</ShadCNComponents.Tooltip.TooltipTrigger>
5353
<ShadCNComponents.Tooltip.TooltipContent
54-
className={"bn-flex bn-flex-col bn-items-center bn-whitespace-pre-wrap"}
54+
className={"flex flex-col items-center whitespace-pre-wrap"}
5555
>
5656
<span>{mainTooltip}</span>
5757
{secondaryTooltip && <span>{secondaryTooltip}</span>}
@@ -73,10 +73,7 @@ export const BadgeGroup = forwardRef<
7373
return (
7474
<ShadCNComponents.Tooltip.TooltipProvider delayDuration={0}>
7575
<div
76-
className={cn(
77-
className,
78-
"bn-flex bn-flex-row bn-flex-wrap bn-gap-1 bn-w-full",
79-
)}
76+
className={cn(className, "flex w-full flex-row flex-wrap gap-1")}
8077
ref={ref}
8178
>
8279
{children}

0 commit comments

Comments
 (0)