Skip to content

Conversation

theurzil
Copy link

Package Updates and Tailwind CSS v4 Migration

Hi @trevorwrightdev I'm contributing to your repo to improve my open source skills and help modernize the project. This PR includes several important updates and fixes.

What I Did

Package Management

  • Updated package versions across frontend and backend
  • Removed npm lock and switched to yarn for better dependency management
  • Fixed Supabase client async/await handling for Next.js 15 compatibility

Frontend Updates

  • Next.js: Updated to v15.3.2
  • React & React DOM: Updated to v19.1.0
  • TypeScript: Updated to v5.8.3
  • Tailwind CSS: Migrated from v3 to v4.1.7
  • Other packages: GSAP v3.13.0, Socket.io client v4.8.1, Zod v3.25.28, UUID v11.1.0

Backend Updates

  • Express: Updated to v5.1.0
  • Socket.io: Updated to v4.8.1
  • TypeScript: Updated to v5.8.3
  • Other packages: UUID v11.1.0, Zod v3.25.28, Dotenv v16.5.0
  • Added ts-node v10.9.2

Major Changes

Tailwind v4 Migration:

  • Removed tailwind.config.js file
  • Migrated to CSS-first approach in globals.css
  • Updated PostCSS config from .js to .mjs format
  • Added @tailwindcss/postcss package

Next.js 15 Compatibility:

  • Fixed Supabase client creation to handle async cookies()
  • Updated all Supabase client calls with proper await handling
  • Made createClient function async

Code Examples

Supabase Client Fix:

// Before (broken in Next.js 15)
const supabase = createClient()

// After (working solution)
const supabase = await createClient()

PostCSS Configuration:

// Old: postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

// New: postcss.config.mjs
const config = {
  plugins: {
    "@tailwindcss/postcss": {}
  }
};
export default config;

Testing

All pages are working correctly after the migration. The UI remains consistent while running on the updated dependencies.

Screenshots

Home Page

Screenshot 2025-05-26 at 22-11-30 Gather

Sign in Page

Screenshot 2025-05-26 at 22-11-48 Gather

App Page

Screenshot 2025-05-28 at 23-02-19 Gather

Realm Page

Screenshot 2025-05-28 at 23-02-04 Gather

- Update package versions
- Remove npm lock and use yarn instead
- Fix Supabase client async/await handling
Copy link

vercel bot commented May 28, 2025

@averrois is attempting to deploy a commit to the trevorwrightdev's projects Team on Vercel.

A member of the Team first needs to authorize it.

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