HTML template to SASS converter for TailwindCSS
🚀 Demo
npm i @egoistdeveloper/twcss-to-sass <script src="https://unpkg.com/@egoistdeveloper/twcss-to-sass@latest/dist/umd/index.js"></script>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; } } } }<!-- 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>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));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));