Skip to content

Migrate Tailwind CSS from v3.4 to v4.3 with updates and fixes #679

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
jamespepper81 merged 2 commits into from
Jun 30, 2026
Merged

Migrate Tailwind CSS from v3.4 to v4.3 with updates and fixes #679

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
8c0613c
feat: migrate Tailwind CSS v3.4 to v4.3
jamespepper81 Jun 30, 2026
ab4a19c
Merge pull request #678 from BitSleuthAI/feature/tailwind-v4-migration
jamespepper81 Jun 30, 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
2 changes: 1 addition & 1 deletion AGENTS.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
- **Node.js:** 24.x (LTS — Node 20 is end-of-life)

### UI & Styling
- **CSS Framework:** Tailwind CSS 3.4.18
- **CSS Framework:** Tailwind CSS 4.3.x (theme in `tailwind.config.ts` via `@config`)
- **Component Library:** shadcn/ui with Radix UI primitives
- **Icons:** Lucide React 0.475.0
- **Carousel:** Embla Carousel 8.6.0
Expand Down
6 changes: 3 additions & 3 deletions CLAUDE.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
| Framework | Next.js (App Router) | 16.1.1 |
| Language | TypeScript | 5.9.3 |
| Runtime | React | 19.2.3 |
| Styling | Tailwind CSS | 3.4.19 |
| Styling | Tailwind CSS | 4.3.x |
| Components | shadcn/ui + Radix UI | Latest |
| Icons | Lucide React | 0.562.0 |
| Testing | Vitest | 4.0.16 |
Expand Down Expand Up @@ -167,7 +167,7 @@ npx shadcn@latest add button
- Skip TypeScript type checking
- Commit secrets or API keys
- Create documentation files outside `docs/` folder
- Upgrade to Tailwind v4 (project uses stable v3)
- Downgrade Tailwind to v3 (project is on stable v4; theme stays in `tailwind.config.ts` via the `@config` directive in `globals.css`)

### Always:
- Run `npm run typecheck` before committing
Expand Down Expand Up @@ -214,7 +214,7 @@ Create `.env.local` from `.env.example` for local overrides.
| File | Purpose |
|------|---------|
| `next.config.ts` | Next.js config, MCP server, security headers |
| `tailwind.config.ts` | Tailwind v3 config, custom theme |
| `tailwind.config.ts` | Tailwind theme/config, loaded by `globals.css` via `@config` (v4) |
| `tsconfig.json` | TypeScript strict config |
| `components.json` | shadcn/ui configuration |
| `middleware.ts` | CSP nonce generation |
Expand Down
4 changes: 2 additions & 2 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1003,8 +1003,8 @@ A: The project uses strict TypeScript mode. Run `npm run typecheck` to see all e
**Q: How do I test my changes before deploying?**
A: Run `npm run ci` to execute the full test suite (lint + typecheck + test + build). This is what runs in the CI pipeline.

**Q: Can I use Tailwind v4?**
A: No, the project uses Tailwind v3.4.x. Do not upgrade to v4 without thorough testing and team approval.
**Q: Which Tailwind version does the project use?**
A: Tailwind CSS v4.3.x. The theme still lives in `tailwind.config.ts`, which is loaded from `src/app/globals.css` via the `@config` directive. PostCSS uses `@tailwindcss/postcss` (autoprefixer is bundled in v4 and no longer a separate dependency).

### Styling Questions

Expand Down
Loading