Documentation: Required Migration for Tailwind

[sebald]

Gather all things that have to be changed/migrated/updated/...

The List

• Setup Tailwind with NexJS
• Migrate theme from Emotion to Tailwind
• Create preset for Documentation theme (do we need that?)
• Migrate tokens (colors, typography , root styles, all open-props) to Tailwind => referes to @marigold/tokens which is deleted in tailwind-variants
• Migrate components (PropsTable, AppearanceTbale, etc.) to Tailwind
• Demos are using Box -> needs migration to use Tailwind and className
• How can we switch themes with Tailwind in our documentation?
• How can we load inside the docu theme our marigold themes?
• go through mdx files and eventually adjust text or pages // also delete old pages for example styling.mdx, box.mdx, css-in-js.mdx etc.

---

• Can we use Sandbox for code Demos? (How to Switch themes? How to use the latest, not published version of Marigold?)

[sarahgm]

Setup Tailwind with NexJS
https://nextjs.org/docs/app/building-your-application/styling/tailwind-css

How can we switch themes with Tailwind in our documentation?:
https://dev.to/shreyvijayvargiya/theme-toggle-using-tailwind-css-in-just-3-steps-1eij
https://dev.to/luisca/step-by-step-guide-to-adding-dark-mode-and-multiple-themes-to-your-nextjs-app-15lh
how to build a theme switcher => https://www.youtube.com/watch?v=9JNJbCb6kdk

I would say similar to how it is in Storybook -> switching through data-theme

there isnext-themes which comes with an own themeprovider and useTheme Hook 🤔 https://www.npmjs.com/package/next-themes

example other design systesms: https://daisyui.com/docs/themes/

[sarahgm]

Is in this case meant to update to next 13 or stay with 12?

[sarahgm]

Sandpack with Tailwind: https://sandpack.codesandbox.io/docs/getting-started/usage#static-external-resources
We have to include all or theme css files I think as option
I think about how to switch its a question to figure out by doing it