Tailwind v4

[timlrx]

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
  • Note: from docs: update for Tailwind 4 tailwindlabs/tailwindcss-typography#372 it seems that it is essential to retain the config file for now, if we are modifying the plugins. Could look into inlining the modifications in the css file once this is resolved.
• 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]

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