{"id":17787388,"url":"https://github.com/simon-he95/vscode-tailwind-magic","last_synced_at":"2025-05-07T15:45:28.594Z","repository":{"id":217437050,"uuid":"736905722","full_name":"Simon-He95/vscode-tailwind-magic","owner":"Simon-He95","description":"A magic plug-in that brings convenience to the use of TailwindCss ｜ 给 TailwindCss 在使用上带来便利的魔法插件","archived":false,"fork":false,"pushed_at":"2024-10-10T15:44:05.000Z","size":13807,"stargazers_count":41,"open_issues_count":1,"forks_count":3,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-11-24T20:49:37.310Z","etag":null,"topics":["css","tailwind-magic","tailwindcss","vscode","vscode-extension"],"latest_commit_sha":null,"homepage":"https://marketplace.visualstudio.com/items?itemName=simonhe.vscode-tailwind-magic","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Simon-He95.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null},"funding":{"github":"Simon-He95","custom":["https://github.com/Simon-He95/sponsor"]}},"created_at":"2023-12-29T08:06:41.000Z","updated_at":"2024-11-22T11:01:08.000Z","dependencies_parsed_at":"2024-03-20T06:27:17.618Z","dependency_job_id":"f34549b1-374c-42ed-be01-869ceb10a397","html_url":"https://github.com/Simon-He95/vscode-tailwind-magic","commit_stats":null,"previous_names":["simon-he95/vscode-tailwind-magic"],"tags_count":64,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Simon-He95%2Fvscode-tailwind-magic","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Simon-He95%2Fvscode-tailwind-magic/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Simon-He95%2Fvscode-tailwind-magic/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Simon-He95%2Fvscode-tailwind-magic/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Simon-He95","download_url":"https://codeload.github.com/Simon-He95/vscode-tailwind-magic/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":231449692,"owners_count":18378431,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","tailwind-magic","tailwindcss","vscode","vscode-extension"],"created_at":"2024-10-27T10:10:28.794Z","updated_at":"2025-05-07T15:45:28.582Z","avatar_url":"https://github.com/Simon-He95.png","language":"TypeScript","funding_links":["https://github.com/sponsors/Simon-He95","https://github.com/Simon-He95/sponsor"],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n\u003cimg height=\"200\" src=\"./assets/kv.png\" alt=\"magic\"\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e English | \u003ca href=\"./README_zh.md\"\u003e简体中文\u003c/a\u003e\u003c/p\u003e\n\n🌈 This vscode plug-in is to solve the inconvenience of the syntax of tailwindcss. It can bring you the ultimate development experience and development efficiency. If you use UnoCss, you can choose [Unot](https://github.com/Simon-He95/unot).\n\nIn addition, if the third-party style you introduce is similar to tailwind syntax and there is a conflict, you may need to modify your current project to add `prefix`, and this plugin can detect whether `prefix` is added and automatically add it when saving.\n\nCurrently, this plugin has a [paid plan](#-charge-plan). If you haven’t tried it yet, you can find me on [discord](https://discord.com/invite/ZnjxzMKWNW) and get a one-month free trial.\n[❓ Why is Tailwind Magic recommended](https://simonhe.me/posts/vscode-tailwind-magic)\n\n## 🎉 Advantages\n- You are not limited to using tailwindcss syntax in class or className, you can use it anywhere\n- Extremely free mapping and abbreviation, but it will be converted back to tailwind syntax to ensure that the final code is in line with tailwindcss syntax and can be semantic\n- It can automatically bring out the attributes that should be included, such as col -\u003e flex flex-col, border#eee -\u003e border-[#eee] border border-1, etc.\n- It can use all the simple syntax of UnoCss, even simpler, such as `bg#fff` -\u003e `bg-[#fff]`, and can also use `hover:(text-red bg-blue)` -\u003e `hover:text-red hover:bg-blue` and other syntax\n\n## 〽️ Suggestions\n\n- Use the latest version of vscode\n- If there is an abnormality after the automatic update, you can uninstall and reinstall it.\n- It is recommended to use it with [`totailwindcss`](https://github.com/Simon-He95/vscode-toTailwindcss), which can use the browser After copying the style, it directly outputs the syntax of tailwindcss to the corresponding position of the plug-in, and can hover the native css prompt the corresponding syntax of tailwindcss.\n\n![demo](assets/demo.gif)\n\n## 💰 Charge plan\n\n- [Sponsor](https://github.com/Simon-He95/sponsor) me by wechat or alipay, and I will give you more permissions and time to use your GitHub account\n- For users who haven't experienced it yet, you can find me on [discord](https://discord.com/invite/ZnjxzMKWNW) to get a one-month free experience qualification.\n- Current plan 15Yuan/month, 150Yuan/year\n- Any `bug` or `suggestion` on the plugin can be communicated on `discord`, or add me wx: `simon_he95`, pull you into the wx group\n\n## 💪 Current processing type\n- calc\n- rgb[a]\n- px|rem|em|%|vw|vh\n- simple preset\n- w|h|gap|m|mt|mr|mb|ml|p|pt|pr|pb|pl|b|bt|br|bb|bl|lh|top|right|bottom|left\n- w1! -\u003e !w-1\n- maxw10px -\u003e max-w-[10px]\n- gapx10px -\u003e gap-x-[10px]\n- translatex50% -\u003e translate-x-[50%]\n- -translatex50% -\u003e -translate-x-[50%]\n- text-\\[red,hover:pink,2xl,lg:hover:3xl\\] -\u003e text-red hover:text-pink text-2xl lg:hover:text-3xl\n- flex-center -\u003e flex justify-center items-center\n- col -\u003e flex flex-col\n- eclipse -\u003e text-ellipsis whitespace-nowrap overflow-hidden\n- pointer -\u003e cursor-pointer\n- ma -\u003e m-auto\n- text10rpx -\u003e text-\\[length:10rpx\\]\n- hover:(text-red bg-blue) -\u003e hover:text-red hover:bg-blue\n- \\\u003e500px:w10px -\u003e max-[500px]:w-[10px]\n- \u003c500px:(w10px h20px) -\u003e min-[500px]:w-[10px] min-[500px]:h-[20px]\n- whfull -\u003e w-full h-full\n- url(./a.png) -\u003e bg-[url(./a.png)]\n\n## When you enable `aggressiveMode`, you can get the following conversion\n```json\n{\n  \"tc\": \"text-center\",\n  \"ts\": \"text-start\",\n  \"te\": \"text-end\",\n  \"tr\": \"text-right\",\n  \"tl\": \"text-left\",\n  \"tj\": \"text-justify\",\n  \"tw\": \"text-wrap\",\n  \"fs\": \"flex-start\",\n  \"fe\": \"flex-end\",\n  \"fb\": \"flex-between\",\n  \"fev\": \"flex-evenly\",\n  \"fa\": \"flex-around\",\n  \"xs\": \"x-start\",\n  \"xe\": \"x-end\",\n  \"ys\": \"y-start\",\n  \"ye\": \"y-end\",\n  \"xc\": \"x-center\",\n  \"yc\": \"y-center\"\n}\n```\n\n## When you enable `attributifyMode`\n- You no longer need to use `-` to splice, you can write `bg#fff` directly on the attribute, and it will be automatically converted to `bg-[#fff]` after saving - You no longer need to use `-` to splice, you You can write `bg#fff` directly on the attribute, and it will be automatically converted to `bg-[#fff]` after saving.\n\n## When you enable `strictMode`\n- You must use `-` to splice\n\n## When you enable `variantGroup`\n- You can convert `hover:(text-red bg-blue)` to `hover:text-red hover:bg-blue`\n\n## nitty gritty\n- flex-center -\u003e flex justify-center items-center\n- col -\u003e flex flex-col\n- pointer -\u003e cursor-pointer\n- pointer-none -\u003e cursor-none\n- `\u003e500px` -\u003e `max-[500px]`\n- `\u003c500px` -\u003e `min-[500px]`\n- Use x-center or y-center based on row or col\n- gridx4y4 -\u003e grid-cols-4 grid-rows-4\n- bb#eee -\u003e border-b-[#eee] border-b border\n- f400 -\u003e font-400, f10px -\u003e text-[10px]\n\n## Custom injection rules `presets`\n\n`tailwindMagic.presets` supports custom injection rules. You can set the conversion rules you want as follows.\n\n```\n\n[\n  [\"Tnw\", \"text-no-wrap\"]\n]\n\n```\n\n## Notes\n- tailwind-magic will convert the properties of custom components, such as `block` in some `el-button`, you can skip these conversions through `skipMappings`, the rules are as follows:\n\n```json\n{\n  \"tailwindMagic.skipMappings\": {\n    \"el-form\": [\n      \"inline\"\n    ],\n    \"Form\": [\n      \"inline\"\n    ],\n    \"el-table\": [\n      \"border\"\n    ],\n    \"Table\": [\n      \"border\"\n    ],\n    \"van-button\": [\n      \"block\"\n    ]\n  }\n}\n```\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- attributifyMode defaults true, turn on the ability to automatically convert tailwind attributes into class, just like the writing of attributify of unuchs, which automatically converts after saving.\n\n``` json\n{\n  \"properties\": {\n    \"tailwindMagic.variantGroup\": {\n      \"type\": \"boolean\",\n      \"default\": true,\n      \"description\": \"Enable/disable transform hover:(x1 x2) to hover:x1 hover:x2\"\n    },\n    \"tailwindMagic.strictMode\": {\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    \"tailwindMagic.attributifyMode\": {\n      \"type\": \"boolean\",\n      \"default\": true,\n      \"description\": \"if true the attribute bg#fff will transform class=\\\"bg-[#fff]\\\"\"\n    },\n    \"tailwindMagic.presets\": {\n      \"type\": \"array\",\n      \"default\": [],\n      \"description\": \"set transform rules\"\n    },\n    \"tailwindMagic.code\": {\n      \"type\": \"boolean\",\n      \"default\": \"\",\n      \"description\": \"activation code\"\n    },\n    \"tailwindMagic.aggressiveMode\": {\n      \"type\": \"boolean\",\n      \"default\": false,\n      \"description\": \"After turning on aggressive mode, it will be more abbreviated, such as t1 -\u003e top-1\"\n    }\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","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimon-he95%2Fvscode-tailwind-magic","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsimon-he95%2Fvscode-tailwind-magic","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimon-he95%2Fvscode-tailwind-magic/lists"}