{"id":21412838,"url":"https://github.com/hunghg255/css2tailwind","last_synced_at":"2026-03-06T02:07:33.480Z","repository":{"id":165486334,"uuid":"640832194","full_name":"hunghg255/css2tailwind","owner":"hunghg255","description":"Convert CSS to Tailwindcss","archived":false,"fork":false,"pushed_at":"2025-05-19T08:58:49.000Z","size":705,"stargazers_count":15,"open_issues_count":0,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-27T07:18:48.601Z","etag":null,"topics":["css","css2tailwindcss","npm","tailwindcss"],"latest_commit_sha":null,"homepage":"https://css2tailwind-docs.vercel.app","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/hunghg255.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"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,"publiccode":null,"codemeta":null}},"created_at":"2023-05-15T08:12:39.000Z","updated_at":"2025-05-22T10:48:51.000Z","dependencies_parsed_at":"2024-01-10T07:47:56.986Z","dependency_job_id":null,"html_url":"https://github.com/hunghg255/css2tailwind","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/hunghg255/css2tailwind","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hunghg255%2Fcss2tailwind","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hunghg255%2Fcss2tailwind/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hunghg255%2Fcss2tailwind/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hunghg255%2Fcss2tailwind/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hunghg255","download_url":"https://codeload.github.com/hunghg255/css2tailwind/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hunghg255%2Fcss2tailwind/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265233753,"owners_count":23731825,"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","css2tailwindcss","npm","tailwindcss"],"created_at":"2024-11-22T18:15:56.496Z","updated_at":"2026-03-06T02:07:28.446Z","avatar_url":"https://github.com/hunghg255.png","language":"TypeScript","funding_links":["https://www.buymeacoffee.com/hunghg255"],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n\u003ca href=\"https://www.npmjs.com/package/css2tailwind\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\n\u003cimg src=\"https://api.iconify.design/bx:bxl-tailwind-css.svg?color=%23fdb4e2\" alt=\"logo\" width='100'/\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  A library convert css to tailwindcss\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/css2tailwind\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\u003cimg src=\"https://badge.fury.io/js/csvs-parsers.svg\" alt=\"NPM Version\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/css2tailwind\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\u003cimg src=\"https://img.shields.io/npm/dt/csvs-parsers.svg?logo=npm\" alt=\"NPM Downloads\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://bundlephobia.com/result?p=css2tailwind\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\u003cimg src=\"https://img.shields.io/bundlephobia/minzip/css2tailwind\" alt=\"Minizip\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/hunghg255/css2tailwind/graphs/contributors\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\u003cimg src=\"https://img.shields.io/badge/all_contributors-1-orange.svg\" alt=\"Contributors\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/hunghg255/css2tailwind/blob/main/LICENSE\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\u003cimg src=\"https://badgen.net/github/license/hunghg255/css2tailwind\" alt=\"License\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n## Playground\n[Playground](https://css2tailwind.vercel.app/css-to-tailwind)\n\n\n## Extension for vscode\n[css-2-tailwindcss](https://marketplace.visualstudio.com/items?itemName=hunghg255.css-2-tailwindcss\u0026ssr=false#overview)\n\n## Install\n\n```bash\nnpm i css2tailwind@latest --save-dev\n```\n\nWith `yarn`\n\n```bash\nyarn add css2tailwind@latest -D\n```\n\n## Configuration\n```md\nCssToTailwind: : (code: string, config?: TranslatorConfig)\n```\n\n### `TranslatorConfig`\n\n|       Attribute       |                                    Description                                     |            Type             |\n| :-------------------: | :--------------------------------------------------------------------------------: | :-------------------------: |\n|       `prefix`        | [tailwind configuration prefix](https://tailwindcss.com/docs/configuration#prefix) |           string            |\n| `useAllDefaultValues` |                Use tailwind all default values(The default is true)                |           boolean           |\n|     `customTheme`     |                    Custom conversion of preset property values                     | [CustomTheme](#customtheme) |\n\n\n## Basic use\n\n```js\nimport { CssToTailwind } from \"css2tailwind\";\n\nconst cssCode = `body {\n  width: 100%;\n  height: 50%;\n  margin: 0 !important;\n  background-color: transparent;\n}`;\n\nconst conversionResult = CssToTailwind(cssCode);\n\nconsole.log(conversionResult);\n// {\n//   code: 'OK',\n//   data: [\n//     {\n//       selectorName: 'body',\n//       resultVal: 'w-full h-1/2 !m-0 bg-transparent'\n//     }\n//   ]\n// }\n```\n\n## `CustomTheme`\n\n```typescript\nexport interface CustomTheme\n  extends Record\u003cstring, undefined | Record\u003cstring, string\u003e\u003e {\n  media?: Record\u003cstring, string\u003e;\n  \"backdrop-blur\"?: Record\u003cstring, string\u003e;\n  \"backdrop-brightness\"?: Record\u003cstring, string\u003e;\n  \"backdrop-contrast\"?: Record\u003cstring, string\u003e;\n  \"backdrop-grayscale\"?: Record\u003cstring, string\u003e;\n  \"backdrop-hue-rotate\"?: Record\u003cstring, string\u003e;\n  \"backdrop-invert\"?: Record\u003cstring, string\u003e;\n  \"backdrop-opacity\"?: Record\u003cstring, string\u003e;\n  \"backdrop-saturate\"?: Record\u003cstring, string\u003e;\n  \"backdrop-sepia\"?: Record\u003cstring, string\u003e;\n  blur?: Record\u003cstring, string\u003e;\n  brightness?: Record\u003cstring, string\u003e;\n  contrast?: Record\u003cstring, string\u003e;\n  grayscale?: Record\u003cstring, string\u003e;\n  \"hue-rotate\"?: Record\u003cstring, string\u003e;\n  invert?: Record\u003cstring, string\u003e;\n  saturate?: Record\u003cstring, string\u003e;\n  sepia?: Record\u003cstring, string\u003e;\n  scale?: Record\u003cstring, string\u003e;\n  rotate?: Record\u003cstring, string\u003e;\n  translate?: Record\u003cstring, string\u003e;\n  skew?: Record\u003cstring, string\u003e;\n  // custom more...\n}\n```\n\n## CustomTheme Instructions\n\n##### 1.media\n\nIn the `customTheme` configuration, `media` can customize responsive breakpoints, for example\n\ncustomTheme\n\n```json\n{\n  \"media\": {\n    \"@media (min-width: 1800px)\": \"3xl\"\n  }\n}\n```\n\ncss code\n\n```css\n@media (min-width: 1800px) {\n  .my-media {\n    display: flex;\n    align-items: center;\n  }\n}\n```\n\nout code\n\n```text\n@media(min-width:1800px)--\u003e.my-media Result Code:\n3xl:flex 3xl:items-center\n```\n\n##### 2.`backdrop-filter`, `filter`, `transform`\n\nHow to customize `backdrop-filter`, `filter`, `transform` in customTheme\n\nThe sub-attributes in these three attribute values do not need to be prefixed when customizing, for example\n\ncustomTheme\n\n```json\n{\n  \"backdrop-blur\": {\n    \"99999px\": \"super-big\"\n  },\n  \"rotate\": {\n    \"99deg\": \"crooked\"\n  }\n}\n```\n\ncss code\n\n```css\n.my-style {\n  transform: rotate(99deg);\n  backdrop-filter: blur(99999px);\n}\n```\n\nout code\n\n```text\n.my-style Result Code:\ntransform rotate-crooked backdrop-filter backdrop-blur-super-big\n```\n\n##### 3.Customize any property value alias in customTheme\n\nCustomizing other properties in `customTheme` needs to be prefixed, for example\n\ncustomTheme\n\n```json\n{\n  \"width\": {\n    \"288px\": \"w-custom\" // Need to add `w-` prefix\n  },\n  \"box-shadow\": {\n    \"10px 10px 5px #888888\": \"box-shadow-custom\" // Need to add `box-shadow-` prefix\n  },\n  \"font-size\": { // Need to add `font-size-` prefix\n    \"20px: \"2xl\",\n    \"1.25rem\": \"2xl\"\n  }\n}\n```\n\ncss code\n\n```css\n.my-style {\n  box-shadow: 10px 10px 5px #888888;\n  width: 288px;\n  font-size: 20px;\n}\n```\n\nout code\n\n```text\n.my-style Result Code:\nbox-shadow-custom w-custom text-2xl\n```\n\n### About\n\n\u003ca href=\"https://www.buymeacoffee.com/hunghg255\" target=\"_blank\"\u003e\u003cimg src=\"https://cdn.buymeacoffee.com/buttons/default-orange.png\" alt=\"Buy Me A Coffee\" height=\"41\" width=\"174\"\u003e\u003c/a\u003e\n\nGia Hung – [hung.hg](https://hung.thedev.id)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhunghg255%2Fcss2tailwind","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhunghg255%2Fcss2tailwind","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhunghg255%2Fcss2tailwind/lists"}