{"id":17787353,"url":"https://github.com/simon-he95/transformtotailwindcss","last_synced_at":"2025-03-16T07:32:00.064Z","repository":{"id":167946092,"uuid":"642802683","full_name":"Simon-He95/transformToTailwindcss","owner":"Simon-He95","description":"online playground that transform css to tailwindcss","archived":false,"fork":false,"pushed_at":"2025-03-15T13:25:47.000Z","size":35896,"stargazers_count":9,"open_issues_count":11,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-15T14:25:50.896Z","etag":null,"topics":["tailwindcss","transform-to-tailwindcss"],"latest_commit_sha":null,"homepage":"https://to-tailwindcss.netlify.app/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","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":"license","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,"publiccode":null,"codemeta":null},"funding":{"github":"Simon-He95","custom":["https://github.com/Simon-He95/sponsor"]}},"created_at":"2023-05-19T11:32:47.000Z","updated_at":"2025-03-15T13:24:00.000Z","dependencies_parsed_at":"2023-07-05T03:32:18.140Z","dependency_job_id":"3f1b536e-cbcf-4382-9976-7eed52948fcf","html_url":"https://github.com/Simon-He95/transformToTailwindcss","commit_stats":{"total_commits":138,"total_committers":2,"mean_commits":69.0,"dds":0.09420289855072461,"last_synced_commit":"1f2db0aa82f23c62bf9c11f9b73b7c2bf21b5237"},"previous_names":["simon-he95/transformtotailwindcss"],"tags_count":27,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Simon-He95%2FtransformToTailwindcss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Simon-He95%2FtransformToTailwindcss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Simon-He95%2FtransformToTailwindcss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Simon-He95%2FtransformToTailwindcss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Simon-He95","download_url":"https://codeload.github.com/Simon-He95/transformToTailwindcss/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243744833,"owners_count":20341127,"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":["tailwindcss","transform-to-tailwindcss"],"created_at":"2024-10-27T10:10:17.643Z","updated_at":"2025-03-16T07:31:55.052Z","avatar_url":"https://github.com/Simon-He95.png","language":"Vue","readme":"\u003cp align=\"center\"\u003e\n\u003cimg height=\"200\" src=\"./assets/kv.png\" alt=\"to tailwindcss\"\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e English | \u003ca href=\"./README_zh.md\"\u003e简体中文\u003c/a\u003e\u003c/p\u003e\n\nThis library is to convert css to tailwindcss. [tailwindcss](https://tailwindcss.com/) can reuse styles better to reduce the packaging volume, which can be converted as a performance optimization method, and it can also make it easier for old projects to upgrade to tailwindcss. If you want to use [unocss](https://github.com/unocss/unocss), you can use [transformToUnocss](https://github.com/Simon-He95/transformToUnocss).\n\n## 📦 Install\n\n```\n  npm i -g transform-to-tailwindcss\n```\n\n## 🦄 cli\n\n```\n  ## command: totailwindcss + directory\n  totailwindcss playground\n\n  ## revoke: totailwindcss + directory + --revert\n  totailwindcss payground --revert\n```\n\n## 🌈 Usage\n\n\u003cdetails\u003e\n\u003csummary\u003eVite\u003c/summary\u003e\n\n```ts\n// vite.config.ts\nimport { vitePluginTransformTotailwindcss } from 'transform-to-tailwindcss'\nexport default defineConfig({\n  plugins: [vitePluginTransformTotailwindcss(/* options */)],\n})\n```\n\n\u003c/details\u003e\n\u003cbr\u003e\n\u003cdetails\u003e\n\u003csummary\u003eRollup\u003c/summary\u003e\n\n```ts\n// rollup.config.js\nimport { resolve } from 'node:path'\nimport { rollupTransformTotailwindcss } from 'transform-to-tailwindcss'\nexport default {\n  plugins: [rollupTransformTotailwindcss(/* options */)],\n}\n```\n\n\u003c/details\u003e\n\u003cbr\u003e\n\u003cdetails\u003e\n\u003csummary\u003eWebpack\u003c/summary\u003e\n\n```ts\n// webpack.config.js\nmodule.exports = {\n  /* ... */\n  plugins: [\n    require('transform-to-tailwindcss').webpackTransformTotailwindcss({\n      /* options */\n    }),\n  ],\n}\n```\n\n\u003c/details\u003e\n\u003cbr\u003e\n\u003cdetails\u003e\n\u003csummary\u003eVue CLI\u003c/summary\u003e\n\n```ts\n// vue.config.js\nmodule.exports = {\n  configureWebpack: {\n    plugins: [\n      require('transform-to-tailwindcss').webpackTransformTotailwindcss({\n        /* options */\n      }),\n    ],\n  },\n}\n```\n\n\u003c/details\u003e\n\u003cbr\u003e\n\u003cdetails\u003e\n\u003csummary\u003eEsbuild\u003c/summary\u003e\n\n```ts\n// esbuild.config.js\nimport { build } from 'esbuild'\nimport { esbuildTransformTotailwindcss } from 'transform-to-tailwindcss'\n\nbuild({\n  plugins: [esbuildTransformTotailwindcss(/* options */)],\n})\n```\n\n\u003c/details\u003e\n\n## ⭐ Feature\n\n- support css in '.html' | '.tsx' | '.vue' | '.astro' | '.svelte' to tailwindcss\n- support sass less stylus convert\n- support vite | rollup | webpack | vue-cli | esbuild\n- vscode extension [To tailwindcss](https://github.com/Simon-He95/totailwindcss)\n\n## 🚁 More\n\n- [transform-to-tailwindcss-core](https://github.com/Simon-He95/transform-to-tailwindcss-core) - Provides the ability to convert css to tailwindcss on the browser side\n\n## Before\n\n![before](/assets/before.png)\n\n## After\n\n![after](/assets/after.png)\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","funding_links":["https://github.com/sponsors/Simon-He95","https://github.com/Simon-He95/sponsor"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimon-he95%2Ftransformtotailwindcss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsimon-he95%2Ftransformtotailwindcss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimon-he95%2Ftransformtotailwindcss/lists"}