gib/GibSend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: migrate workspace to Tailwind CSS v4 (#377)

Browse Source 
* feat: migrate workspace to Tailwind CSS v4

* refactor: move Tailwind v4 setup to CSS directives
This commit is contained in:
KM Koushik
2026-03-15 07:10:37 +11:00
committed by GitHub
parent d7b196c0e3
commit 9a306b1d59
28 changed files with 543 additions and 382 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/marketing/package.json
+2 -2
View File
@@ -23,6 +23,7 @@
},
"devDependencies": {
"@next/eslint-plugin-next": "^15.3.1",
"@tailwindcss/postcss": "^4.1.0",
"@types/eslint": "^9.6.1",
"@types/node": "^22.15.2",
"@types/react": "^19.1.2",
@@ -30,14 +31,13 @@
"@typescript-eslint/eslint-plugin": "^8.31.0",
"@typescript-eslint/parser": "^8.31.0",
"@usesend/eslint-config": "workspace:*",
"@usesend/tailwind-config": "workspace:*",
"@usesend/typescript-config": "workspace:*",
"eslint": "^8.57.1",
"eslint-config-next": "^15.3.1",
"postcss": "^8.5.3",
"prettier": "^3.5.3",
"prettier-plugin-tailwindcss": "^0.6.11",
"tailwindcss": "^3.4.1",
"tailwindcss": "^4.1.0",
"typescript": "^5.8.3"
}
}
apps/marketing/postcss.config.cjs
+1 -2
View File
@@ -1,8 +1,7 @@
const config = {
plugins: {
tailwindcss: {},
"@tailwindcss/postcss": {},
},
};
module.exports = config;
apps/marketing/src/app/globals.css
+7
View File
@@ -0,0 +1,7 @@
@import "tailwindcss";
@source "../**/*.{js,jsx,ts,tsx,mdx}";
@source "../../../../packages/ui/src/**/*.{js,jsx,ts,tsx,mdx}";
@source "../../../../packages/email-editor/src/**/*.{js,jsx,ts,tsx,mdx}";
@import "@usesend/ui/styles/globals.css";
apps/marketing/src/app/layout.tsx
+1 -1
View File
@@ -1,4 +1,4 @@
import "@usesend/ui/styles/globals.css";
import "./globals.css";
import { Inter } from "next/font/google";
import { JetBrains_Mono } from "next/font/google";
apps/marketing/tailwind.config.ts
-13
View File
@@ -1,13 +0,0 @@
import { type Config } from "tailwindcss";
import sharedConfig from "@usesend/tailwind-config/tailwind.config";
import path from "path";
export default {
...sharedConfig,
content: [
"./src/**/*.tsx",
`${path.join(require.resolve("@usesend/ui"), "..")}/**/*.{ts,tsx}`,
`${path.join(require.resolve("@usesend/email-editor"), "..")}/**/*.{ts,tsx}`,
],
} satisfies Config;
apps/web/package.json
+2 -2
View File
@@ -89,6 +89,7 @@
},
"devDependencies": {
"@next/eslint-plugin-next": "^15.3.1",
"@tailwindcss/postcss": "^4.1.0",
"@types/eslint": "^9.6.1",
"@types/html-to-text": "^9.0.4",
"@types/mime-types": "^2.1.4",
@@ -100,14 +101,13 @@
"@typescript-eslint/eslint-plugin": "^8.31.0",
"@typescript-eslint/parser": "^8.31.0",
"@usesend/eslint-config": "workspace:*",
"@usesend/tailwind-config": "workspace:*",
"@usesend/typescript-config": "workspace:*",
"eslint": "^8.57.1",
"eslint-config-next": "^15.3.1",
"postcss": "^8.5.3",
"prettier": "^3.5.3",
"prettier-plugin-tailwindcss": "^0.6.11",
"tailwindcss": "^3.4.1",
"tailwindcss": "^4.1.0",
"typescript": "^5.8.3",
"vite-tsconfig-paths": "^5.1.4",
"vitest": "^3.2.4",
apps/web/postcss.config.cjs
+1 -1
View File
@@ -1,6 +1,6 @@
const config = {
plugins: {
tailwindcss: {},
"@tailwindcss/postcss": {},
},
};
apps/web/src/app/(dashboard)/dasboard-layout.tsx
+24 -3
View File
@@ -1,19 +1,40 @@
"use client";
import { AppSidebar } from "~/components/AppSideBar";
import { SidebarInset, SidebarProvider, SidebarTrigger } from "@usesend/ui/src/sidebar";
import {
SidebarInset,
SidebarProvider,
SidebarTrigger,
} from "@usesend/ui/src/sidebar";
import { useIsMobile } from "@usesend/ui/src/hooks/use-mobile";
import { UpgradeModal } from "~/components/payments/UpgradeModal";
import { usePathname } from "next/navigation";
import { useEffect, useRef } from "react";
export function DashboardLayout({ children }: { children: React.ReactNode }) {
const isMobile = useIsMobile();
const pathname = usePathname();
const mainRef = useRef<HTMLElement>(null);
useEffect(() => {
if (mainRef.current) {
mainRef.current.scrollLeft = 0;
}
window.scrollTo({ left: 0 });
document.documentElement.scrollLeft = 0;
document.body.scrollLeft = 0;
}, [pathname]);
return (
<div className="h-full bg-sidebar-background">
<SidebarProvider>
<AppSidebar />
<SidebarInset>
<main className="flex-1 overflow-auto h-full p-4 xl:px-40">
<SidebarInset className="min-w-0">
<main
ref={mainRef}
className="h-full flex-1 overflow-y-auto overflow-x-hidden p-4 xl:px-40"
>
{isMobile ? (
<SidebarTrigger className="h-5 w-5 text-muted-foreground" />
) : null}
apps/web/src/app/(dashboard)/webhooks/add-webhook.tsx
+2 -2
View File
@@ -267,7 +267,7 @@ export function AddWebhook() {
<ChevronDown className="ml-2 h-4 w-4 shrink-0" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="w-[--radix-dropdown-menu-trigger-width] h-[30vh] ">
<DropdownMenuContent className="h-[30vh] w-[var(--radix-dropdown-menu-trigger-width)]">
<div className="space-y-3">
<DropdownMenuCheckboxItem
checked={allEventsSelected}
@@ -362,7 +362,7 @@ export function AddWebhook() {
<ChevronDown className="ml-2 h-4 w-4 shrink-0" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="max-h-[30vh] w-[--radix-dropdown-menu-trigger-width] overflow-y-auto">
<DropdownMenuContent className="max-h-[30vh] w-[var(--radix-dropdown-menu-trigger-width)] overflow-y-auto">
<div className="space-y-3">
<DropdownMenuCheckboxItem
checked={selectedDomainIds.length === 0}
apps/web/src/app/(dashboard)/webhooks/webhook-update-dialog.tsx
+2 -2
View File
@@ -260,7 +260,7 @@ export function EditWebhookDialog({
<ChevronDown className="ml-2 h-4 w-4 shrink-0" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="w-[--radix-dropdown-menu-trigger-width] h-[30vh]">
<DropdownMenuContent className="h-[30vh] w-[var(--radix-dropdown-menu-trigger-width)]">
<div className="space-y-3">
<DropdownMenuCheckboxItem
checked={allEventsSelected}
@@ -355,7 +355,7 @@ export function EditWebhookDialog({
<ChevronDown className="ml-2 h-4 w-4 shrink-0" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="max-h-[30vh] w-[--radix-dropdown-menu-trigger-width] overflow-y-auto">
<DropdownMenuContent className="max-h-[30vh] w-[var(--radix-dropdown-menu-trigger-width)] overflow-y-auto">
<div className="space-y-3">
<DropdownMenuCheckboxItem
checked={selectedDomainIds.length === 0}
apps/web/src/app/globals.css
+8
View File
@@ -0,0 +1,8 @@
@import "tailwindcss";
@source "../**/*.{js,jsx,ts,tsx,mdx}";
@source "../../../../packages/ui/src/**/*.{js,jsx,ts,tsx,mdx}";
@source "../../../../packages/email-editor/src/**/*.{js,jsx,ts,tsx,mdx}";
@source "../../../../packages/lib/src/**/*.{js,jsx,ts,tsx,mdx}";
@import "@usesend/ui/styles/globals.css";
apps/web/src/app/layout.tsx
+1 -1
View File
@@ -1,4 +1,4 @@
import "@usesend/ui/styles/globals.css";
import "./globals.css";
import { Inter } from "next/font/google";
import { JetBrains_Mono } from "next/font/google";
apps/web/src/components/AppSideBar.tsx
+1 -1
View File
@@ -323,7 +323,7 @@ export function NavUser({
</SidebarMenuButton>
</DropdownMenuTrigger>
<DropdownMenuContent
className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-xl"
className="w-[var(--radix-dropdown-menu-trigger-width)] min-w-56 rounded-xl"
side={isMobile ? "bottom" : "top"}
sideOffset={4}
>
apps/web/tailwind.config.ts
-16
View File
@@ -1,16 +0,0 @@
import { type Config } from "tailwindcss";
import sharedConfig from "@usesend/tailwind-config/tailwind.config";
import path from "path";
import { fileURLToPath } from "url";
const here = path.dirname(fileURLToPath(import.meta.url));
export default {
...sharedConfig,
content: [
"./src/**/*.tsx",
path.join(here, "../../packages/ui/src/**/*.{ts,tsx}"),
path.join(here, "../../packages/email-editor/src/**/*.{ts,tsx}"),
path.join(here, "../../packages/lib/src/**/*.{ts,tsx}"),
],
} satisfies Config;