Skip to content

Commit 9a306b1

Browse files
KMKoushikKMKoushik
authored
feat: migrate workspace to Tailwind CSS v4 (#377)
* feat: migrate workspace to Tailwind CSS v4 * refactor: move Tailwind v4 setup to CSS directives
1 parent d7b196c commit 9a306b1

28 files changed

Lines changed: 543 additions & 382 deletions

‎apps/marketing/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,21 +23,21 @@
2323
},
2424
"devDependencies": {
2525
"@next/eslint-plugin-next": "^15.3.1",
26+
"@tailwindcss/postcss": "^4.1.0",
2627
"@types/eslint": "^9.6.1",
2728
"@types/node": "^22.15.2",
2829
"@types/react": "^19.1.2",
2930
"@types/react-dom": "^19.1.2",
3031
"@typescript-eslint/eslint-plugin": "^8.31.0",
3132
"@typescript-eslint/parser": "^8.31.0",
3233
"@usesend/eslint-config": "workspace:*",
33-
"@usesend/tailwind-config": "workspace:*",
3434
"@usesend/typescript-config": "workspace:*",
3535
"eslint": "^8.57.1",
3636
"eslint-config-next": "^15.3.1",
3737
"postcss": "^8.5.3",
3838
"prettier": "^3.5.3",
3939
"prettier-plugin-tailwindcss": "^0.6.11",
40-
"tailwindcss": "^3.4.1",
40+
"tailwindcss": "^4.1.0",
4141
"typescript": "^5.8.3"
4242
}
4343
}

‎apps/marketing/postcss.config.cjs‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
const config = {
22
plugins: {
3-
tailwindcss: {},
3+
"@tailwindcss/postcss": {},
44
},
55
};
66

77
module.exports = config;
8-

‎apps/marketing/src/app/globals.css‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
@import "tailwindcss";
2+
3+
@source "../**/*.{js,jsx,ts,tsx,mdx}";
4+
@source "../../../../packages/ui/src/**/*.{js,jsx,ts,tsx,mdx}";
5+
@source "../../../../packages/email-editor/src/**/*.{js,jsx,ts,tsx,mdx}";
6+
7+
@import "@usesend/ui/styles/globals.css";

‎apps/marketing/src/app/layout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import "@usesend/ui/styles/globals.css";
1+
import "./globals.css";
22

33
import { Inter } from "next/font/google";
44
import { JetBrains_Mono } from "next/font/google";

‎apps/marketing/tailwind.config.ts‎

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

