Skip to content

feat: migrate workspace to Tailwind CSS v4 #377

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
KMKoushik merged 2 commits into from
Mar 14, 2026
Merged

feat: migrate workspace to Tailwind CSS v4 #377

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8e6abeb
feat: migrate workspace to Tailwind CSS v4
KMKoushik Mar 14, 2026
16d6bb7
refactor: move Tailwind v4 setup to CSS directives
KMKoushik Mar 14, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions apps/marketing/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,21 +23,21 @@
},
"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",
"@types/react-dom": "^19.1.2",
"@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"
}
}
3 changes: 1 addition & 2 deletions apps/marketing/postcss.config.cjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
const config = {
plugins: {
tailwindcss: {},
"@tailwindcss/postcss": {},
},
};

module.exports = config;

7 changes: 7 additions & 0 deletions apps/marketing/src/app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
2 changes: 1 addition & 1 deletion apps/marketing/src/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Expand Down
13 changes: 0 additions & 13 deletions apps/marketing/tailwind.config.ts
View file
Open in desktop

This file was deleted.

4 changes: 2 additions & 2 deletions apps/web/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand Down
2 changes: 1 addition & 1 deletion apps/web/postcss.config.cjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
const config = {
plugins: {
tailwindcss: {},
"@tailwindcss/postcss": {},
},
};

Expand Down
27 changes: 24 additions & 3 deletions apps/web/src/app/(dashboard)/dasboard-layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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}
Expand Down
4 changes: 2 additions & 2 deletions apps/web/src/app/(dashboard)/webhooks/add-webhook.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down Expand Up @@ -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}
Expand Down
4 changes: 2 additions & 2 deletions apps/web/src/app/(dashboard)/webhooks/webhook-update-dialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down Expand Up @@ -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}
Expand Down
8 changes: 8 additions & 0 deletions apps/web/src/app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
2 changes: 1 addition & 1 deletion apps/web/src/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Expand Down
2 changes: 1 addition & 1 deletion apps/web/src/components/AppSideBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
>
Expand Down
16 changes: 0 additions & 16 deletions apps/web/tailwind.config.ts
View file
Open in desktop

This file was deleted.

4 changes: 2 additions & 2 deletions packages/email-editor/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,17 +18,17 @@
"author": "",
"license": "ISC",
"devDependencies": {
"@tailwindcss/postcss": "^4.1.0",
"@types/eslint": "^9.6.1",
"@types/react": "^19.1.2",
"@usesend/eslint-config": "workspace:*",
"@usesend/tailwind-config": "workspace:*",
"@usesend/typescript-config": "workspace:*",
"@usesend/ui": "workspace:*",
"postcss": "^8.5.3",
"prettier": "^3.5.3",
"prettier-plugin-tailwindcss": "^0.6.11",
"react": "^19.1.0",
"tailwindcss": "^3.4.1",
"tailwindcss": "^4.1.0",
"tsup": "^8.4.0",
"typescript": "^5.8.3"
},
Expand Down
2 changes: 1 addition & 1 deletion packages/email-editor/postcss.config.cjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
const config = {
plugins: {
tailwindcss: {},
"@tailwindcss/postcss": {},
},
};

Expand Down
2 changes: 2 additions & 0 deletions packages/email-editor/src/styles/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
@reference "tailwindcss";
Copy link
Contributor

@coderabbitai coderabbitai bot Mar 14, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo "== CSS files using Tailwind v4 directives =="
rg -n --type=css '@reference|@theme|@source|@utility|@variant|@custom-variant|@config|@apply'

echo
echo "== Stylelint unknown-at-rule configuration =="
rg -n -C2 'scss/at-rule-no-unknown|at-rule-no-unknown|ignoreAtRules' .

echo
echo "== Biome/Stylelint config files =="
fd -HI 'biome.json|biome.jsonc|stylelint.config.*|.stylelintrc.*|.stylelintrc' -x sh -c 'echo "----- {} -----"; sed -n "1,220p" "{}"'

