{"id":15470550,"url":"https://github.com/jackardios/css-to-tailwindcss","last_synced_at":"2025-04-06T23:16:42.448Z","repository":{"id":65328444,"uuid":"582763785","full_name":"Jackardios/css-to-tailwindcss","owner":"Jackardios","description":"Convert CSS to TailwindCSS 3.x","archived":false,"fork":false,"pushed_at":"2024-02-03T09:31:41.000Z","size":4894,"stargazers_count":128,"open_issues_count":16,"forks_count":15,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-30T22:09:57.151Z","etag":null,"topics":["classes","converter","css","tailwind","tailwindcss"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/Jackardios.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"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}},"created_at":"2022-12-27T19:59:40.000Z","updated_at":"2025-03-29T13:24:39.000Z","dependencies_parsed_at":"2024-10-31T02:01:15.863Z","dependency_job_id":"7dc9f6bb-1200-486a-abb5-4414594f9601","html_url":"https://github.com/Jackardios/css-to-tailwindcss","commit_stats":{"total_commits":104,"total_committers":1,"mean_commits":104.0,"dds":0.0,"last_synced_commit":"e458cb3b693c6835ff95b64ea3ba366a9d9e9744"},"previous_names":[],"tags_count":14,"template":false,"template_full_name":"ryansonshine/typescript-npm-package-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jackardios%2Fcss-to-tailwindcss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jackardios%2Fcss-to-tailwindcss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jackardios%2Fcss-to-tailwindcss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jackardios%2Fcss-to-tailwindcss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Jackardios","download_url":"https://codeload.github.com/Jackardios/css-to-tailwindcss/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247563935,"owners_count":20958971,"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":["classes","converter","css","tailwind","tailwindcss"],"created_at":"2024-10-02T02:05:19.566Z","updated_at":"2025-04-06T23:16:42.426Z","avatar_url":"https://github.com/Jackardios.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Convert CSS to TailwindCSS 3.x\n\n[![npm package][npm-img]][npm-url]\n[![Build Status][build-img]][build-url]\n[![Downloads][downloads-img]][downloads-url]\n[![Issues][issues-img]][issues-url]\n[![Semantic Release][semantic-release-img]][semantic-release-url]\n\n\u003e Convert your CSS to TailwindCSS 3.x respecting TailwindCSS configuration\n\n**[🔗 Demo](https://transform.tools/css-to-tailwind)**\n\n**[🔗 VS Code Extension already available 🎉](https://github.com/Jackardios/vscode-css-to-tailwindcss)**\n\n![VSCode demo](.github/demo.gif)\n\n## Features:\n\n- supports almost all the features (except custom plugins) currently available in TailwindCSS\n- the ability to set your own TailwindCSS configuration\n- colors are matched regardless of the format used\n- rem is converted to px (it is possible to configure the rem size)\n- non-convertible CSS declarations are simply skipped\n- [ambiguities](https://tailwindcss.com/docs/adding-custom-styles#resolving-ambiguities) when using css variables are resolved automatically\n\n## Install\n\n```bash\nnpm install css-to-tailwindcss\n```\n\n## Usage\n\n```ts\nimport { TailwindConverter } from 'css-to-tailwindcss';\n\nconst converter = new TailwindConverter({\n  remInPx: 16, // set null if you don't want to convert rem to pixels\n  postCSSPlugins: [require('postcss-nested')], // add any postcss plugins to this array\n  tailwindConfig: {\n    // your tailwind config here\n    content: [],\n    theme: {\n      extend: {\n        colors: {\n          'custom-color': {\n            100: '#123456',\n            200: 'hsla(210, 100%, 51.0%, 0.016)',\n            300: '#654321',\n            gold: 'hsl(41, 28.3%, 79.8%)',\n            marine: 'rgb(4, 55, 242, 0.75)',\n          },\n        },\n        screens: {\n          'custom-screen': { min: '768px', max: '1024px' },\n        },\n      },\n      supports: {\n        grid: 'display: grid',\n        flex: 'display: flex',\n      },\n    },\n  },\n});\n\nconst inputCSS = `\n:root {\n  --some-color: #090909;\n}\n\n.foo {\n  padding: 0.875em 256px;\n  margin-left: 16px;\n  text-align: center;\n  font-size: 12px;\n  transition: color, background-color, border-color, text-decoration-color, fill,\n    stroke 200ms cubic-bezier(0, 0, 0.2, 1);\n  animation-delay: 200ms;\n\n  \u0026:hover {\n    filter: blur(4px) brightness(0.5) sepia(100%) contrast(1) hue-rotate(30deg)\n      invert(0) opacity(0.05) saturate(1.5);\n    color: hsl(41, 28.3%, 79.8%);\n    font-size: 1.25rem;\n  }\n\n  \u0026[aria-disabled=\"true\"] {\n    width: 25%;\n    color: var(--some-color);\n    font-size: 1em;\n  }\n\n  @media screen and (min-width: 768px) {\n    top: auto;\n    bottom: auto;\n    left: 25%;\n    right: 25%;\n  }\n\n  @media (min-width: 768px) and (max-width: 1024px) {\n    min-width: 100%;\n    margin-right: -24px;\n  }\n\n  @supports (display: grid) {\n    display: grid;\n    grid-column: span 1 / span 1;\n  }\n}\n\n.foo.bar {\n  padding: 0.875rem 256px 15%;\n  transform: translateX(12px) translateY(-0.5em) skew(1deg, 3deg)\n    scale(-0.75, 1.05) rotate(-0.25turn);\n\n  \u0026::after {\n    content: \"*\";\n    animation: spin 1s linear infinite;\n  }\n}\n`;\n\nconverter.convertCSS(inputCSS).then(({ convertedRoot, nodes }) =\u003e {\n  console.log(convertedRoot.toString());\n  console.log(nodes);\n});\n```\n\nConsole output\n\n`convertedRoot.toString()`:\n\n```css\n:root {\n  --some-color: #090909;\n}\n\n.foo {\n  @apply text-center text-xs transition-colors duration-200 ease-out ml-4 px-64 py-[0.875em] hover:blur-sm hover:brightness-50 hover:sepia hover:contrast-100 hover:hue-rotate-30 hover:invert-0 hover:opacity-5 hover:saturate-150 hover:text-custom-color-gold hover:text-xl disabled:w-3/12 disabled:text-[color:var(--some-color)] disabled:text-[1em] md:inset-x-1/4 md:inset-y-auto custom-screen:min-w-full custom-screen:-mr-6 supports-grid:grid supports-grid:col-span-1;\n  animation-delay: 200ms;\n}\n\n.foo.bar {\n  @apply translate-x-3 translate-y-[-0.5em] skew-x-1 skew-y-3 rotate-[-0.25turn] pt-3.5 pb-[15%] px-64 -scale-x-75 scale-y-105 after:content-[\"*\"] after:animate-spin;\n}\n```\n\n`nodes`:\n\n```js\n[\n  {\n    rule: {\n      selector: '.foo',\n      // ...\n    },\n    tailwindClasses: [\n      'text-center',\n      'text-xs',\n      'transition-colors',\n      'duration-200',\n      'ease-out',\n      'ml-4',\n      'px-64',\n      'py-[0.875em]',\n      'hover:blur-sm',\n      'hover:brightness-50',\n      'hover:sepia',\n      'hover:contrast-100',\n      'hover:hue-rotate-30',\n      'hover:invert-0',\n      'hover:opacity-5',\n      'hover:saturate-150',\n      'hover:text-custom-color-gold',\n      'hover:text-xl',\n      'disabled:w-3/12',\n      'disabled:text-[color:var(--some-color)]',\n      'disabled:text-[1em]',\n      'md:inset-x-1/4',\n      'md:inset-y-auto',\n      'custom-screen:min-w-full',\n      'custom-screen:-mr-6',\n      'supports-grid:grid',\n      'supports-grid:col-span-1',\n    ],\n  },\n  {\n    rule: {\n      selector: '.foo.bar',\n      // ...\n    },\n    tailwindClasses: [\n      'translate-x-3',\n      'translate-y-[-0.5em]',\n      'skew-x-1',\n      'skew-y-3',\n      'rotate-[-0.25turn]',\n      'pt-3.5',\n      'pb-[15%]',\n      'px-64',\n      '-scale-x-75',\n      'scale-y-105',\n      'after:content-[\"*\"]',\n      'after:animate-spin',\n    ],\n  },\n];\n```\n\n## API\n\n### TailwindConverter(options?)\n\n| Option                       | Type               | Default | Description                                                                              |\n| ---------------------------- | ------------------ | ------- | ---------------------------------------------------------------------------------------- |\n| remInPx                      | `number` \\| `null` | `null`  | `rem` in `px` unit. Set null if you don't want to convert rem to pixels                  |\n| arbitraryPropertiesIsEnabled | `boolean`          | `false` | defines whether non-convertible properties should be converted as \"arbitrary properties\" |\n| tailwindConfig               | `Config`           | {}      | Set your tailwind config here                                                            |\n| postCSSPlugins               | `AcceptedPlugin[]` | []      | Array of acceptable postcss plugins                                                      |\n\n[build-img]: https://github.com/jackardios/css-to-tailwindcss/actions/workflows/release.yml/badge.svg\n[build-url]: https://github.com/jackardios/css-to-tailwindcss/actions/workflows/release.yml\n[downloads-img]: https://img.shields.io/npm/dt/css-to-tailwindcss\n[downloads-url]: https://www.npmtrends.com/css-to-tailwindcss\n[npm-img]: https://img.shields.io/npm/v/css-to-tailwindcss\n[npm-url]: https://www.npmjs.com/package/css-to-tailwindcss\n[issues-img]: https://img.shields.io/github/issues/jackardios/css-to-tailwindcss\n[issues-url]: https://github.com/jackardios/css-to-tailwindcss/issues\n[semantic-release-img]: https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg\n[semantic-release-url]: https://github.com/semantic-release/semantic-release\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjackardios%2Fcss-to-tailwindcss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjackardios%2Fcss-to-tailwindcss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjackardios%2Fcss-to-tailwindcss/lists"}