I created a template for Payload CMS that uses Tailwind CSS v4

The main reason was practical. I couldn’t find a starter that already had Tailwind v4 set up cleanly with Payload, especially one that also worked properly inside the admin panel.

So this template is mostly about saving setup time.

What’s included

The template uses:

Payload CMS with Postgres (configured for Vercel)

Next.js

Tailwind CSS v4, already configured

Nothing unusual here. It’s meant to be a normal Payload setup that you can extend.

Tailwind v4 is set up not only for the frontend, but also for the Payload admin panel.

This means:

You can use the same utility classes in both places

Styling feels more consistent when you customize the admin UI

No separate styling setup for the CMS side

System-based theming

There’s a small script called SystemThemeScript that handles theming based on the user’s system preference.

It does the following:

Sets data-theme to light or dark on the html element

Runs before the page renders, so there’s no theme flicker

Keeps the app in sync with the OS theme

There’s no custom theme switcher by default. It just follows the system.

Theme-aware favicons

The same script also handles favicons.

The browser automatically switches between:

A light SVG favicon

A dark SVG favicon

This is based on the system theme.

If you want to change them, you just replace the files in the public folder.

Admin branding

Admin branding is kept simple:

Logos and icons live in the public folder

PNG or ICO fallbacks can be registered in payload.config.ts

No custom hacks or overrides

Who this is for

This template is useful if:

You’re starting a new Payload CMS project

You want Tailwind CSS v4 from the beginning

You want basic theming to work correctly without extra setup

That’s really it.

Repository

GitHub link:

https://github.com/sagarmusabbir/payloadcms-tailwindcss-v4-template

If you need more features, you can build on top of it or remove what you don’t need.