Opinion about tailwindcss compile by javascript
-
I saw the windicss. Windi CSS is fully compatible with Tailwind CSS v2.
I read about the compile page. (https://windicss.org/integrations/javascript.html)
I think it’s able to generate the css from db content.
Generate css >> upload by ajax-post >> import css file uploaedconst { Processor } = require("windicss/lib"); const { HTMLParser } = require("windicss/utils/parser"); export function generateStyles(html) { // Get windi processor const processor = new Processor(); // Parse HTML to get array of class matches with location const parser = new HTMLParser(html); // Generate preflight based on the HTML we input const preflightSheet = processor.preflight(html, false); console.log(preflightSheet); const PREFIX = ""; const outputCSS = []; let outputHTML = ""; let indexStart = 0; parser.parseClasses().forEach((p) => { // add HTML substring from index to match start outputHTML += html.substring(indexStart, p.start); // generate stylesheet const style = processor.compile(p.result, PREFIX); // add the styleSheet to the styles stack outputCSS.push(style.styleSheet); // append ignored classes and push to output outputHTML += [style.className, ...style.ignored].join(" "); // mark the end as our new start for next iteration indexStart = p.end; }); // append the remainder of html outputHTML += html.substring(indexStart); // Build styles const MINIFY = false; const styles = outputCSS // extend the preflight sheet with each sheet from the stack .reduce((acc, curr) => acc.extend(curr), preflightSheet) .build(MINIFY); return { styles, outputHTML }; } const test111 = generateStyles("<div class='p-3'>test</div>"); console.log(test111);
Viewing 2 replies - 1 through 2 (of 2 total)
Viewing 2 replies - 1 through 2 (of 2 total)
The topic ‘Opinion about tailwindcss compile by javascript’ is closed to new replies.