Repository: usesend/useSend

Length of output: 1143

🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo "== Finding Biome config files =="
find . -maxdepth 3 -type f \( -name "biome.json" -o -name "biome.jsonc" \) 2>/dev/null || echo "No biome config found"

echo
echo "== Finding Stylelint config files =="
find . -maxdepth 3 -type f \( -name ".stylelintrc*" -o -name "stylelint.config.*" \) 2>/dev/null || echo "No stylelint config found"

echo
echo "== Checking package.json for linting setup =="
find . -maxdepth 2 -name "package.json" -type f -exec grep -l "stylelint\|biome" {} \;

Repository: usesend/useSend

Length of output: 209

🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo "== Content of biome.json =="
cat biome.json

echo
echo "== Content of .stylelintrc.json =="
cat .stylelintrc.json

Repository: usesend/useSend

Length of output: 2903

🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo "== Checking for GitHub Actions workflows =="
find .github -type f -name "*.yml" -o -name "*.yaml" 2>/dev/null | head -5

echo
echo "== Checking package.json scripts for linting =="
find . -maxdepth 2 -name "package.json" -type f | xargs grep -l "lint" 2>/dev/null | head -3

echo
echo "== Root package.json lint scripts =="
grep -A 10 '"scripts"' ./package.json | grep -E 'lint|stylelint|biome' || echo "No lint scripts found"

Repository: usesend/useSend

Length of output: 387

🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo "== packages/email-editor/package.json =="
cat packages/email-editor/package.json 2>/dev/null || echo "File not found"

echo
echo "== Check for tailwind.config in email-editor =="
find packages/email-editor -name "tailwind.config.*" -o -name "postcss.config.*" 2>/dev/null

echo
echo "== Check for tailwind.config at root =="
ls -la tailwind.config.* postcss.config.* 2>/dev/null || echo "None found"

echo
echo "== All CSS files in email-editor =="
find packages/email-editor -name "*.css" -type f

Repository: usesend/useSend

Length of output: 2328

🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo "== postcss.config.cjs in email-editor =="
cat packages/email-editor/postcss.config.cjs

echo
echo "== tailwind.config.ts in email-editor =="
cat packages/email-editor/tailwind.config.ts

echo
echo "== Checking if Biome is configured to scan email-editor =="
grep -A 20 '"biome"' biome.json || echo "No biome workspace config found"

Repository: usesend/useSend

Length of output: 546

Configure linting tools to support Tailwind v4 at-rules.

The @reference "tailwindcss" directive at line 1 will be flagged as invalid by both Biome and Stylelint without explicit configuration.

Update .stylelintrc.json to add ignoreAtRules: ["reference", "config", "theme", "source", "custom-variant"] to the rules, and configure biome.json to either skip CSS parsing for this file or add support for Tailwind v4 directives.

🧰 Tools
🪛 Biome (2.4.6)

[error] 1-1: Tailwind-specific syntax is disabled.

(parse)

🪛 Stylelint (17.4.0)

[error] 1-1: Unexpected unknown at-rule "@reference" (scss/at-rule-no-unknown)

(scss/at-rule-no-unknown)

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@packages/email-editor/src/styles/index.css` at line 1, The CSS file uses the
Tailwind v4 at-rule `@reference` "tailwindcss" which will be flagged by linters;
update project lint configs by adding ignoreAtRules:
["reference","config","theme","source","custom-variant"] to .stylelintrc.json
rules and adjust biome.json to either exclude
packages/email-editor/src/styles/index.css from CSS parsing or add support for
Tailwind v4 directives so the `@reference` at-rule is not reported as invalid.


.unsend-editor .unsend-prose p:where([class~="text-sm"]) {
font-size: 16px;
}
Expand Down
7 changes: 0 additions & 7 deletions packages/email-editor/tailwind.config.ts
View file
Open in desktop

This file was deleted.

22 changes: 0 additions & 22 deletions packages/tailwind-config/package.json
View file
Open in desktop

This file was deleted.

Loading
Loading