DOCSEARCHbyAlgolia
Submit Docs

Twind Documentation

repository·main·Indexed 26 days ago

https://github.com/tw-in-js/twind

Twind is a runtime Tailwind CSS compiler that converts utility classes into CSS on the fly, eliminating the need for a build-time PostCSS pipeline. It supports browsers, Node.js, and edge runtimes. The library includes a core engine (@twind/core), various presets such as @twind/preset-tailwind and @twind/preset-autoprefix, and specialized integration packages for frameworks including Next.js, Gatsby, SvelteKit, Remix, and Lit/Web Components. It also offers a lightweight CDN alternative to the Tailwind Play CDN.

Tokens
42.1K
Snippets
116
Records
267
Agent score
84%

What's inside Twind

  1. Overview of Twind

    main
    Twind is a lightweight, high-performance compiler that converts Tailwind utility classes into CSS at runtime. It unifies the flexibility of CSS-in-JS with the Tailwind API, allowing you to use utility-first CSS without a build step (no Tailwind, PostCSS, or purging required). It is framework-agnostic and works in browsers, Node.js, Deno, and edge workers.

  6. Use Twind CDN for browser-based Tailwind CSS

    main
    Twind CDN is a drop-in replacement for the Tailwind CSS Play CDN. It allows you to use Tailwind CSS directly in the browser without a build step. It is significantly smaller (approximately 17kB) compared to the Tailwind CSS Play CDN (approximately 104kB).

  7. Key Features of Twind

    main

    Twind provides several advantages for developers:

    • No build step: Use Tailwind utility classes directly in the browser or server without PostCSS or configuration.
    • Framework agnostic: Works with any HTML/JavaScript environment, including server-rendered apps.
    • Low fixed cost: Ships the compiler instead of a large CSS file, allowing for unlimited styles and variants.
    • Tailwind v3 parity: Features parity with Tailwind v3 syntax.
    • Extensibility: Supports extended variants, rules, and syntax, as well as language extension via presets.
    • Performance: Faster than most CSS-in-JS libraries and supports static extraction for zero runtime overhead.
    • Type Safety: Written in TypeScript for strong typing.
    • Tree shakeable: Only include the parts of the library you need.

  10. Compare Twind with Tailwind CSS

    main

    When comparing Twind to the standard Tailwind CSS CDN, Twind offers a significantly smaller footprint (approximately 17kB vs 106kB via Brotli compression).

    Key functional differences include:

    • Predictable Utility Ordering: Unlike Tailwind CSS, which may have non-implicit ordering where the first utility used in a document wins if they share a CSS property, Twind ensures utility order is always predictable.
    • Dark Mode: Twind supports custom selectors like .dark-mode or [theme=dark] and provides auto dark colors.