![\"UnoT\"](\"./assets/kv.png\")
\n\n \n
English | 简体中文
\n\nUnoT is short for unocss tools, to provide a better development experience using unocss in vscode. It integrated [tounocss](https://github.com/Simon-He95/tounocss)、 [vscode uno magic](https://github.com/Simon-He95/vscode-uno-magic)\n\n\n\n## 🦸🏻 Ability\n\n- Provides hover style prompt css code corresponding to UnoCss\n- Turn on uno-magic to provide the ability to automatically process spaces and brackets\n- Provides shortcut keys to automatically convert the style copied by the browser to UnoCss\n- Right-click provides a website to quickly open UnoCss documents and Unot online edited conversion results\n\n## 💡 Open uno-magic\n- text-\\[red,hover:pink,2xl,lg:hover:3xl\\] -> text-red hover:text-pink text-2xl lg:hover:text-3xl\n- class or className content like `w-calc(100% - 20px)` -> `w-[calc(100%-20px)]` [🔎detail](https://github.com/Simon-He95/vscode-uno-magic)\n- Provides code selection for unocss syntax [🔎detail](https://github.com/Simon-He95/vscode-uno-magic)\n- Provide the unocss hover to display the css code [🔎detail](https://github.com/Simon-He95/unocss-to-css)\n- bg#fff -> bg-#fff\n- maxw-100% -> max-w-[100%]\n- bg-[rgba(255, 255, 255, 0.5)] -> bg-[rgba(255,255,255,0.5)]\n- translatex--50% -> translate-x-[-50%]\n- hover:(text-red bg-blue) -> hover:text-red hover:bg-blue\n- !(text-red bg-blue) -> !text-red !bg-blue\n- h=\"[calc(100% - 20px)]\" -> h=\"[calc(100%-20px)]\"\n\n## Powered by\n- [transformToUnoCSS](https://github.com/Simon-He95/transformToUnoCSS)\n- [transform-to-tailwindcss-core](https://github.com/Simon-He95/transform-to-tailwindcss-core)\n\n## Feature\nSupport css in the design draft directly through the shortcut key `Mac`? `cmd+alt+v` : `ctrl+alt+v` is automatically converted to unocss, and will be automatically processed into in-line unocss format or class form according to your location.\n\n## Configuration\n- You can use config to control some matching rules, such as strict-splicing, or the generated calculation result is `-[10px]` or `-10px`\n\n``` json\n{\n \"unot.classMode\": {\n \"type\": \"boolean\",\n \"default\": true,\n \"description\": \"Enable/disable class mode\"\n },\n \"unot.variantGroup\": {\n \"type\": \"boolean\",\n \"default\": true,\n \"description\": \"Enable/disable transform hover:(x1 x2) to hover:x1 hover:x2\"\n },\n \"unot.strictVariable\": {\n \"type\": \"boolean\",\n \"default\": true,\n \"description\": \"if true w10px or w-10px will transform w-[10px]\"\n },\n \"unot.strictHyphen\": {\n \"type\": \"boolean\",\n \"default\": false,\n \"description\": \"if true bg#fff or bgrgba(0,0,0,.0) will transform bg-[#fff] or bg-[rgba(0,0,0,.0)]\"\n },\n \"unot.switchMagic\": {\n \"type\": \"boolean\",\n \"default\": true,\n \"description\": \"switch magic\"\n },\n \"unot.useHex\": {\n \"type\": \"boolean\",\n \"default\": false,\n \"description\": \"use hex color transform #fff to hex-fff\"\n },\n \"unot.presets\": {\n \"type\": \"array\",\n \"default\": [],\n \"description\": \"unocss transform presets\"\n },\n \"unot.dark\": {\n \"type\": \"object\",\n \"default\": {},\n \"description\": \"unocss dark theme style\"\n },\n \"unot.light\": {\n \"type\": \"object\",\n \"default\": {},\n \"description\": \"unocss light theme style\"\n }\n}\n```\n\n## :coffee:\n\n[buy me a cup of coffee](https://github.com/Simon-He95/sponsor)\n\n## License\n\n[MIT](./license)\n","readmeFilename":"README.md"}