Set theme for external component with prefix

[pplonski]

I have a component that is using prefix, tw-. It is used in the website that is using Tailwind but with no prefix.
To set theme in a component it needs to have prefix, for example tw-dark. But in website I set just dark to set theme. How to set theme in the component and website?

[Vijaykv5]

Hi @pplonski
To set the theme both in the component, which requires a prefix like tw-, and the website without a prefix, you can do a conditional approach.

For you components, you can do like this:

• you can define a prop in your component to receive the theme.
• Use a ternary operator to append the prefix.
• Apply the theme class to your component's elements.

function YourComponent({ theme }) {
  const prefixedTheme = theme.startsWith("tw-") ? theme : `tw-${theme}`;
  
  return (
    <div className={`${prefixedTheme}`}>
    
    </div>
  );
}

For you website, you can do like this:

• Just use the theme name directly without any prefix.
• Render the component and pass the theme as a prop.

function Website() {
  return (
    <div>
      <YourComponent theme="dark" />
    </div>
  );
}

[pplonski]

Thank you @Vijaykv5 it is working!