Rewind

Just-in-time Tailwind compiler but supply-chain hardened

npm install @hazae41/rewind

deno install jsr:@hazae41/rewind

📦 NPM • 📦 JSR

Features

Current features

• 100% TypeScript and ESM
• No external dependencies
• Works with any framework
• Just-in-time rendering
• Prerender and hydrate

Why

Look at the dependencies graph of the average Tailwind library

Usage

Client-side any framework (just-in-time rendering)

await new Rewind(document).render()

// document now has a <style> with all your classes

// it will automatically update when your classes are modified

Client-side any React framework (just-in-time rendering)

import { Rewind } from "@hazae41/rewind"
import { useEffect } from "react"

export default function App() {

  useEffect(() => {
    await new Rewind(document).render()

    // document now has a <style> with all your classes

    // it will automatically update when your classes are modified
  }, [])

  return <div className="text-2xl">
    Hello world
  </div>
}

Client-side pure React (just-in-time rendering)

import { Rewind } from "@hazae41/rewind"
import { createRoot } from "react-dom/client"

function App() {
  return <div className="text-2xl">Hello world</div>
}

await new Rewind(document).render()

createRoot(document.body).render(<App />)

Client-side pure React with SSG (prerendering and hydration)

import { Rewind } from "@hazae41/rewind"
import { hydrateRoot } from "react-dom/static"

function App() {
  return <div className="text-2xl">Hello world</div>
}

if (client) {
  await new Rewind(document).hydrate()
  hydrateRoot(document.body, <App />)
}

if (server) {
  await new Rewind(document).prerender()
  document.body = prerenderToString(<App />)
}

Server-side pure React to HTML (prerendering)

import { Rewind } from "@hazae41/rewind"
import { DOMParser, XMLSerializer } from "..."
import { renderToString } from "react-dom/static"

function App() {
  return <div className="text-2xl">Hello world</div>
}

const html = renderToString(<App />)

const document = new DOMParser().parseFromString(html, "text/html")

await new Rewind(document).prerender()

const html2 = new XMLSerializer().serializeToString(document)