Using Tailwind in Custom Admin Components messes up Admin Collection Table View

[HappyEmu]

Describe the Bug

When I wanted to add a custom field component to one of my fields in a collection, I want to use Tailwind to style that component. In fact, the component I want to use as a custom Field component is a component that is already used in the user-facing (frontend).

I was mostly successful in integrating the component, but noticed that adding Tailwind as per https://payloadcms.com/posts/blog/how-to-setup-tailwindcss-and-shadcn-ui-in-payload (I know it's outdated) messes up the table widths in the collection views:

With @tailwind utilities; in app/(payload)/custom.scss

With @tailwind utilities; in app/(payload)/custom.scss

Notice how with @tailwind utilities;, the table width does not span the full width of the parent container.

I'm wondering if the way outlined in above blog post is still the way to integrate Tailwind into custom components. If not, then I certainly have not found a way to do it in the docs and the example at https://github.com/payloadcms/payload/tree/main/examples/tailwind-shadcn-ui still proposes to do it in the same way.

This is easily reproducible by checking out the website template of create-payload-app and adding the Tailwind directives, which is what I did in my reproduction link below.

Link to the code that reproduces this issue

https://github.com/HappyEmu/payload-custom-tailwind-component-reprod

Reproduction Steps

• Clone Repo
• Start dev server
• Login into Admin Panel
• Add any entry to one of the collections, for example Redirects
• Notice how the table width changes depending on whether @tailwind utilities; is declared or not.

Which area(s) are affected? (Select all that apply)

area: ui, area: templates, area: docs

Environment Info

Binaries:
  Node: 22.12.0
  npm: 10.9.0
  Yarn: N/A
  pnpm: 10.3.0
Relevant Packages:
  payload: 3.28.1
  next: 15.2.2
  @payloadcms/db-mongodb: 3.28.1
  @payloadcms/email-nodemailer: 3.28.1
  @payloadcms/graphql: 3.28.1
  @payloadcms/live-preview: 3.28.1
  @payloadcms/live-preview-react: 3.28.1
  @payloadcms/next/utilities: 3.28.1
  @payloadcms/payload-cloud: 3.28.1
  @payloadcms/plugin-form-builder: 3.28.1
  @payloadcms/plugin-nested-docs: 3.28.1
  @payloadcms/plugin-redirects: 3.28.1
  @payloadcms/plugin-search: 3.28.1
  @payloadcms/plugin-seo: 3.28.1
  @payloadcms/richtext-lexical: 3.28.1
  @payloadcms/translations: 3.28.1
  @payloadcms/ui/shared: 3.28.1
  react: 19.0.0
  react-dom: 19.0.0
Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.5.0: Wed May  1 20:12:58 PDT 2024;
  Available memory (MB): 32768
  Available CPU cores: 10

[akhrarovsaid]

Hey @HappyEmu

This is because the utilities from Tailwind includes a conflicting .table class that changes the display of the Payload table, so it causes this artifact. Fortunately, you can fix this issue easily by doing the following in your custom.scss:

@layer utilities {
  .table {
    display: block;
  }
}

Let me know if that works for you!

[HappyEmu]

@akhrarovsaid Yes, that fixes this particular problem, thank you ❤

But I'm wondering if this is working as intended since I thought that was exactly the reason why Payload uses their own payload-defaults CSS layer.
If we should expect clashes with other styles, and especially Tailwind styles, there should probably be a big disclaimer somewhere in the docs that Tailwind and in turn ShadCN components cannot be used without hassle in custom admin components.

It was certainly a surprise at our company that we cannot use e.g. ShadCN components as custom components in the admin interface (e.g Sidebar for navigation) without problems.

The only guide we get in the docs is:

Note: If you are building Custom Components, it is best to import your own stylesheets directly into your components, rather than using the global stylesheet.

I wonder how that is supposed to work with Tailwind, maybe I am missing something. Also, this would go against our wish to be able to re-use user facing frontend components in the admin interface.

Also, it would be nice to know if https://payloadcms.com/posts/blog/how-to-setup-tailwindcss-and-shadcn-ui-in-payload is still considered valid with the current state of Payload 3.0.

[frosty-gull]

Just want to mention I lost several hours trying to figure out this bug before finding this thread.

Am I doing custom components wrong? Did I break a config somewhere? Should I restyle the parts of the admin that are now broken, or restyle my whole component?

This is the anguish devs are going to go through if they don't find this overwrite fix.

[rubixvi]

@layer theme {
  @import "tailwindcss/theme.css";
}

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap");

@layer base {
  .twp {
    @import "tailwindcss/preflight.css";
  }

  :root {
    --font-inter: "Inter", sans-serif;
  }

  .no-twp {
    *,
    ::after,
    ::before,
    ::backdrop,
    ::file-selector-button {
      all: revert-layer;
    }
  }
  * {
    font-family: var(--font-inter);
  }
}

@layer components;

@layer utilities {
  @import "tailwindcss/utilities.css";
}

@media (max-width: 1024px) {
  .collection-list .table {
    width: 100%;
    left: 0;
    padding-left: 0;
  }

  .collection-list .table:after {
    padding-right: 0;
  }
}

try use this for tailwind, this is how I get my tailwind components to work on payload. Both in dev and in production,

using this 'twp' to override things such as h2, h3, h4 classes and p classes for example