Theme Provider

[d0whc3r]

Could it be possible to add a "provider" to handle changes of theme elements in runtime?

Something similar to "ThemeProvider" in styled-components, usage example:

import tailwindcss from '../tailwindcss/tailwindcss.config';

const darkTheme = {
  ...tailwindcss,
  colors: { ...tailwindcss.colors, primary: 'black' }
};

const lightTheme = {
  ...tailwindcss,
  colors: { ...tailwindcss.colors, primary: 'white' }
};

export default function App() {
return (
  <div>
    <ThemeProvider theme={lightTheme}>
      <span css={css`color: ${theme`colors.primary`};}>sample with white</span>
    </ThemeProvider>
  
    <ThemeProvider theme={darkTheme}>
      <span css={css`color: ${theme`colors.primary`};}>sample with black</span>
    </ThemeProvider>
  </div>
  );
}

https://styled-components.com/docs/api#themeprovider

[d0whc3r]

Ok... I think this question is answered here: #251

[fvanwijk]

Yes you can resolve the Tailwind theme and put it into a ThemeProvider, just like the example above.
In tailwind v1 you had the resolveConfig helper but it was not the preferred approach and I can't find it in the v2 docs.

How to use Tailwind/twin in combination with ThemeProvider is demonstrated in the advanced react+styled-components example.

[d0whc3r]

Ok I see, I can change css variables in GlobalStyle to have a dynamic theme