Best approach for styling 3rd party libraries / themes?

[andymerskin]

I was skimming through the docs and couldn't find a sensible solution to what I'm looking into for a feature we're adding to our project soon. We want to give Lexical a go for rich text editing, which has its own theming system.

With Twin, the whole idea is to use Tailwind exclusively as a CSS-in-JS solution, where your config's classes aren't necessarily available normally for a use case like this. In a traditional Tailwind project, you'd be able to pass a string of Tailwind utilities to each element in a theme configuration like this, and you're good to go.

Related discussion at Lexical: facebook/lexical#6338

Example

Take this Lexical theme for example, which accepts a string of classNames for each element:
https://github.com/tomoima525/lexical-tailwind-css/blob/main/components/Editor/EditorThemes.ts

However, there's no way I've found to do something like this:

// Lexical theme
const editorTheme = {
  heading: {
    h1: tw`text-h1 font-bold`.toClassName() // this isn't real, but would be more ideal
  },
};

Workaround

So the only workaround I can think of would be to create a global style that would define classNames with tw calls embedded inside of it:

const LexicalStyles = createGlobalStyle`
  .lexical-h1 {
    ${tw`text-h1 font-bold`}; 
  }
  ...
`;

// Lexical theme
const editorTheme = {
  heading: {
    h1: "lexical-h1"
  }
};

And repeat for 64 unique classNames, this turns into a real slog where I can't just edit the Tailwind utilities directly in the theme config because it's defined in a messy, verbose CSS object tucked away in a global style definition. Definitely not the end of the world, but if you were to fully style a theme this large, it would get a bit unwieldy.

Is there a better approach to this that's available in Twin today that I'm not aware of? How have others approached theming/styling 3rd party components? In some cases, libraries expose the ability to swizzle components (i.e. swap them out), where you could provide tw-styled elements, but not all libraries do this.

Any suggestions are appreciated! Thanks!