Better CSS namespacing / interop with CSS class-based styling libraries

[tyteen4a03]

People often use libraries like Tailwind to add additional styling to their Payload admin panels. However, there's currently no interop guidelines for Payload's CSS classes use, therefore class names like .table would cause the table to break, because Tailwind also includes its own .table utility. It also means that if devs want to use Tailwind table, they can't do it without it breaking Payload tables.

I'm not sure what the solution is here - ideally, Payload should prefix all its classes with its own namespacing, but that would be a BC break.

[chmielulu]

therefore class names like .table would cause the table to break, because Tailwind also includes its own .table utility

I think a workaround for this is to use the prefix option. See the documentation below
V4 - https://tailwindcss.com/docs/upgrade-guide#using-a-prefix
V3 - https://v3.tailwindcss.com/docs/configuration#prefix

[tyteen4a03]

It should be Payload that shields itself from the developers, not the other way round.

[chmielulu]

I agree, this is just the workaround for the moment, not the solution.