Skip to content

Upgrade to Tailwind CSS v4 and modernize dependencies#12

Open
dsnsgithub wants to merge 1 commit into
masterfrom
claude/astro-migration-deps-ernhep
Open

Upgrade to Tailwind CSS v4 and modernize dependencies#12
dsnsgithub wants to merge 1 commit into
masterfrom
claude/astro-migration-deps-ernhep

Conversation

@dsnsgithub

Copy link
Copy Markdown
Owner

Summary

This PR upgrades the project to Tailwind CSS v4 with the new @tailwindcss/vite plugin, modernizes core dependencies (React 19, Astro 7, TypeScript 6), and refactors the configuration to use Tailwind's new theming system.

Key Changes

Tailwind CSS v4 Migration

  • Removed tailwind.config.mjs and migrated configuration to src/styles/global.css using new @theme directive
  • Replaced @astrojs/tailwind integration with @tailwindcss/vite plugin in astro.config.mjs
  • Updated Tailwind class utilities to match v4 changes:
    • flex-shrink-0shrink-0
    • flex-growgrow
    • focus:outline-nonefocus:outline-hidden
    • roundedrounded-sm (for smaller elements)
    • shadowshadow-sm (for lighter shadows)
  • Added Tailwind v3 compatibility layer in global CSS to preserve existing border-color defaults

Dependency Updates

  • React & React DOM: 18.3.1 → 19.2.7
  • Astro: 5.16.11 → 7.0.5
  • TypeScript: 5.5.4 → 6.0.3
  • Tailwind CSS: 3.4.7 → 4.3.2
  • @astrojs/react: 4.4.2 → 6.0.0
  • @astrojs/mdx: 4.3.13 → 7.0.1
  • @types/react: 18.3.3 → 19.2.17
  • @types/react-dom: 18.3.0 → 19.2.3
  • Other minor version bumps for supporting libraries

Content Collection API Updates

  • Updated src/content.config.ts to use new glob loader and astro/zod imports
  • Changed blog routing from post.slug to post.id in [...slug].astro and index.astro
  • Updated render() function call to use new API in blog post template

GitHub Types Refactoring

  • Replaced custom @octokit/openapi-types override with official @octokit/webhooks-types package
  • Updated src/types/GitHub.ts to import event types directly from @octokit/webhooks-types instead of OpenAPI schemas
  • Removed overrides field from package.json

Layout & Router Changes

  • Replaced ViewTransitions with ClientRouter in Layout.astro
  • Moved font import to use explicit index.css path
  • Imported new src/styles/global.css for Tailwind v4 configuration

Component Updates

  • Updated React component type hints to use ReactNode instead of JSX.Element for better flexibility
  • Updated Prettier configuration to reference new global CSS file for Tailwind class sorting

https://claude.ai/code/session_012ATokcuH5Lxx9AzHTeREW1

- Upgrade astro 5 -> 7 with @astrojs/mdx 7, @astrojs/react 6, @astrojs/vercel 11
- Migrate content collections to the Content Layer API (src/content.config.ts
  with glob loader, post.id instead of post.slug, render(post))
- Replace <ViewTransitions /> with <ClientRouter />
- Migrate Tailwind 3 -> 4: drop @astrojs/tailwind + tailwind.config.mjs in
  favor of @tailwindcss/vite and CSS-first config in src/styles/global.css
  (viola palette, DM Sans, typography + scrollbar plugins, v3 border-color
  compatibility base style)
- Rename v3 utilities to their v4 names (shadow->shadow-sm, rounded->rounded-sm,
  shadow-sm->shadow-xs, outline-none->outline-hidden, bg-gradient-to-*->
  bg-linear-to-*, flex-grow->grow, flex-shrink-0->shrink-0)
- Upgrade react to 19 (type children as ReactNode; global JSX namespace removed)
- Replace the @octokit/openapi-types fork override with the official
  @octokit/webhooks-types package for activity event payload types
- Update all remaining dependencies to latest (sharp 0.35, jspdf 4.2,
  bluesky-comments 0.13, react-tooltip 6, prettier-plugin-tailwindcss 0.8, etc.)

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_012ATokcuH5Lxx9AzHTeREW1
@vercel

vercel Bot commented Jul 2, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
dsns.dev Error Error Jul 2, 2026 11:27am

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