How to Enable Tailwind v3 CSS in the Payload Admin (with the Website Template)

If you’re using Payload CMS and started with the Website template, you’ll be happy to know that Tailwind CSS is already set up for the frontend. But what if you want to bring those sweet Tailwind styles into the admin dashboard too?

In this post, I’ll show you how to enable Tailwind in the Payload Admin while keeping your styles consistent with the rest of your site. Let’s get started.

✅ Step 1: Use the Website Template

First things first—make sure you’re using the official Payload Website template, which comes with Tailwind CSS v3 already configured.

1npx create-payload-app
Copy

Choose the Website template when prompted.

🧵 Step 2: Check the Tailwind Setup in Your Frontend

Navigate to src/app/(frontend)/globals.css. You’ll see the standard Tailwind setup:

1@tailwind base;
2@tailwind components;
3@tailwind utilities;
Copy

Below that, you’ll also notice some custom base styling inside:

1@layer base {
2  /* Your base styles here */
3}
Copy

This file is used for your website frontend, and we’ll be reusing most of it for the admin.

🧩 Step 3: Create a New CSS File for the Admin

Now go to the src/app/(payload) folder and create a new file called:

1payloadStyles.css
Copy

This will be the stylesheet specifically for your admin dashboard.

📋 Step 4: Reuse Your Styles (With a Small Tweak)

Copy the contents of your globals.css file and paste them into payloadStyles.css. But remove the line:

1@tailwind base;
Copy

That’s important—since Payload already injects its own base styles, including @tailwind base; can cause conflicts. Everything else (like @tailwind components; and @tailwind utilities;) is safe to keep.

🧶 Step 5: Import Your Styles in the Admin Layout

Finally, open the admin layout file:

src/app/(payload)/layout.tsx

At the top of the file, add this line:

1import "./payloadStyles.css";
Copy

This will apply your Tailwind styles to the entire admin dashboard.

🛠️ Optional: Quick Fix for Table Styling

You might notice that some elements (like tables) don’t look quite right. A quick fix, you can add to your payloadStyles.css:

1.table {
2  width: 100%;
3}
Copy

This ensures tables use the full width, which is often the expected behaviour in admin UIs.

🎉 That’s It!

You now have Tailwind CSS running in both the frontend and admin sides of your Payload app. Your styles stay consistent, and you can take advantage of all the utility classes you’re used to.