Rubix StudiosRubix Studios
Vincent is the founder and director of Rubix Studios, with over 20 years of experience in branding, marketing, film, photography, and web development. He is a certified partner with industry leaders including Google, Microsoft, AWS, and HubSpot. Vincent also serves as a member of the Maribyrnong City Council Business and Innovation Board and is undertaking an Executive MBA at RMIT University.
TailwindCSS can be used effectively with PayloadCMS, its global styling behaviour requires a structured setup to prevent unnecessary overrides in the admin panel. This guide presents a clear method for enabling TailwindCSS v4 across both the application frontend and the Payload admin, along with support for shadcn/ui components.
A new Payload project may be created using the standard scaffolding process, or TailwindCSS can be added to an existing codebase. The initial steps focus on installing TailwindCSS and configuring PostCSS so styles are compiled correctly.
Tailwind installation
Install tailwindcss, @tailwindcss/postcss, and postcss via npm.
bash
postcss.config.mjs
Add @tailwindcss/postcss to your postcss.config.mjs file, or wherever PostCSS is configured in your project.
javascript
Ensure there are separation between your application's frontend and PayloadCMS to avoid style overrides.
(frontend)/layout.tsx
For NextJS frontends, tailwind import can simply be done within the root layout.
typescript
PayloadCMS however, as per the warning described within the layout.tsx file.
typescript
We should not import tailwind in the same way as the frontend. Alternatively, we should utilise the standard custom.scss provided. This is a standard file that PayloadCMS produces for the purpose of CSS manipulation within Payload and therefore safe to edit.
app/(payload)/custom.scss
The following code can simply be copied into custom.scss.
typescript
In many cases, you'll notice the collections table being incorrectly styled. To address this, adding in this additional code below the tailwind configuration in custom.scss will address this issue.
typescript
The admin panel uses its own styling structure, so Tailwind should not be applied globally. A scoped approach allows Tailwind to be used only where needed. A .twp class enables Tailwind within selected components, while .no-twp can be used to prevent style inheritance in specific areas.
This ensures the admin panel maintains its standard appearance while still allowing Tailwind utilities to be used in custom admin views.
typescript
Lets take this for example, we're utilising Payload's native useAuth and useConfig to obtain our user state and payload configuration to pass into our component.
Our child components are imported from shadcn/ui's library. within our example <DropdownMenu> itself does not expose a className prop and therefore we've placed our .twp class within it's child, every child there are inherits tailwind unless .no-twp is added.
typescript
TailwindCSS v4 introduces a revised layering system that works well with Payload as long as the order of theme, base, components, and utilities is consistent. The configuration added to the admin stylesheet ensures Tailwind loads only within scoped regions and does not override Payload defaults.
app/(payload)/custom.scss
css
shadcn/ui global.css
Shadcn/ui provides a global style sheet example, this style sheet utilises .dark for light and dark mode coordination.
global.css
In our example we've broken global.css into smaller portions for maintainability and utilisation.
typescript
Assuming shadcn/ui's styling is within base.css
app/(payload)/custom.scss
We can import a shared base.css file that contains shadcn's native styling.
css
styles/base.css
PayloadCMS uses [data-theme='dark'] for dark style while shadcn/ui uses .dark. To ensure compatibility between shared styling we've modified @custom-variant to accomodate both frontend and Payload backend.
css
This configuration provides a clean and predictable way to use TailwindCSS and shadcn/ui within both the frontend and the Payload admin panel. By scoping Tailwind in the admin and aligning its theme and base layers, developers gain consistent styling without disrupting Payload’s built-in interface. The approach supports scalable component development and improves the speed and flexibility of UI work across the entire project.
Vincent is the founder and director of Rubix Studios, with over 20 years of experience in branding, marketing, film, photography, and web development. He is a certified partner with industry leaders including Google, Microsoft, AWS, and HubSpot. Vincent also serves as a member of the Maribyrnong City Council Business and Innovation Board and is undertaking an Executive MBA at RMIT University.