twcss-to-sass
HTML template to SASS converter for TailwindCSS
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 <div class="text-base leading-6 text-gray-500 hover:text-gray-900">...
. 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
Use converter playground for quick start.
📦 Installation
NPM
npm i @egoistdeveloper/twcss-to-sass
CDN
<script src="https://unpkg.com/@egoistdeveloper/twcss-to-sass@latest/dist/umd/index.js"></script>
Todo
- Fix missing texts with child element
- Fix self-closing tags like
link
,base
,area
,br
etc - Fix url conflict with class name in comment line
- Add option for duplicated classes
- Fix
group
andpeer
utility classes issue on SASS - Filter non tailwind classes
- Order classes
- Group classes
- Print as group classes
- Add configs menu for playground
- Detect tailwind classes
Input-Output
Template Input
<!-- 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-->
HTML Output
<!-- Container Start -->
<div class="container-start">
<!-- Some Div -->
<div class="some-div">
<div class="class-div-3">
<!-- Inner Div -->
<div class="inner-div">
My Text 1
</div>
</div>
</div>
</div>
SASS Output
/* 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
<!-- local -->
<script src="./../../dist/umd/index.js"></script>
<!-- or -->
<!-- CDN -->
<script src="https://unpkg.com/@egoistdeveloper/twcss-to-sass@latest/dist/umd/index.js"></script>
<script>
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);
</script>
🔰 NodeJS Example
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...
import { convertToSass } from '@egoistdeveloper/twcss-to-sass';
const htmlContent = '<div class="w-72 h-40 bg-green-400 transform transition-all">My Text 1</div>';
console.log(convertToSass(htmlContent).html);
console.log(convertToSass(htmlContent).sass);