Skip to content

chore: upgrade to Astro 6, Tailwind CSS v4, and latest packages#18

Open
ChrisLaRocque wants to merge 3 commits into
mainfrom
chore/upgrade-astro-packages
Open

chore: upgrade to Astro 6, Tailwind CSS v4, and latest packages#18
ChrisLaRocque wants to merge 3 commits into
mainfrom
chore/upgrade-astro-packages

Conversation

@ChrisLaRocque
Copy link
Copy Markdown
Owner

Summary

Upgrades all Astro packages and dependencies to their latest versions. Build passes cleanly with all 70+ pages pre-rendering correctly.

Package Updates

Package Before After
astro 5.14.1 6.0.5
@astrojs/mdx 4.3.6 5.0.1
@astrojs/netlify 6.6.4 7.0.3
@astrojs/partytown 2.1.4 2.1.5
@astrojs/tailwind 6.0.2 Removed (deprecated)
@tailwindcss/vite 4.2.1 (new)
tailwindcss 3.3.5 4.2.1
astro-expressive-code 0.41.3 0.41.7
sharp 0.31.3 0.34.5
satori 0.4.0 0.25.0
octokit 3.1.2 5.0.5
tailwind-merge 2.0.0 3.5.0
prettier 3.2.5 3.8.1
prettier-plugin-astro 0.13.0 0.14.1
prettier-plugin-tailwindcss 0.5.11 0.7.2

Migration Changes

Tailwind CSS v3 → v4

  • Removed @astrojs/tailwind integration and tailwind.config.cjs
  • Added @tailwindcss/vite plugin to astro.config.mjs
  • Moved theme config (custom colors, fonts) to CSS @theme directives in src/styles/main.css
  • Added @variant dark for class-based dark mode support
  • Added @reference "tailwindcss" to src/styles/content.css for @apply resolution

Content Collections → Content Layer API (Astro 6)

  • Moved src/content/config.tssrc/content.config.ts
  • Added glob() loader from astro/loaders to both collections
  • Updated all pages: entry.slugentry.id, entry.render()render(entry) from astro:content

Files Changed (14)

  • package.json / pnpm-lock.yaml
  • astro.config.mjs
  • src/content.config.ts (new, replaces src/content/config.ts)
  • tailwind.config.cjs (deleted)
  • src/styles/main.css / src/styles/content.css
  • src/pages/index.astro
  • src/pages/projects/[...slug].astro / [...slug].md.ts / index.astro
  • src/pages/tech/[...slug].astro / index.astro
  • utils/collections.ts

Major changes:
- Astro 5.14.1 → 6.0.5
- @astrojs/mdx 4.3.6 → 5.0.1
- @astrojs/netlify 6.6.4 → 7.0.3
- Tailwind CSS 3.3.5 → 4.2.1 (major rewrite)
- Replace @astrojs/tailwind with @tailwindcss/vite
- octokit 3.1.2 → 5.0.5
- satori 0.4.0 → 0.25.0
- sharp 0.31.3 → 0.34.5
- tailwind-merge 2.0.0 → 3.5.0
- prettier 3.2.5 → 3.8.1

Migration details:
- Content collections: migrate to Content Layer API with glob() loader
  - Move src/content/config.ts → src/content.config.ts
  - entry.slug → entry.id throughout
  - entry.render() → render(entry) from astro:content
- Tailwind v4: move config from tailwind.config.cjs to CSS @theme
  - Add @import "tailwindcss" and @theme block to main.css
  - Add @variant dark for class-based dark mode
  - Add @reference "tailwindcss" to content.css for @apply support
  - Delete tailwind.config.cjs
- Astro config: replace tailwind() integration with vite plugin

Co-authored-by: astroexpert <astroexpert@miriad.systems>
@netlify
Copy link
Copy Markdown

netlify Bot commented Mar 17, 2026

Deploy Preview for calm-rolypoly-59f26c ready!

Name Link
🔨 Latest commit e632aa0
🔍 Latest deploy log https://app.netlify.com/projects/calm-rolypoly-59f26c/deploys/69cea120b578400008a7fd92
😎 Deploy Preview https://deploy-preview-18--calm-rolypoly-59f26c.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: 99 (🔴 down 1 from production)
Accessibility: 100 (no change from production)
Best Practices: 100 (no change from production)
SEO: 100 (no change from production)
PWA: 90 (no change from production)
View the detailed breakdown and full score reports

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

ChrisLaRocque and others added 2 commits April 2, 2026 12:04
In Tailwind v4, unlayered author styles take precedence over @layer
utilities regardless of specificity. The main > section h* rules were
unlayered, so they overrode explicit text-size utility classes on
individual elements (e.g. text-2xl on project/tech card h3s), forcing
all of them to text-3xl.

Wrapping in @layer components restores the expected cascade: utilities
still win when explicitly applied.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
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.

1 participant