https://github.com/twcomponents/twcss-to-sass
TailwindCSS HTML template to SASS and SASS based HTML template converter tool
https://github.com/twcomponents/twcss-to-sass
converter converter-app converter-library sass tailwind-components tailwind-css tailwind-template tailwindcss
Last synced: about 1 month ago
JSON representation
TailwindCSS HTML template to SASS and SASS based HTML template converter tool
- Host: GitHub
- URL: https://github.com/twcomponents/twcss-to-sass
- Owner: twcomponents
- License: mit
- Created: 2021-09-01T18:15:32.000Z (over 3 years ago)
- Default Branch: dev
- Last Pushed: 2023-02-22T09:40:44.000Z (about 2 years ago)
- Last Synced: 2025-04-02T22:15:31.260Z (about 2 months ago)
- Topics: converter, converter-app, converter-library, sass, tailwind-components, tailwind-css, tailwind-template, tailwindcss
- Language: TypeScript
- Homepage: https://relliv.github.io/twcss-to-sass-playground/
- Size: 351 KB
- Stars: 31
- Watchers: 1
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
# twcss-to-sass
[](https://github.com/EgoistDeveloper/twcss-to-sass)
HTML template to SASS converter for TailwindCSS
[](https://www.codefactor.io/repository/github/egoistdeveloper/twcss-to-sass)
[](https://www.npmjs.com/package/@egoistdeveloper/twcss-to-sass)
[](https://www.npmjs.com/package/@egoistdeveloper/twcss-to-sass)
[](https://github.com/EgoistDeveloper/twcss-to-sass/blob/dev/LICENSE)
## About
There are many tailwind component sharing platforms, snippet websites, code pens, UI kits, etc. We generally see static demos and inline class lists like `
...`. 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.
This 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.
## 🚀 [Playground](https://egoistdeveloper.github.io/twcss-to-sass-playground)
Use converter playground for quick start.
## 📦 Installation
### NPM
```dsconfig
npm i @egoistdeveloper/twcss-to-sass
```
### CDN
```javascript
```
## Todo
- [x] Fix missing texts with child element
- [x] Fix self-closing tags like `link`, `base`, `area`, `br` etc
- [x] Fix url conflict with class name in comment line
- [x] Add option for duplicated classes
- [x] Fix `group` and `peer` utility classes issue on SASS
- [ ] Filter non tailwind classes
- [x] Order classes
- [x] Group classes
- [ ] Print as group classes
- [x] Add configs menu for playground
- [ ] Detect tailwind classes
## Input-Output
**Template Input**
```xml
My Text 1
```
**HTML Output**
```xml
My Text 1
```
**SASS Output**
```scss
/* Container Start -> 1 */
.container-start {
@apply bg-white;
/* Some Div -> 2 */
.some-div {
@apply flex items-center justify-center min-h-screen min-w-full;
/* div -> 3 */
.class-div-3 {
@apply flex relative;
/* Inner Div -> 4 */
.inner-div {
@apply bg-green-400 h-40 transform transition-all w-72;
}
}
}
}
```
## 🔰 Browser Example
```html
const { convertToSass } = TwCssToSass,
html = `<!-- Container Start -->
<div class="bg-white">
<!-- Some Div -->
<div class="flex justify-center items-center min-h-screen min-w-full">
<div class="flex relative">
<!-- Inner Div -->
<div class="w-72 h-40 bg-green-400 transform transition-all">
My Text 1
</div>
</div>
</div>
</div>
<!-- Container End-->`;
console.log(convertToSass(html).html);
console.log(convertToSass(html).sass);
```
## 🔰 NodeJS Example
```javascript
const TwCssToSass = require('./twcss-to-sass');
const path = require('path');
const fs = require('fs');
const htmlContent = fs.readFileSync(
path.resolve(__dirname, './templates/template-1.html'),
'UTF-8'
)
console.log(TwCssToSass.convertToSass(htmlContent).html);
console.log(TwCssToSass.convertToSass(htmlContent).sass);
```
## 🔰 Angular, React, Vue, etc...
```javascript
import { convertToSass } from '@egoistdeveloper/twcss-to-sass';
const htmlContent = '
My Text 1';
console.log(convertToSass(htmlContent).html);
console.log(convertToSass(htmlContent).sass);
```
## Attribution