@egoistdeveloper/twcss-to-sass NPM

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 and peer 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);