Skip to content

Upgrade Tailwind CSS from v3 to v4#5180

Draft
ZJvandeWeg wants to merge 2 commits into
mainfrom
zj-tailwind-v4
Draft

Upgrade Tailwind CSS from v3 to v4#5180
ZJvandeWeg wants to merge 2 commits into
mainfrom
zj-tailwind-v4

Conversation

@ZJvandeWeg

Copy link
Copy Markdown
Member
  • Replace tailwindcss@3 + autoprefixer + postcss-import with tailwindcss@4 + @tailwindcss/postcss
  • Delete tailwind.config.js; migrate all theme config to @theme{} in style.css
  • Load typography plugin via @plugin directive instead of require() in config
  • Replace all @tailwind base/components/utilities directives with @import "tailwindcss"
  • Replace all theme(colors.x.y) calls with var(--color-x-y) across all CSS files
  • Port custom utilities (grid-cols-header, transition-*, text-shadow-header) to @Utility
  • Port safelist to @source inline()
  • Remove style.base.css (was only @tailwind base;)
  • Remove TAILWIND_MODE=watch from dev scripts (v3 JIT-only flag)

- Replace tailwindcss@3 + autoprefixer + postcss-import with tailwindcss@4 + @tailwindcss/postcss
- Delete tailwind.config.js; migrate all theme config to @theme{} in style.css
- Load typography plugin via @plugin directive instead of require() in config
- Replace all @tailwind base/components/utilities directives with @import "tailwindcss"
- Replace all theme(colors.x.y) calls with var(--color-x-y) across all CSS files
- Port custom utilities (grid-cols-header, transition-*, text-shadow-header) to @Utility
- Port safelist to @source inline()
- Remove style.base.css (was only @tailwind base;)
- Remove TAILWIND_MODE=watch from dev scripts (v3 JIT-only flag)
@ZJvandeWeg ZJvandeWeg requested review from a team and Yndira-E as code owners June 10, 2026 22:57
@netlify

netlify Bot commented Jun 10, 2026

Copy link
Copy Markdown

Deploy Preview for flowforge-website ready!

Name Link
🔨 Latest commit 314f965
🔍 Latest deploy log https://app.netlify.com/projects/flowforge-website/deploys/6a2ab279644b870008d6f617
😎 Deploy Preview https://deploy-preview-5180--flowforge-website.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
Lighthouse
Lighthouse
1 paths audited
Performance: 65 (🟢 up 3 from production)
Accessibility: 96 (no change from production)
Best Practices: 100 (no change from production)
SEO: 91 (no change from production)
PWA: -
View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify project configuration.

The chokidar watcher hit circular symlinks in nuxt/.netlify/ (a
Nuxt production build artifact with self-referencing node_modules/vue
symlinks). Although .netlify is gitignored, chokidar can ELOOP before
the gitignore check is applied.

- Add @source not rule to explicitly exclude nuxt/.netlify/** from scanning
- Add nuxt/.netlify to the clean:nuxt script so build artifacts are
  cleaned up before the next build
@ZJvandeWeg ZJvandeWeg marked this pull request as draft June 11, 2026 16:43
@ZJvandeWeg

Copy link
Copy Markdown
Member Author

@Yndira-E This change creates some weird artifacts on the new homepage, and I have not figured out yet why.

@Yndira-E

Copy link
Copy Markdown
Contributor

I'll check it out in the morning

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants