Installation
Using Panda CSS with Angular
Setting up Panda CSS in a Angular project using PostCSS.
Start a new project
Create Vite project
To get started, we will need to create a new Angular project using the official scaffolding tool (opens in a new tab).
If you don't enter any parameter, the CLI will guide you through the process of creating a new Angular app.
ng new test-app
You will be asked a few questions, answer them as follows:
? Which stylesheet format would you like to use? CSS
? Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)? No
Install Panda
Install panda and create your panda.config.ts
file.
Configure PostCSS
Create a postcss.config.json
file in the root of your project and add the following code:
{
"plugins": {
"@pandacss/dev/postcss": {}
}
}
You must use a JSON file for the PostCSS configuration, as the Angular CLI does not support JavaScript PostCSS configuration files.
Update package.json scripts
Open your package.json
file and update the scripts
section as follows:
{
"scripts": {
+ "prepare": "panda codegen",
"ng": "ng",
"start": "ng serve",
"build": "ng build",
}
}
"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 Angular 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: ['./src/**/*.{js,jsx,ts,tsx}'],
// Files to exclude
exclude: [],
// The output directory for your css system
outdir: "styled-system",
})
Configure the entry CSS with layers
Add this code to an src/index.css
file and import it in the root component of your project.
@layer reset, base, tokens, recipes, utilities;
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 src/app.component.ts
file.
import { Component } from '@angular/core';
import { css } from '../styled-system/css';
@Component({
selector: 'app-root',
standalone: true,
template: `
<div [class]="redBg"></div>
`,
})
export class App {
redBg = css({ bg: 'red.400' });
}