Installation

Using Panda CSS with Svelte

Setting up Panda CSS in a Svelte project using PostCSS.

Start a new project

Create Svelte project

To get started, we will need to create a new Svelte project.

pnpm create svelte@latest test-app

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

┌  Welcome to SvelteKit!
│
◇  Which Svelte app template?
│  Skeleton project
│
◇  Add type checking with TypeScript?
│  Yes, using TypeScript syntax
│
◇  Select additional options (use arrow keys/space bar)
│  ◼ Add ESLint for code linting
│  ◼ Add Prettier for code formatting
│  ◻ Add Playwright for browser testing
│  ◻ Add Vitest for unit testing
│
└  Your project is ready!

Enter the newly created directory and install the dependencies.

cd test-app
pnpm install

Install Panda

To install Panda and corresponding dependencies run the following commands:

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

Update package.json scripts

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

package.json
{
  "scripts": {
+    "prepare": "panda codegen",
    "dev": "vite dev",
		"build": "vite build",
		"preview": "vite preview",
		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
		"lint": "prettier --plugin-search-dir . --check . && eslint .",
		"format": "prettier --plugin-search-dir . --write ."
  }
}

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

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: ['./src/**/*.{js,ts,svelte}'],
 
 // Files to exclude
 exclude: [],
 
 // The output directory for your css system
 outdir: "styled-system",
})

Update Svelte config

To configure Svelte preprocess to use PostCSS and add Panda alias update the svelte.config.js file as follows:

svelte.config.js
import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
/** @type {import('@sveltejs/kit').Config} */
const config = {
	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
	// for more information about preprocessors
	preprocess: [
		vitePreprocess()
	],
 
	kit: {
		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
		// If your environment is not supported or you settled on a specific environment, switch out the adapter.
		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
		adapter: adapter(),
		alias: {
			'styled-system': './styled-system/*'
		}
	}
};
 
export default config;

Update Vite config

To be able to import styled-system files in your Svelte components you will need to update the vite.config.js file as follows:

vite.config.js
import { sveltekit } from '@sveltejs/kit/vite'
import { defineConfig } from 'vite'
 
export default defineConfig({
  plugins: [sveltekit()],
  server: {
    fs: {
      allow: ['styled-system'],
    },
  },
})

Configure the entry CSS with layers

Create the app.css file in the src directory and add the following content:

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

Import styles in the layout file

Create the src/routes/+layout.svelte file and add the following content:

src/routes/+layout.svelte
<script>
  import '../app.css'
</script>
 
<slot />

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 src/routes/+page.svelte file.

src/routes/+page.svelte
<script>
	import { css } from 'styled-system/css';
</script>
 
<div
	class={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 TypeScript config. However, in Svelte your main tsconfig.json file is extending the autogenerated one. To extend it without overriding the defaults adjust your svelte.config.js to include following entry:

svelte.config.js
import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
/** @type {import('@sveltejs/kit').Config} */
const config = {
  // ...
  kit: {
    // ...
     typescript: {
      config: (config) => {
        config.include.push("../styled-system");
        return config;
      },
    }
  }
};
 
export default config;
Solid.jsStorybook