Installation
Using Panda CSS with Remix
Setting up Panda CSS in a Remix project using PostCSS.
Start a new project
Create Remix project
To get started, we will need to create a new Remix project using the official Create Remix (opens in a new tab) CLI. In this guide, we will use TypeScript.
If you don't enter any parameter, the CLI will guide you through the process of creating a new Remix app.
You will be asked a few questions, answer these as follows:
? Where should we create your new project? test-app
? Install dependencies? No
Note: You should decline the dependency installation step as we will install dependencies together with Panda CSS.
Install Panda
Install panda and create your panda.config.ts
file.
Update package.json scripts
Open your package.json
file and update the scripts
section as follows:
{
"scripts": {
+ "prepare": "panda codegen",
"build": "remix build",
"dev": "remix dev",
"start": "remix-serve build",
"typecheck": "tsc"
}
}
"prepare"
- script that will run Panda CSS CLI codegen before each build. Read more about codegen in the CLI section.
This step ensures that the panda output directory is regenerated after each dependency installation.
So you can add the Panda CSS output directory to your .gitignore
file and not worry about it.
Configure the content
Make sure that all of the paths of your Remix components are included in the include
section of
the panda.config.ts
file.
import { defineConfig } from "@pandacss/dev"
export default defineConfig({
// 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",
})
Configure the entry CSS with layers
Create a new file app/index.css
and add the following content:
@layer reset, base, tokens, recipes, utilities;
Import the index.css
file in your app/root.tsx
file and add the styles
variable to the links
function.
Please note the ?url
query parameter in the import
statement. This is required by Vite to generate the correct path
to the CSS file.
import type { LinksFunction } from "@remix-run/node";
import {
Links,
LiveReload,
Meta,
Outlet,
Scripts,
ScrollRestoration,
} from "@remix-run/react";
import styles from "./index.css?url"
export const links: LinksFunction = () => [
{ rel: "stylesheet", href: styles },
];
export default function App() {
return (
<html lang="en">
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<Meta />
<Links />
</head>
<body>
<Outlet />
<ScrollRestoration />
<Scripts />
<LiveReload />
</body>
</html>
);
}
Start your build process
Run the following command to start your development server.
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 app/routes/_index.tsx
file.
import type { MetaFunction } from "@remix-run/node";
import { css } from "styled-system/css";
export const meta: 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>
);
}
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:
{
// ...
"include": ["src", "styled-system"]
}
If your app doesn't reload when making changes to the panda.config.ts
file, consider
adding watchPaths
in your remix config file.
export default {
// ...
watchPaths: ["panda.config.ts"],
};