Updating Payload CMS Website template to Latest Tailwind CMS

Payload CMS is a modern, headless content management system built with TypeScript, React, and Node.js. Designed for developers, it offers full control over data models, access control, and UI customization, making it ideal for building complex applications, websites, and platforms. Unlike traditional CMSs that enforce rigid structures, Payload is API-first and file-based, allowing content types, relationships, and fields to be defined directly in code.

One of Payload’s standout features is its extensibility — it supports custom React components in the admin panel, powerful hooks, and plugins. It also has first-class support for authentication, localization, file uploads, and custom GraphQL or REST APIs, out of the box. With no reliance on a database schema migration system, Payload stores content in MongoDB, enabling flexible and dynamic content structures.

Because it is self-hosted and open-source, Payload gives teams complete control over infrastructure, security, and performance. Its developer-friendly approach makes it particularly appealing for projects that need a tightly integrated backend and frontend — especially when paired with modern frameworks like Next.js.

Whether you're building a SaaS platform, marketing site, or internal tool, Payload CMS provides a flexible, powerful foundation to create a fully custom content management experience.

Update Your package.json

Now After the deps are installed . We need to change the postcss.config.js

Now we need to update our global CSS file to make the changes. In new Tailwind CSS 4+ they removed additional file tailwind.config.mjs but still they kept a way to keep using our old tailwind.config.mjs as backwards compatiblity.

Now in src/app/(frontend)/globals.css

That would be pretty much it.

Now we can actually remove a stale dependency named

Now in tailwind.config.mjs

Now in our globals.css

The stale dependency is gone. But newer one may not be pure drop in replacement so check for additional code that you may have written on.

We can deploy the app into Vercel or AWS Lambda or anywhere that supports the serverless deployments,

It is also possible to deploy it on docker using our Docker Distroless images for Node js, its recommended to use a LTS node.