Installation

Using Panda CSS with Redwood

Setting up Panda CSS in a Redwood project using PostCSS.

💡

Redwood uses yarn as its primary package manager.

Start a new project

Create Redwood project

To get started, we will need to create a new Redwood project using typescript template.

yarn create redwood-app app

Respond to the prompts as follows:

✔ Compatibility checks passed
✔ Select your preferred language · TypeScript
✔ Do you want to initialize a git repo? · no / Yes
✔ Enter a commit message · Initial commit
✔ Do you want to run yarn install? · no / Yes
✔ Project files created
✔ Initialized a git repo with commit message "Initial commit"
✔ Installed node modules
✔ Generated types

Install Panda

Install panda and generate the panda.config.ts and postcss.config.js file.

cd web
yarn add -D @pandacss/dev postcss postcss-loader
yarn panda init --postcss

Move to config folder

Redwood uses a config folder for all of the configuration files. Move the panda.config.ts and postcss.config.js files to the config folder.

mv panda.config.ts postcss.config.js config/

Update configs

Update the postcss config file to use the panda.config.ts file.

web/config/postcss.config.js

+ const path = require('path')
 
module.exports = {
  plugins: {
    "@pandacss/dev/postcss": {
+      configPath: path.resolve(__dirname, 'panda.config.ts'),
   },
  },
}

Update the tsconfig file to include the styled-system folder.

web/tsconfig.json

{
   // ...
  "compilerOptions": {
    "paths": {
      // ...
      "styled-system/*": ["./styled-system/*"]
    }
  }
}

Update package.json scripts

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

web/package.json

{
  "scripts": {
+    "prepare": "panda codegen"
  }
}

"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 Redwood components are included in the include section of the panda.config.ts file.

web/config/panda.config.ts

import { defineConfig } from '@pandacss/dev'
 
export default defineConfig({
  preflight: true,
  include: ['./src/**/*.{js,jsx,ts,tsx}'],
  exclude: [],
  outdir: 'styled-system'
})

Configure the entry CSS with layers

Add this code to an src/style/index.css file imported in the root component of your project.

web/src/index.css

@layer reset, base, tokens, recipes, utilities;

Start your build process

Run the following command to start your development server.

yarn rw dev

Start using Panda

Now you can start using Panda CSS in your project.

web/src/pages/HomePage/HomePage.tsx

import { css } from 'styled-system/css'
import { stack } from 'styled-system/patterns'
import { Link, routes } from '@redwoodjs/router'
import { MetaTags } from '@redwoodjs/web'
 
const HomePage = () => {
  return (
    <>
      <MetaTags title="Home" description="Home page" />
 
      <div
        className={stack({
          bg: { base: 'red.300', _hover: 'red.500' },
          py: '12',
          px: '8'
        })}
      >
        <h1 className={css({ fontSize: '4xl', fontWeight: 'bold' })}>
          HomePage
        </h1>
        <p>Hello World</p>
      </div>
    </>
  )
}
 
export default HomePage

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:

web/tsconfig.json

{
  // ...
  "include":  ["src", "styled-system"]
}

Ember Qwik