Tools: How to use Prewind 🌀

Write Less, Expand More for Tailwind CSS ## ✨ What is Prewind? ## 📦 Installation ## ⚡ CLI Usage ## Dry run (print to console) ## Write files in place ## Output to a directory ## 🌐 Browser Usage ## 🔧 Using Prewind in Frameworks ## 🧠 Why Prewind? ## 🛠 Development & Contributing ## 🔗 Resources If you love Tailwind CSS, you know how repetitive it can get writing full variant classes: Wouldn’t it be nice to write that in a cleaner, more expressive way? Enter Prewind — a lightweight preprocessor that expands Tailwind-style shorthand into full classes automatically. Prewind lets you write grouped shorthand for Tailwind classes and expands them into proper variants: It’s fast, zero-runtime, and works in Node, CLI, and the browser. CLI aliases: prewind or simply pw Outputs transformed classes without modifying files. Prewind works directly in the browser using ESM modules: You can also transform DOM elements on the fly: Even observe new DOM elements dynamically: Works with React, Vue, Svelte, and more. Integrate Prewind as a build-time step with Vite, Webpack, or Rollup. Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well For further actions, you may consider blocking this person and/or reporting abuse CODE_BLOCK: <div class="hover:bg-blue-500 hover:text-blue-50 dark:hover:bg-blue-400 dark:hover:text-blue-950"></div> Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: <div class="hover:bg-blue-500 hover:text-blue-50 dark:hover:bg-blue-400 dark:hover:text-blue-950"></div> CODE_BLOCK: <div class="hover:bg-blue-500 hover:text-blue-50 dark:hover:bg-blue-400 dark:hover:text-blue-950"></div> CODE_BLOCK: <div class="hover(bg-blue-500 text-blue-50) dark(hover(bg-blue-400 text-blue-950))"></div> Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: <div class="hover(bg-blue-500 text-blue-50) dark(hover(bg-blue-400 text-blue-950))"></div> CODE_BLOCK: <div class="hover(bg-blue-500 text-blue-50) dark(hover(bg-blue-400 text-blue-950))"></div> CODE_BLOCK: <div class="hover:bg-blue-500 hover:text-blue-50 dark:hover:bg-blue-400 dark:hover:text-blue-950"></div> Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: <div class="hover:bg-blue-500 hover:text-blue-50 dark:hover:bg-blue-400 dark:hover:text-blue-950"></div> CODE_BLOCK: <div class="hover:bg-blue-500 hover:text-blue-50 dark:hover:bg-blue-400 dark:hover:text-blue-950"></div> COMMAND_BLOCK: # Install as a dev dependency pnpm add -D prewind npm install -D prewind yarn add -D prewind # Optional global install pnpm add -g prewind Enter fullscreen mode Exit fullscreen mode COMMAND_BLOCK: # Install as a dev dependency pnpm add -D prewind npm install -D prewind yarn add -D prewind # Optional global install pnpm add -g prewind COMMAND_BLOCK: # Install as a dev dependency pnpm add -D prewind npm install -D prewind yarn add -D prewind # Optional global install pnpm add -g prewind CODE_BLOCK: pw src/test.html Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: pw src/test.html CODE_BLOCK: pw src/test.html CODE_BLOCK: pw -w src/test.html Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: pw -w src/test.html CODE_BLOCK: pw -w src/test.html CODE_BLOCK: pw src/**/*.html -o dist Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: pw src/**/*.html -o dist CODE_BLOCK: pw src/**/*.html -o dist CODE_BLOCK: <script type="module"> import { transform } from 'https://cdn.jsdelivr.net/npm/prewind/dist/main.js' const html = `<div class="hover(bg-blue-500 text-white)"></div>` console.log(transform(html)) // <div class="hover:bg-blue-500 hover:text-white"></div> </script> Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: <script type="module"> import { transform } from 'https://cdn.jsdelivr.net/npm/prewind/dist/main.js' const html = `<div class="hover(bg-blue-500 text-white)"></div>` console.log(transform(html)) // <div class="hover:bg-blue-500 hover:text-white"></div> </script> CODE_BLOCK: <script type="module"> import { transform } from 'https://cdn.jsdelivr.net/npm/prewind/dist/main.js' const html = `<div class="hover(bg-blue-500 text-white)"></div>` console.log(transform(html)) // <div class="hover:bg-blue-500 hover:text-white"></div> </script> CODE_BLOCK: <div id="btn" class="hover(bg-red-500 text-white)"></div> <script type="module"> import { transformDOM } from 'https://cdn.jsdelivr.net/npm/prewind/dist/main.js' transformDOM(document.getElementById('btn')) // <div id="btn" class="hover:bg-red-500 hover:text-white"></div> </script> Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: <div id="btn" class="hover(bg-red-500 text-white)"></div> <script type="module"> import { transformDOM } from 'https://cdn.jsdelivr.net/npm/prewind/dist/main.js' transformDOM(document.getElementById('btn')) // <div id="btn" class="hover:bg-red-500 hover:text-white"></div> </script> CODE_BLOCK: <div id="btn" class="hover(bg-red-500 text-white)"></div> <script type="module"> import { transformDOM } from 'https://cdn.jsdelivr.net/npm/prewind/dist/main.js' transformDOM(document.getElementById('btn')) // <div id="btn" class="hover:bg-red-500 hover:text-white"></div> </script> CODE_BLOCK: <script type="module"> import { observeDOM } from 'https://cdn.jsdelivr.net/npm/prewind/dist/main.js' observeDOM(document.body) const btn = document.createElement('button') btn.className = 'hover(bg-green-500 text-white)' document.body.appendChild(btn) // Class expands automatically </script> Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: <script type="module"> import { observeDOM } from 'https://cdn.jsdelivr.net/npm/prewind/dist/main.js' observeDOM(document.body) const btn = document.createElement('button') btn.className = 'hover(bg-green-500 text-white)' document.body.appendChild(btn) // Class expands automatically </script> CODE_BLOCK: <script type="module"> import { observeDOM } from 'https://cdn.jsdelivr.net/npm/prewind/dist/main.js' observeDOM(document.body) const btn = document.createElement('button') btn.className = 'hover(bg-green-500 text-white)' document.body.appendChild(btn) // Class expands automatically </script> CODE_BLOCK: import { transform } from 'prewind' const jsx = `<div class="hover(bg-blue-500 text-white)"></div>` console.log(transform(jsx)) // <div class="hover:bg-blue-500 hover:text-white"></div> Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: import { transform } from 'prewind' const jsx = `<div class="hover(bg-blue-500 text-white)"></div>` console.log(transform(jsx)) // <div class="hover:bg-blue-500 hover:text-white"></div> CODE_BLOCK: import { transform } from 'prewind' const jsx = `<div class="hover(bg-blue-500 text-white)"></div>` console.log(transform(jsx)) // <div class="hover:bg-blue-500 hover:text-white"></div> COMMAND_BLOCK: pnpm install pnpm run try tests/test.html # Run CLI locally pnpm run build # Build CLI + browser pnpm link --global # Test global CLI pw src/**/*.html # Run globally Enter fullscreen mode Exit fullscreen mode COMMAND_BLOCK: pnpm install pnpm run try tests/test.html # Run CLI locally pnpm run build # Build CLI + browser pnpm link --global # Test global CLI pw src/**/*.html # Run globally COMMAND_BLOCK: pnpm install pnpm run try tests/test.html # Run CLI locally pnpm run build # Build CLI + browser pnpm link --global # Test global CLI pw src/**/*.html # Run globally - Write structural shorthand, not repeated classes - Nested variants like hover(), dark(), group-hover(), and peer-focus() are supported - Works before Prettier or dev servers, no runtime overhead - CLI-friendly, fast, and zero runtime - GitHub: https://github.com/art70x/prewind - NPM: https://www.npmjs.com/package/prewind