Tailwind Class Prefix for components

[juliankolbe]

Summary

Adding a prefix to the tailwind config will prefix all tailwind classes and all flowbite classes. Then when using normal tailwind in svelte its easy (while still tedious) to prefix the classes yourself.

It is however not possible to prefix the tailwind classes used by the flowbite-svelte components. Component classes can only partially be modified to use the prefix by overwriting all classes available via props, but all the other classes are not accessible.

It is also not nice DX to have to overwrite every class manually even if it was possible.

Step to fix this

twMerge can be extended to allow prefixes like so:

import { extendTailwindMerge } from "tailwind-merge";

export const twMerge = extendTailwindMerge({
  prefix: "tw-",
});

In addition, there needs to be some config + functionality that add the prefix to every class that's being used. I don't know all the steps to achieve this, but having it would be great.

Motivation

The Motivation should be clear, to avoid clashes with other tailwind classes when they collide. Which is real problem sometimes.