‎apps/web/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,7 @@
8989
},
9090
"devDependencies": {
9191
"@next/eslint-plugin-next": "^15.3.1",
92+
"@tailwindcss/postcss": "^4.1.0",
9293
"@types/eslint": "^9.6.1",
9394
"@types/html-to-text": "^9.0.4",
9495
"@types/mime-types": "^2.1.4",
@@ -100,14 +101,13 @@
100101
"@typescript-eslint/eslint-plugin": "^8.31.0",
101102
"@typescript-eslint/parser": "^8.31.0",
102103
"@usesend/eslint-config": "workspace:*",
103-
"@usesend/tailwind-config": "workspace:*",
104104
"@usesend/typescript-config": "workspace:*",
105105
"eslint": "^8.57.1",
106106
"eslint-config-next": "^15.3.1",
107107
"postcss": "^8.5.3",
108108
"prettier": "^3.5.3",
109109
"prettier-plugin-tailwindcss": "^0.6.11",
110-
"tailwindcss": "^3.4.1",
110+
"tailwindcss": "^4.1.0",
111111
"typescript": "^5.8.3",
112112
"vite-tsconfig-paths": "^5.1.4",
113113
"vitest": "^3.2.4",

‎apps/web/postcss.config.cjs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
const config = {
22
plugins: {
3-
tailwindcss: {},
3+
"@tailwindcss/postcss": {},
44
},
55
};
66

‎apps/web/src/app/(dashboard)/dasboard-layout.tsx‎

Lines changed: 24 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,40 @@
11
"use client";
22

33
import { AppSidebar } from "~/components/AppSideBar";
4-
import { SidebarInset, SidebarProvider, SidebarTrigger } from "@usesend/ui/src/sidebar";
4+
import {
5+
SidebarInset,
6+
SidebarProvider,
7+
SidebarTrigger,
8+
} from "@usesend/ui/src/sidebar";
59
import { useIsMobile } from "@usesend/ui/src/hooks/use-mobile";
610
import { UpgradeModal } from "~/components/payments/UpgradeModal";
11+
import { usePathname } from "next/navigation";
12+
import { useEffect, useRef } from "react";
713

814
export function DashboardLayout({ children }: { children: React.ReactNode }) {
915
const isMobile = useIsMobile();
16+
const pathname = usePathname();
17+
const mainRef = useRef<HTMLElement>(null);
18+
19+
useEffect(() => {
20+
if (mainRef.current) {
21+
mainRef.current.scrollLeft = 0;
22+
}
23+
24+
window.scrollTo({ left: 0 });
25+
document.documentElement.scrollLeft = 0;
26+
document.body.scrollLeft = 0;
27+
}, [pathname]);
1028

1129
return (
1230
<div className="h-full bg-sidebar-background">
1331
<SidebarProvider>
1432
<AppSidebar />
15-
<SidebarInset>
16-
<main className="flex-1 overflow-auto h-full p-4 xl:px-40">
33+
<SidebarInset className="min-w-0">
34+
<main
35+
ref={mainRef}
36+
className="h-full flex-1 overflow-y-auto overflow-x-hidden p-4 xl:px-40"
37+
>
1738
{isMobile ? (
1839
<SidebarTrigger className="h-5 w-5 text-muted-foreground" />
1940
) : null}

‎apps/web/src/app/(dashboard)/webhooks/add-webhook.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -267,7 +267,7 @@ export function AddWebhook() {
267267
<ChevronDown className="ml-2 h-4 w-4 shrink-0" />
268268
</Button>
269269
</DropdownMenuTrigger>
270-
<DropdownMenuContent className="w-[--radix-dropdown-menu-trigger-width] h-[30vh] ">
270+
<DropdownMenuContent className="h-[30vh] w-[var(--radix-dropdown-menu-trigger-width)]">
271271
<div className="space-y-3">
272272
<DropdownMenuCheckboxItem
273273
checked={allEventsSelected}
@@ -362,7 +362,7 @@ export function AddWebhook() {
362362
<ChevronDown className="ml-2 h-4 w-4 shrink-0" />
363363
</Button>
364364
</DropdownMenuTrigger>
365-
<DropdownMenuContent className="max-h-[30vh] w-[--radix-dropdown-menu-trigger-width] overflow-y-auto">
365+
<DropdownMenuContent className="max-h-[30vh] w-[var(--radix-dropdown-menu-trigger-width)] overflow-y-auto">
366366
<div className="space-y-3">
367367
<DropdownMenuCheckboxItem
368368
checked={selectedDomainIds.length === 0}

‎apps/web/src/app/(dashboard)/webhooks/webhook-update-dialog.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -260,7 +260,7 @@ export function EditWebhookDialog({
260260
<ChevronDown className="ml-2 h-4 w-4 shrink-0" />
261261
</Button>
262262
</DropdownMenuTrigger>
263-
<DropdownMenuContent className="w-[--radix-dropdown-menu-trigger-width] h-[30vh]">
263+
<DropdownMenuContent className="h-[30vh] w-[var(--radix-dropdown-menu-trigger-width)]">
264264
<div className="space-y-3">
265265
<DropdownMenuCheckboxItem
266266
checked={allEventsSelected}
@@ -355,7 +355,7 @@ export function EditWebhookDialog({
355355
<ChevronDown className="ml-2 h-4 w-4 shrink-0" />
356356
</Button>
357357
</DropdownMenuTrigger>
358-
<DropdownMenuContent className="max-h-[30vh] w-[--radix-dropdown-menu-trigger-width] overflow-y-auto">
358+
<DropdownMenuContent className="max-h-[30vh] w-[var(--radix-dropdown-menu-trigger-width)] overflow-y-auto">
359359
<div className="space-y-3">
360360
<DropdownMenuCheckboxItem
361361
checked={selectedDomainIds.length === 0}

0 commit comments

Comments
 (0)