twcss-to-sass

HTML template to SASS converter for TailwindCSS

🚀 Demo

📦 Installation

NPM

npm i @egoistdeveloper/twcss-to-sass

CDN

<script src="https://unpkg.com/@egoistdeveloper/twcss-to-sass@latest/dist/umd/index.js"></script>

Input-Output

Template Input

<!-- Container Start -->
<!-- Container Any -->
<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-->

SASS Output

/* Container Start, Container Any -> 1 */
.class-1-div {
    @apply bg-white;

    /* Some Div -> 2 */
    .class-2-div {
        @apply flex justify-center items-center min-h-screen min-w-full;

        /* div -> 3 */
        .class-3-div {
            @apply flex relative;

            /* Inner Div -> 4 */
            .class-3-div {
                @apply w-72 h-40 bg-green-400 transform transition-all;
            }
        }
    }
}

🔰 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 -->
            <!-- Container Any -->
            <div class="bg-white">
                <!-- Some Div -->
                <div class="flex justify-center items-center min-h-screen">
                    <div class="flex relative">
                        <!-- Inner Div -->
                        <div class="w-72 h-40 bg-green-400 absolute">
                            My Text 1
                        </div>
                    </div>
                </div>
            </div>
            <!-- Container End-->`;

    console.log(convertToSass(html));
</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));

🔰 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));