How to use Prewind 🌀

Art 70x — Sun, 15 Feb 2026 06:34:23 +0000

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>

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>

Transforms into:

<div class="hover:bg-blue-500 hover:text-blue-50 dark:hover:bg-blue-400 dark:hover:text-blue-950"></div>

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

CLI aliases: prewind or simply pw

⚡ CLI Usage

Dry run (print to console)

pw src/test.html

Outputs transformed classes without modifying files.

Write files in place

pw -w src/test.html

Output to a directory

pw src/**/*.html -o dist

🌐 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>

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>

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>

🔧 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>

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

🔗 Resources

GitHub: https://github.com/art70x/prewind
NPM: https://www.npmjs.com/package/prewind

DEV Community: Art 70x