docs: add guide to install Panda with Rsbuild (#3344)

docs: add guide to install Panda in Rsbuild

Author: Blinks44

website/pages/docs/installation/_meta.json

@@ -9,6 +9,7 @@
   "gatsby": "Gatsby",
   "ember": "Ember",
   "redwood": "Redwood",
+  "rsbuild": "Rsbuild",
   "qwik": "Qwik",
   "vite": "Vite",
   "vue": "Vue",

website/pages/docs/installation/rsbuild.mdx

@@ -0,0 +1,186 @@
+---
+title: Using Rsbuild
+description: Easily use Panda with Rsbuild, React and Typescript with our dedicated integration.
+---
+
+# Using Panda CSS with Rsbuild
+
+Setting up Panda CSS in a Rsbuild project using PostCSS.
+
+## Start a new project
+
+<Steps>
+
+### Create Rsbuild project
+
+To get started, we will need to create a new Rsbuild project using `react-ts` template.
+
+<Tabs items={['pnpm', 'npm', 'yarn', 'bun']}>
+  <Tab>
+    ```bash
+    pnpm create rsbuild@latest --dir test-app --template react-ts
+    cd test-app
+    pnpm install
+    ```
+  </Tab>
+  <Tab>
+    ```bash
+    npm create rsbuild@latest --dir test-app -- --template react-ts
+    cd test-app
+    npm install
+    ```
+  </Tab>
+  <Tab>
+    ```bash
+    yarn create rsbuild@latest --dir test-app --template react-ts
+    cd test-app
+    yarn
+    ```
+  </Tab>
+  <Tab>
+    ```bash
+    bun create rsbuild@latest --dir test-app --template react-ts
+    cd test-app
+    bun install
+    ```
+  </Tab>
+</Tabs>
+
+
+### Install Panda
+
+Install panda and create your `panda.config.ts` file.
+
+<Tabs items={['pnpm', 'npm', 'yarn', 'bun']}>
+  <Tab>
+    ```bash
+    pnpm install -D @pandacss/dev
+    pnpm panda init --postcss
+    ```
+  </Tab>
+  <Tab>
+    ```bash
+    npm install -D @pandacss/dev
+    npx panda init --postcss
+    ```
+  </Tab>
+  <Tab>
+    ```bash
+    yarn add -D @pandacss/dev
+    yarn panda init --postcss
+    ```
+  </Tab>
+  <Tab>
+    ```bash
+    bun add -D @pandacss/dev
+    bun panda init --postcss
+    ```
+  </Tab>
+</Tabs>
+
+### Update package.json scripts
+
+Open your `package.json` file and update the `scripts` section as follows:
+
+```diff {3} filename="package.json"
+{
+  "scripts": {
+    "build": "rsbuild build",
+    "dev": "rsbuild dev --open",
++   "prepare": "panda codegen",
+    "preview": "rsbuild preview"
+  }
+}
+```
+- `"prepare"` - script that will run Panda CSS CLI codegen before each build. Read more about [codegen](/docs/references/cli#panda-codegen) in the CLI section.
+
+> This step ensures that the panda output directory is regenerated after each dependency installation. So you can add the output directory to your `.gitignore` file and not worry about it.
+
+### Configure the content
+
+Make sure that all of the paths of your React components are included in the `include` section of the `panda.config.ts` file.
+
+```js {8} filename="panda.config.ts"
+import { defineConfig } from "@pandacss/dev"
+
+export default defineConfig({
+ // Whether to use css reset
+ preflight: true,
+
+ // Where to look for your css declarations
+ include: ["./src/**/*.{js,jsx,ts,tsx}", "./pages/**/*.{js,jsx,ts,tsx}"],
+
+ // Files to exclude
+ exclude: [],
+
+ // Generates JSX utilities with options of React, Preact, Qwik, Solid, Vue 
+ jsxFramework: 'react',
+
+ // The output directory for your css system
+ outdir: "styled-system",
+})
+```
+
+### Configure the entry CSS with layers
+
+Add this code to an `src/App.css` file imported in the root component of your project.
+
+```css filename="src/App.css"
+@layer reset, base, tokens, recipes, utilities;
+```
+
+## Start your build process
+
+Run the following command to start your development server.
+
+<Tabs items={['pnpm', 'npm', 'yarn', 'bun']}>
+  <Tab>
+    ```bash
+    pnpm dev
+    ```
+  </Tab>
+  <Tab>
+    ```bash
+    npm run dev
+    ```
+  </Tab>
+  <Tab>
+    ```bash
+    yarn dev
+    ```
+  </Tab>
+  <Tab>
+    ```bash
+    bun dev
+    ```
+  </Tab>
+</Tabs>
+
+### Start using Panda
+
+Now you can start using Panda CSS in your project.
+Here is the snippet of code that you can use in your `src/App.tsx` file.
+
+```tsx filename="src/App.tsx"
+import { css } from '../styled-system/css';
+
+function App() {
+  return (
+    <div className={css({ fontSize: "2xl", fontWeight: 'bold' })}>Hello 🐼!</div>
+  )
+}
+
+export default App;
+```
+</Steps>
+
+## Troubleshooting
+
+If you're not getting import autocomplete in your IDE, you may need to include the `styled-system` directory in your `tsconfig.json` file:
+
+```json filename="tsconfig.json"
+{
+  // ...
+  "include":  ["src", "styled-system"]
+}
+```