https://github.com/brendon1555/panda-preset-unique-utilities
The base preset utilities for Panda CSS but with unique classNames
https://github.com/brendon1555/panda-preset-unique-utilities
classname css hacktoberfest pandacss styling
Last synced: 4 months ago
JSON representation
The base preset utilities for Panda CSS but with unique classNames
- Host: GitHub
- URL: https://github.com/brendon1555/panda-preset-unique-utilities
- Owner: brendon1555
- License: mit
- Created: 2023-09-17T12:49:51.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2023-10-07T09:15:16.000Z (about 2 years ago)
- Last Synced: 2025-06-10T19:12:23.888Z (4 months ago)
- Topics: classname, css, hacktoberfest, pandacss, styling
- Language: TypeScript
- Homepage:
- Size: 40 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# :panda_face: PandaCSS preset with a unique className for every utility
Unique className for every utility in `@pandacss/preset-base`. Useful when using atomic styling and you want to avoid conflicts between utilities or setting up deduplication of classes based on properties.
This preset is required when using [@brendon1555/panda-cx-deduplicator](https://github.com/brendon1555/panda-cx-deduplicator)
## Installation
```bash
# npm
npm install -D @brendon1555/panda-preset-unique-utilities
# yarn
yarn add -D @brendon1555/panda-preset-unique-utilities
# pnpm
pnpm add -D @brendon1555/panda-preset-unique-utilities
```
## Usage
Add the preset to your PandaCSS configuration (`panda.config.ts`)
This example assumes you are not using `eject: true` in your PandaCSS configuration as we are extending the utilities included in `@pandacss/preset-base`
```ts
import { defineConfig } from "@pandacss/dev";
import uniqueUtilsPreset from "@brendon1555/panda-preset-unique-utilities";
export default defineConfig({
presets: [
uniqueUtilsPreset,
// Be sure to include the panda preset if you want
// to keep the defaults provided by PandaCSS.
// See: https://panda-css.com/docs/customization/presets
"@pandacss/preset-panda",
],
});
```