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.

If you don't enter any parameter, the CLI will guide you through the process of creating a new Remix app.

pnpm dlx create-remix@latest

You will be asked a few questions, answer them as follows:

? Where would you like to create your app? test-app
? What type of app do you want to create? Just the basics
? Where do you want to deploy? Choose Remix App Server if you're unsure; it's easy to change deployment targets. Remix App Server
? TypeScript or JavaScript? TypeScript
? Do you want me to run `npm install`? No
💡

Note: You should decline the npm install step as we will use a different package manager, i.e. type “n” for the last question.

Enter the newly created directory and install the dependencies.

cd test-app
pnpm install

Install Panda

Install panda and create your panda.config.ts file.

pnpm install -D @pandacss/dev
pnpm panda init --postcss --out-extension js

Update package.json scripts

Open your package.json file and update the scripts section as follows:

package.json
{
  "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 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.

panda.config.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",
})

Configure the entry CSS with layers

Create a new file app/index.css and add the following content:

app/index.css
@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.

app/root.tsx
import { cssBundleHref } from "@remix-run/css-bundle";
import type { LinksFunction } from "@remix-run/node";
import {
  Links,
  LiveReload,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration,
} from "@remix-run/react";
 
import styles from "./index.css"
 
export const links: LinksFunction = () => [
  ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
  { 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.

pnpm dev

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.

app/routes/_index.tsx
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:

tsconfig.json
{
  // ...
  "include":  ["src", "styled-system"]
}
Next.jsGatsby