Skip to content

Conversation

@timlrx
Copy link
Owner

@timlrx timlrx commented Feb 9, 2025

Updated Tailwind v3 to v4 by following the upgrade guide and manually changing a couple of styles.

Manual upgrade steps:

  • Run npx @tailwindcss/upgrade@next
  • Port over the core changes from tailwind.config.js to tailwind.css
    • Added @theme config and modifications to @layer base
    • Modify prism.css and add @reference "./tailwind.css"; to the top of the file.
  • Updated the remaining typography style tokens in tailwind.config.js to use the new css variable format e.g. colors.primary.500 to color-primary-500
  • Update tailwind css tokens
    • letterSpacing.tight in tailwind.config.js has been changed to --tracking-tight
    • borderRadius.DEFAULT is now --radius-sm in tailwind.css
    • Color opacity has is also updated e.g. bg-green-500 bg-opacity-20 to bg-green-500/20. Affects prism.css and a couple of other components.
  • Updated header style as there seems to be some difference in the css layout between the versions.
  • Change moduleResolution in tsconfig.json to "bundler". Add "pliny/": ["node_modules/pliny/"] to tsconfig.json path.

This PR also pins React to v19 and upgraded a couple of dependencies.

There's a slight change in style as the color palette has been updated and some of the tokens has also been modified but I think those are relatively minor and I did not update them.

Close #1103

@vercel
Copy link

vercel bot commented Feb 9, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
tailwind-nextjs-starter-blog ✅ Ready (Inspect) Visit Preview 💬 Add feedback Feb 9, 2025 7:20am

@timlrx timlrx merged commit cdc1099 into main Feb 9, 2025
2 checks passed
@timlrx timlrx mentioned this pull request Feb 9, 2025
bhiwagade-rahul pushed a commit to bhiwagade-rahul/tailwind-nextjs-starter-blog that referenced this pull request Sep 22, 2025
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.

Update to tailwind v4?

2 participants