%% generate tags start %%
#software-engineering #software-engineering/css
%% generate tags end %%
#software-engineering/remix #software-engineering/css/panda-css
first you need to have a remix project, see [[How to start a remix project quickly?]]
1. run this in command
```bash
pnpm install -D @pandacss/dev
pnpm panda init --postcss --out-extension js
```
2. add prepare to `package.json`
```diff
{
"scripts": {
+ "prepare": "panda codegen",
"build": "remix build",
"dev": "remix dev",
"start": "remix-serve build",
"typecheck": "tsc"
}
}
```
3. update `panda.config.ts`
```ts
import { defineConfig } from "@pandacss/dev"
export default defineConfig({
// File extension for generated javascript files
outExtension: 'js',
// Whether to use css reset
preflight: true,
// Where to look for your css declarations
include: ["./app/routes/**/*.{ts,tsx,js,jsx}", "./app/components/**/*.{ts,tsx,js,jsx}"],
// Files to exclude
exclude: [],
// The output directory for your css system
outdir: "styled-system",
})
```
4. create `index.css` and import it
```css
@layer reset, base, tokens, recipes, utilities;
```
```tsx
// app/root.tsx
import "@total-typescript/ts-reset";
import styles from "./index.css"; // import the style
export const links: LinksFunction = () =>
[
cssBundleHref ? { rel: "stylesheet", href: cssBundleHref } : undefined,
{ rel: "stylesheet", href: styles }, // add the style here
].filter(Boolean);
```
5. update `remix.config.js`. You are ready to go ! 🎉
```diff
/** @type {import('@remix-run/dev').AppConfig} */
module.exports = {
ignoredRouteFiles: ["**/.*"],
// appDirectory: "app",
// assetsBuildDirectory: "public/build",
// serverBuildPath: "build/index.js",
// publicPath: "/build/",
serverModuleFormat: "cjs",
future: {
v2_errorBoundary: true,
v2_meta: true,
v2_normalizeFormMethod: true,
v2_routeConvention: true,
},
+ postcss: true,
};
```
```tsx
// app/route/_index.tsx
import type { V2_MetaFunction } from "@remix-run/node";
import { css } from "styled-system/css";
export const meta: V2_MetaFunction = () => {
return [
{ title: "New Remix App" },
{ name: "description", content: "Welcome to Remix!" },
];
};
export default function Index() {
return (
<div className={css({ fontSize: "2xl", fontWeight: 'bold' })}>Hello 🐼!</div>
);
}
```