How to setup Tailwind CSS and shadcn/ui in Payload

Опубликовано: 18 Февраль 2026
на канале: Payload
8,876
138

One of the most requested tutorials we are asked for is how to integrate Tailwind CSS, the still-contentious CSS utility framework that warrants no introduction, into the Payload admin panel. As a bonus, this tutorial will also cover integrating shadcn/ui.

#css #webdevelopment #nextjs #tutorial #javascript

⭐ Find this useful? Give us a star! https://github.com/payloadcms/payload
Join us on Discord:   / discord  

As of 3.0 (still in beta), the Payload admin panel integrates directly into your Next.js App Router project. This lends us the flexibility and some of the integrations Next.js already comes with, making the addition of Tailwind or other libraries easier than in previous versions.

What is Payload?
— The fastest growing CMS in our category.
— Next.js native, so it can seamlessly integrate it into your Next app. You can also one-click deploy on Vercel.
— Fully open-source, offering the flexibility of self-hosting or managed hosting.
— Fully TypeScript, eliminating the need to navigate through a UI – simply configure everything in code.
— Highly extensible, granting you full control over custom hooks, endpoints, and more. It's not just a CMS; you can extend it to become a comprehensive backend for any application you build.
— Use as a standalone app if you're working with other frameworks.

Get started in one line: npx create-payload-app@beta