DEV Community

Cover image for How to use Prewind 🌀
Art 70x
Art 70x

Posted on

How to use Prewind 🌀

#webdev #javascript #typescript #tailwindcss

Write Less, Expand More for Tailwind CSS

If you love Tailwind CSS, you know how repetitive it can get writing full variant classes:

<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

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.

✨ What is Prewind?

Prewind lets you write grouped shorthand for Tailwind classes and expands them into proper variants:

<div class="hover(bg-blue-500 text-blue-50) dark(hover(bg-blue-400 text-blue-950))"></div>
Enter fullscreen mode Exit fullscreen mode

Transforms into:

<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

It’s fast, zero-runtime, and works in Node, CLI, and the browser.

📦 Installation 

# 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

CLI aliases: prewind or simply pw

⚡ CLI Usage

Dry run (print to console) 

pw src/test.html
Enter fullscreen mode Exit fullscreen mode

Outputs transformed classes without modifying files.

Write files in place 

pw -w src/test.html
Enter fullscreen mode Exit fullscreen mode

Output to a directory 

pw src/**/*.html -o dist
Enter fullscreen mode Exit fullscreen mode

🌐 Browser Usage

Prewind works directly in the browser using ESM modules:

<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

You can also transform DOM elements on the fly:

<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

Even observe new DOM elements dynamically:

<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

🔧 Using Prewind in Frameworks

Works with React, Vue, Svelte, and more.

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

Integrate Prewind as a build-time step with Vite, Webpack, or Rollup.

🧠 Why Prewind?

  • 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

🛠 Development & Contributing 

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

🔗 Resources

Top comments (0)