Installation

Using Panda CSS with Ember

Setting up Panda CSS in a Ember project using PostCSS.

Start a new project

Create Ember project

To get started, we will need to create a new Ember project using the embroider build system. We will name our project test-app but you can name it whatever you want.

pnpm dlx ember-cli@latest new test-app --embroider --no-welcome --typescript --pnpm

Enter the newly created directory:

cd test-app

Install Panda

Install panda and its peer dependencies, as well as postcss-loader. Run the init command to generate the panda.config.ts and postcss.config.js file.

pnpm install -D @pandacss/dev postcss postcss-loader
pnpm panda init --postcss

Enable PostCSS support

In your ember-cli-build.js file, configure PostCSS to process your CSS files.

ember-cli-build.js
'use strict';
 
const EmberApp = require('ember-cli/lib/broccoli/ember-app');
 
module.exports = function (defaults) {
  const app = new EmberApp(defaults, {
    // Add options here
  });
 
  const { Webpack } = require('@embroider/webpack');
  return require('@embroider/compat').compatBuild(app, Webpack, {
    packagerOptions: {
      webpackConfig: {
        module: {
          rules: [
            {
              test: /\.css$/i,
              use: ['postcss-loader'],
            },
          ],
        },
      },
    },
    // other options...
  });
};

Configure the PostCSS plugin

Add the .embroider folder to the allow list so the Panda PostCSS plugin picks up your app CSS files.

postcss.config.cjs
module.exports = {
  plugins: {
    '@pandacss/dev/postcss': {
      allow: [/node_modules\/.embroider/]
    }
  }
}

Update package.json scripts

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

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 Ember components are included in the include section of the panda.config.ts file. Set the outdir to the app folder so the code can be imported in your Ember app. Adjust the importMap accordingly to reflect your app name.

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: ["./app/**/*.{js,ts,gjs,gts}"],
 
  // Files to exclude
  exclude: [],
 
  // Useful for theme customization
  theme: {
    extend: {},
  },
 
  // The output directory for your css system
  outdir: "app/styled-system",
 
  // Configure the import map to use your project name
  importMap: "test-app/styled-system",
});

Configure the entry CSS with layers

Add this code to an app/index.css file.

app/index.css
@layer reset, base, tokens, recipes, utilities;

Next, import the file in your app/app.ts file.

app/app.ts
import Application from '@ember/application';
import Resolver from 'ember-resolver';
import loadInitializers from 'ember-load-initializers';
import config from 'test-app/config/environment';
import 'test-app/index.css';
 
export default class App extends Application {
  modulePrefix = config.modulePrefix;
  podModulePrefix = config.podModulePrefix;
  Resolver = Resolver;
}
 
loadInitializers(App, config.modulePrefix);

Start your build process

Run the following command to start your development server.

pnpm start

Start using Panda

Now you can start using Panda CSS in your project.

app/components/hello-panda.ts
import Component from '@glimmer/component';
import { css } from 'test-app/styled-system/css';
 
export default class HelloPanda extends Component {
  style = css({ fontSize: '5xl', fontWeight: 'bold' });
}
app/components/hello-panda.hbs
<div class={{this.style}}>Hello 🐼!</div>
app/templates/application.hbs
{{page-title "TestApp"}}
 
<h2 id="title">Welcome to Ember</h2>
 
<HelloPanda />
 
{{outlet}}
💡

For the best developer experience, set up template tag component authoring format (opens in a new tab) in Ember.

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":  ["app/styled-system"]
}
GatsbyRedwood