base on 🐼 Universal, Type-Safe, CSS-in-JS Framework for Product Teams ⚡️  <p align="center"> <br/> <a href="https://panda-css.com">Panda</a> is a universal styling solution for the modern web &mdash; <br/> build time, type safe, and scalable CSS-in-JS <br/><br/> <img alt="NPM Downloads" src="https://img.shields.io/npm/dm/%40pandacss%2Fdev"> <img alt="NPM Version" src="https://img.shields.io/npm/v/%40pandacss%2Fdev"> <img alt="X (formerly Twitter) Follow" src="https://img.shields.io/twitter/follow/panda__css"> <br/><br/> </p> ## Features - ⚡️ Write style objects or style props, extract them at build time - ✨ Modern CSS output — cascade layers `@layer`, css variables and more - 🦄 Works with most JavaScript frameworks - 🚀 Recipes and Variants - Just like Stitches™️ ✨ - 🎨 High-level design tokens support for simultaneous themes - 💪 Type-safe styles and autocomplete (via codegen) <br/> --- <p align="center"> <b> 🐼 Get a taste of Panda. Try it out for yourself in&nbsp; <a href="https://stackblitz.com/edit/vitejs-vite-lfwyue?file=src%2FApp.tsx&terminal=dev">StackBlitz</a> </b> </p> --- <br/> ## Documentation Visit our [official documentation](https://panda-css.com/). ## Install The **recommended** way to install the latest version of Panda is by running the command below: ```bash npm i -D @pandacss/dev ``` To scaffold the panda config and postcss ```bash npx panda init -p ``` Setup and import the entry CSS file ```css @layer reset, base, tokens, recipes, utilities; ``` ```jsx import 'path/to/entry.css' ``` Start the dev server of your project ```bash npm run dev ``` Start using panda ```jsx import { css } from '../styled-system/css' import { stack, vstack, hstack } from '../styled-system/patterns' function Example() { return ( <div> <div className={hstack({ gap: '30px', color: 'pink.300' })}>Box 1</div> <div className={css({ fontSize: 'lg', color: 'red.400' })}>Box 2</div> </div> ) } ``` ## Directory Structure | Package | Description | | --------------------------------------------- | ----------------------------------------------------------- | | [cli](packages/cli) | CLI package installed by the end user | | [core](packages/core) | Contains core features of Panda (utility, recipes, etc) | | [config](packages/config) | Contains functions for reading and merging the panda config | | [extractor](packages/extractor) | Contains code for fast AST parsing and scanning | | [generator](packages/generator) | Contains codegen artifacts (js, css, jsx) | | [parser](packages/parser) | Contains code for parsing a source code | | [is-valid-prop](packages/is-valid-prop) | Contains code for checking if a prop is a valid css prop | | [node](packages/node) | Contains the Node.js API of Panda's features | | [token-dictionary](packages/token-dictionary) | Contains code used to process tokens and semantic tokens | | [shared](packages/shared) | Contains shared TS functions | ## Contributing Feel like contributing? That's awesome! We have a [contributing guide](https://github.com/chakra-ui/panda/blob/main/CONTRIBUTING.md) to help guide you. ### Want to help improve the docs? Our docsite lives in the [monorepo](./website/pages/docs/). If you're interested in contributing to the documentation, check out the [contributing guide](https://github.com/chakra-ui/panda/blob/main/CONTRIBUTING.md). ## Support Having trouble? Get help in the official [Panda Discord](https://discord.gg/VQrkpsgSx7). ## Acknowledgement The development of Panda was only possible due to the inspiration and ideas from these amazing projects. - [Chakra UI](https://chakra-ui.com/) - where it all started - [Vanilla Extract](https://vanilla-extract.style/) - for inspiring the utilities API - [Stitches](https://stitches.dev/) - for inspiring the recipes and variants API - [Tailwind CSS](https://tailwindcss.com/) - for inspiring the JIT compiler and strategy - [Class Variance Authority](https://cva.style/) - for inspiring the `cva` name - [Styled System](https://styled-system.com/) - for the initial idea of Styled Props - [Linaria](https://linaria.dev/) - for inspiring the initial atomic css strategy - [Uno CSS](https://unocss.dev) - for inspiring the studio and astro integration - [Goober](https://goober.rocks/) - for tiny and performant js functions in template literal styles ## License MIT License © 2023-Present [Segun Adebayo](https://github.com/segunadebayo) ", Assign "at most 3 tags" to the expected json: {"id":"6383","tags":[]} "only from the tags list I provide: [{"id":77,"name":"3d"},{"id":89,"name":"agent"},{"id":17,"name":"ai"},{"id":54,"name":"algorithm"},{"id":24,"name":"api"},{"id":44,"name":"authentication"},{"id":3,"name":"aws"},{"id":27,"name":"backend"},{"id":60,"name":"benchmark"},{"id":72,"name":"best-practices"},{"id":39,"name":"bitcoin"},{"id":37,"name":"blockchain"},{"id":1,"name":"blog"},{"id":45,"name":"bundler"},{"id":58,"name":"cache"},{"id":21,"name":"chat"},{"id":49,"name":"cicd"},{"id":4,"name":"cli"},{"id":64,"name":"cloud-native"},{"id":48,"name":"cms"},{"id":61,"name":"compiler"},{"id":68,"name":"containerization"},{"id":92,"name":"crm"},{"id":34,"name":"data"},{"id":47,"name":"database"},{"id":8,"name":"declarative-gui "},{"id":9,"name":"deploy-tool"},{"id":53,"name":"desktop-app"},{"id":6,"name":"dev-exp-lib"},{"id":59,"name":"dev-tool"},{"id":13,"name":"ecommerce"},{"id":26,"name":"editor"},{"id":66,"name":"emulator"},{"id":62,"name":"filesystem"},{"id":80,"name":"finance"},{"id":15,"name":"firmware"},{"id":73,"name":"for-fun"},{"id":2,"name":"framework"},{"id":11,"name":"frontend"},{"id":22,"name":"game"},{"id":81,"name":"game-engine "},{"id":23,"name":"graphql"},{"id":84,"name":"gui"},{"id":91,"name":"http"},{"id":5,"name":"http-client"},{"id":51,"name":"iac"},{"id":30,"name":"ide"},{"id":78,"name":"iot"},{"id":40,"name":"json"},{"id":83,"name":"julian"},{"id":38,"name":"k8s"},{"id":31,"name":"language"},{"id":10,"name":"learning-resource"},{"id":33,"name":"lib"},{"id":41,"name":"linter"},{"id":28,"name":"lms"},{"id":16,"name":"logging"},{"id":76,"name":"low-code"},{"id":90,"name":"message-queue"},{"id":42,"name":"mobile-app"},{"id":18,"name":"monitoring"},{"id":36,"name":"networking"},{"id":7,"name":"node-version"},{"id":55,"name":"nosql"},{"id":57,"name":"observability"},{"id":46,"name":"orm"},{"id":52,"name":"os"},{"id":14,"name":"parser"},{"id":74,"name":"react"},{"id":82,"name":"real-time"},{"id":56,"name":"robot"},{"id":65,"name":"runtime"},{"id":32,"name":"sdk"},{"id":71,"name":"search"},{"id":63,"name":"secrets"},{"id":25,"name":"security"},{"id":85,"name":"server"},{"id":86,"name":"serverless"},{"id":70,"name":"storage"},{"id":75,"name":"system-design"},{"id":79,"name":"terminal"},{"id":29,"name":"testing"},{"id":12,"name":"ui"},{"id":50,"name":"ux"},{"id":88,"name":"video"},{"id":20,"name":"web-app"},{"id":35,"name":"web-server"},{"id":43,"name":"webassembly"},{"id":69,"name":"workflow"},{"id":87,"name":"yaml"}]" returns me the "expected json"