base on The instant on-demand atomic CSS engine. <br> <p align="center"> <img src="https://raw.githubusercontent.com/unocss/unocss/main/playground/public/icon-gray.svg" style="width:100px;" /> </p> <h1 align="center">UnoCSS</h1> <p align="center"> The instant on-demand Atomic CSS engine. </p> <p align="center"> <a href="https://www.npmjs.com/package/unocss"><img src="https://img.shields.io/npm/v/unocss?color=c95f8b&amp;label=" alt="NPM version"></a></p> <blockquote align="center"> <p>💡 I highly recommend reading this blog post - <br><a href="https://antfu.me/posts/reimagine-atomic-css"><strong>Reimagine Atomic CSS</strong></a><br>for the story behind</p> </blockquote> <br> <p align="center"> <a href="https://unocss.dev/">📚 Documentation</a> | <a href="https://unocss.dev/interactive/">🧑‍💻 Interactive Docs</a> | <a href="https://unocss.dev/play/">🤹‍♂️ Playground</a> | <a href="https://tutorial.unocss.dev/">🎓 Tutorial</a> </p> <br> ## Features Inspired by [Windi CSS](http://windicss.org/), [Tailwind CSS](https://tailwindcss.com/), and [Twind](https://github.com/tw-in-js/twind), but: - [Fully customizable](https://unocss.dev/config/) - no core utilities. All functionalities are provided via presets. - No parsing, no AST, no scanning, it's **INSTANT** (5x faster than Windi CSS or Tailwind JIT). - ~6kb min+brotli - zero deps and browser friendly. - [Shortcuts](https://unocss.dev/config/shortcuts) - aliasing utilities, dynamically. - [Attributify mode](https://unocss.dev/presets/attributify/) - group utilities in attributes. - [Pure CSS Icons](https://unocss.dev/presets/icons/) - use any icon as a single class. - [Variant Groups](https://unocss.dev/transformers/variant-group) - shorthand for group utils with common prefixes. - [CSS Directives](https://unocss.dev/transformers/directives) - reuse utils in CSS with `@apply` directive. - [Compilation mode](https://unocss.dev/transformers/compile-class/) - synthesizes multiple classes into one at build time. - [Inspector](https://unocss.dev/tools/inspector) - inspect and debug interactively. - [CSS-in-JS Runtime build](https://unocss.dev/integrations/runtime) - use UnoCSS with one line of CDN import. - [VS Code extension](https://marketplace.visualstudio.com/items?itemName=antfu.unocss) - Code-splitting for CSS - ships minimal CSS for MPA. ## Documentation Read the [documentation](https://unocss.dev/) for more details. ## Installation - [Vite](https://unocss.dev/integrations/vite) - [Nuxt](https://unocss.dev/integrations/nuxt) - [Astro](https://unocss.dev/integrations/astro) - [Webpack](https://unocss.dev/integrations/webpack) - [CDN Runtime](https://unocss.dev/integrations/runtime) - [CLI](https://unocss.dev/integrations/cli) - [VS Code extension](https://unocss.dev/integrations/vscode) - [ESLint Config](https://unocss.dev/integrations/eslint) - [PostCSS](https://unocss.dev/integrations/postcss) ## Acknowledgement UnoCSS is made possible thanks to the inspirations from the following projects: > in alphabetical order - [ACSS](https://acss.io/) - [Bootstrap Utilities](https://getbootstrap.com/docs/5.1/utilities/flex/) - [Chakra UI Style Props](https://chakra-ui.com/docs/features/style-props) - [Semantic UI](https://semantic-ui.com/) - [Tachyons](https://tachyons.io/) - [Tailwind CSS](https://tailwindcss.com/) - [Twind](https://github.com/tw-in-js/twind) - [Windi CSS](http://windicss.org/) ## Sponsors <p align="center"> <a href="https://cdn.jsdelivr.net/gh/antfu/static/sponsors.svg"> <img src='https://cdn.jsdelivr.net/gh/antfu/static/sponsors.svg'/> </a> </p> ## License [MIT](./LICENSE) License &copy; 2021-PRESENT [Anthony Fu](https://github.com/antfu) ", Assign "at most 3 tags" to the expected json: {"id":"2409","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"