{"id":23019902,"url":"https://github.com/twcomponents/twcss-to-sass","last_synced_at":"2026-03-02T14:02:59.900Z","repository":{"id":57110836,"uuid":"402160400","full_name":"twcomponents/twcss-to-sass","owner":"twcomponents","description":"TailwindCSS HTML template to SASS and SASS based HTML template converter tool","archived":false,"fork":false,"pushed_at":"2023-02-22T09:40:44.000Z","size":359,"stargazers_count":31,"open_issues_count":0,"forks_count":3,"subscribers_count":1,"default_branch":"dev","last_synced_at":"2025-04-02T22:15:31.260Z","etag":null,"topics":["converter","converter-app","converter-library","sass","tailwind-components","tailwind-css","tailwind-template","tailwindcss"],"latest_commit_sha":null,"homepage":"https://relliv.github.io/twcss-to-sass-playground/","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/twcomponents.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}},"created_at":"2021-09-01T18:15:32.000Z","updated_at":"2025-02-27T20:50:29.000Z","dependencies_parsed_at":"2022-08-20T19:20:41.704Z","dependency_job_id":null,"html_url":"https://github.com/twcomponents/twcss-to-sass","commit_stats":null,"previous_names":["relliv/twcss-to-sass","egoistdeveloper/twcss-to-sass","twcomponents/twcss-to-sass"],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twcomponents%2Ftwcss-to-sass","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twcomponents%2Ftwcss-to-sass/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twcomponents%2Ftwcss-to-sass/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twcomponents%2Ftwcss-to-sass/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/twcomponents","download_url":"https://codeload.github.com/twcomponents/twcss-to-sass/tar.gz/refs/heads/dev","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248110136,"owners_count":21049443,"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":["converter","converter-app","converter-library","sass","tailwind-components","tailwind-css","tailwind-template","tailwindcss"],"created_at":"2024-12-15T12:12:02.936Z","updated_at":"2026-03-02T14:02:54.878Z","avatar_url":"https://github.com/twcomponents.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# twcss-to-sass\n[![EgoistDeveloper twcss-to-sass](https://preview.dragon-code.pro/EgoistDeveloper/TW-CSS-to-SASS.svg)](https://github.com/EgoistDeveloper/twcss-to-sass)\n\nHTML template to SASS converter for TailwindCSS\n\n[![CodeFactor](https://www.codefactor.io/repository/github/egoistdeveloper/twcss-to-sass/badge)](https://www.codefactor.io/repository/github/egoistdeveloper/twcss-to-sass)\n[![NPM](https://img.shields.io/npm/v/@egoistdeveloper/twcss-to-sass)](https://www.npmjs.com/package/@egoistdeveloper/twcss-to-sass)\n[![NPM Type Definitions](https://img.shields.io/npm/types/@egoistdeveloper/twcss-to-sass)](https://www.npmjs.com/package/@egoistdeveloper/twcss-to-sass)\n[![NPM](https://img.shields.io/npm/l/@egoistdeveloper/twcss-to-sass)](https://github.com/EgoistDeveloper/twcss-to-sass/blob/dev/LICENSE)\n\n## About\n\nThere are many tailwind component sharing platforms, snippet websites, code pens, UI kits, etc. We generally see static demos and inline class lists like `\u003cdiv class=\"text-base leading-6 text-gray-500 hover:text-gray-900\"\u003e...`. If you want to choose the SASS option for your project, you need to convert inline classes and templates one by one. And this process takes time. This tool converts inline class lists to SASS and it takes just milliseconds.\n\nThis tool is useful for a quick start but all cases did not consider. There are many edge cases. So, you may need to refactor output HTML and SASS results.\n\n## 🚀 [Playground](https://egoistdeveloper.github.io/twcss-to-sass-playground)\n\nUse converter playground for quick start.\n\n## 📦 Installation\n\n### NPM\n\n```dsconfig\nnpm i @egoistdeveloper/twcss-to-sass\n```\n\n### CDN\n\n```javascript\n\u003cscript src=\"https://unpkg.com/@egoistdeveloper/twcss-to-sass@latest/dist/umd/index.js\"\u003e\u003c/script\u003e\n```\n\n## Todo\n\n- [x] Fix missing texts with child element\n- [x] Fix self-closing tags like `link`, `base`, `area`, `br` etc\n- [x] Fix url conflict with class name in comment line\n- [x] Add option for duplicated classes\n- [x] Fix `group` and `peer` utility classes issue on SASS\n- [ ] Filter non tailwind classes\n- [x] Order classes\n- [x] Group classes\n- [ ] Print as group classes\n- [x] Add configs menu for playground\n- [ ] Detect tailwind classes\n\n## Input-Output\n\n**Template Input**\n\n```xml\n\u003c!-- Container Start --\u003e\n\u003cdiv class=\"bg-white\"\u003e\n\t\u003c!-- Some Div --\u003e\n\t\u003cdiv class=\"flex justify-center items-center min-h-screen min-w-full\"\u003e\n\t\t\u003cdiv class=\"flex relative\"\u003e\n\t\t\t\u003c!-- Inner Div --\u003e\n\t\t\t\u003cdiv class=\"w-72 h-40 bg-green-400 transform transition-all\"\u003e\n\t\t\t\tMy Text 1\n\t\t\t\u003c/div\u003e\n\t\t\u003c/div\u003e\n\t\u003c/div\u003e\n\u003c/div\u003e\n\u003c!-- Container End--\u003e\n```\n\n**HTML Output**\n\n```xml\n\u003c!-- Container Start --\u003e\n\u003cdiv class=\"container-start\"\u003e\n    \u003c!-- Some Div --\u003e\n    \u003cdiv class=\"some-div\"\u003e\n        \u003cdiv class=\"class-div-3\"\u003e\n            \u003c!-- Inner Div --\u003e\n            \u003cdiv class=\"inner-div\"\u003e\n                My Text 1\n            \u003c/div\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\n**SASS Output**\n\n```scss\n/* Container Start -\u003e 1 */\n.container-start {\n    @apply bg-white;\n\n    /* Some Div -\u003e 2 */\n    .some-div {\n        @apply flex items-center justify-center min-h-screen min-w-full;\n\n        /* div -\u003e 3 */\n        .class-div-3 {\n            @apply flex relative;\n\n            /* Inner Div -\u003e 4 */\n            .inner-div {\n                @apply bg-green-400 h-40 transform transition-all w-72;\n            }\n        }\n    }\n}\n```\n\n## 🔰 Browser Example\n\n```html\n\u003c!-- local --\u003e\n\u003cscript src=\"./../../dist/umd/index.js\"\u003e\u003c/script\u003e\n\n\u003c!-- or --\u003e\n\n\u003c!-- CDN --\u003e\n\u003cscript src=\"https://unpkg.com/@egoistdeveloper/twcss-to-sass@latest/dist/umd/index.js\"\u003e\u003c/script\u003e\n\n\u003cscript\u003e\n    const { convertToSass } = TwCssToSass,\n    html = `\u003c!-- Container Start --\u003e\n            \u003cdiv class=\"bg-white\"\u003e\n              \u003c!-- Some Div --\u003e\n              \u003cdiv class=\"flex justify-center items-center min-h-screen min-w-full\"\u003e\n                \u003cdiv class=\"flex relative\"\u003e\n                  \u003c!-- Inner Div --\u003e\n                  \u003cdiv class=\"w-72 h-40 bg-green-400 transform transition-all\"\u003e\n                    My Text 1\n                  \u003c/div\u003e\n                \u003c/div\u003e\n              \u003c/div\u003e\n            \u003c/div\u003e\n            \u003c!-- Container End--\u003e`;\n\n    console.log(convertToSass(html).html);\n    console.log(convertToSass(html).sass);\n\u003c/script\u003e\n```\n\n## 🔰 NodeJS Example\n\n```javascript\nconst TwCssToSass = require('./twcss-to-sass');\nconst path = require('path');\nconst fs = require('fs');\n\nconst htmlContent = fs.readFileSync(\n  path.resolve(__dirname, './templates/template-1.html'),\n  'UTF-8'\n)\n\nconsole.log(TwCssToSass.convertToSass(htmlContent).html);\nconsole.log(TwCssToSass.convertToSass(htmlContent).sass);\n\n```\n\n## 🔰 Angular, React, Vue, etc...\n\n```javascript\nimport { convertToSass } from '@egoistdeveloper/twcss-to-sass';\n\nconst htmlContent = '\u003cdiv class=\"w-72 h-40 bg-green-400 transform transition-all\"\u003eMy Text 1\u003c/div\u003e';\n\nconsole.log(convertToSass(htmlContent).html);\nconsole.log(convertToSass(htmlContent).sass);\n\n```\n\n## Attribution\n\n\u003ca href=\"https://www.flaticon.com/free-icons/wind\" title=\"wind icons\"\u003eWind icons created by smalllikeart - Flaticon\u003c/a\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftwcomponents%2Ftwcss-to-sass","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftwcomponents%2Ftwcss-to-sass","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftwcomponents%2Ftwcss-to-sass/lists"}