Document common css-in-js setups

packages/website/docs/css.md

@@ -36,3 +36,104 @@ export const MyStory: Story = () => {
 If the project contains valid PostCSS config (any format supported by [postcss-load-config](https://github.com/postcss/postcss-load-config), e.g. `postcss.config.js`), it will be automatically applied to all imported CSS.
 
 Ladle just defaults to [Vite's CSS handling](https://vitejs.dev/guide/features.html#css).
+
+## Tailwind
+
+There is a working [example](https://github.com/tajo/ladle/blob/main/e2e/css/src/hello.stories.tsx#L11). You need to install `tailwindcss` and create
+
+```js title="postcss.config.js"
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
+```
+
+and
+
+```js title="tailwind.config.js"
+module.exports = {
+  content: ["./src/**/*.{js,ts,jsx,tsx}"],
+  theme: {},
+  variants: {},
+  plugins: [],
+};
+```
+
+## Emotion
+
+Add these dependencies
+
+```sh
+pnpm add @emotion/react @swc/plugin-emotion @vitejs/plugin-react-swc
+```
+
+And create
+
+```js title="vite.config.js"
+import react from "@vitejs/plugin-react-swc";
+
+export default {
+  plugins: [
+    react({
+      jsxImportSource: "@emotion/react",
+      plugins: [["@swc/plugin-emotion", {}]],
+    }),
+  ],
+};
+```
+
+## Styled-components
+
+Styled-components work out of the box but it's highly recommended to install the optional plugin.
+
+```sh
+pnpm add styled-components @swc/plugin-styled-components @vitejs/plugin-react-swc
+```
+
+And create
+
+```js title="vite.config.js"
+import react from "@vitejs/plugin-react-swc";
+
+export default {
+  plugins: [
+    react({
+      plugins: [["@swc/plugin-styled-components", {}]],
+    }),
+  ],
+};
+```
+
+## BaseWeb and Styletron
+
+```sh
+pnpm add baseui styletron-react styletron-engine-monolithic
+```
+
+and create a global provider:
+
+```js title=".ladle/components.tsx"
+import { Provider as StyletronProvider } from "styletron-react";
+import { Client as Styletron } from "styletron-engine-monolithic";
+import { LightTheme, DarkTheme, BaseProvider } from "baseui";
+import type { GlobalProvider } from "@ladle/react";
+
+const engine = new Styletron();
+
+export const Provider: GlobalProvider = ({ children, globalState }) => (
+  <StyletronProvider value={engine}>
+    <BaseProvider
+      theme={{
+        ...(globalState.theme === "dark" ? DarkTheme : LightTheme),
+        direction: globalState.rtl ? "rtl" : "ltr",
+      }}
+    >
+      {children}
+    </BaseProvider>
+  </StyletronProvider>
+);
+```
+
+This will setup [BaseWeb](https://baseweb.design) component library, [Styletron](https://styletron.org/) and integrates Dark/Light themes with Ladle.