twind
    TypeScript icon, indicating that this package has built-in type declarations

    0.16.16 • Public • Published

    Twind

    The smallest, fastest, most feature complete Tailwind-in-JS solution in existence

    MIT License Latest Release Bundle Size Package Size Documentation Github Discord CI Coverage Status

    Twind is a small compiler (~13kB) that converts Tailwind classes into actual CSS rules at runtime. If you have used Tailwind or other CSS-in-JS solutions, then most of the API should feel very familiar.

    Documentation

    Frequently viewed docs:

    Features

    ⚡️ No build step

    Get all the benefits of Tailwind without the need for Tailwind, PostCSS, configuration, purging, or autoprefixing.

    🚀 Framework agnostic

    If your app uses HTML and JavaScript, it should work with Twind. This goes for server-rendered apps too.

    😎 One low fixed cost

    Twind ships the compiler, not the CSS. This means unlimited styles and variants for one low fixed cost of ~13kB.

    Other features include:

    • 🎨 Seamless integration with Tailwind
    • 🎯 Extended variants, directives, and syntax
    • ✈️ Tailwind preflight by default
    • 🤝 Feature parity with Tailwind
    • 🚓 Escape hatch for arbitrary CSS
    • 🤖 Built in support for conditional rule combining
    • 🧐 Improved readability with multiline styles
    • ❄️ Optional hashing of class names ensuring no conflicts
    • 🔌 Language extension via plugins
    • 🎩 No runtime overhead with static extraction
    • 🚅 Faster than most CSS-in-JS libraries
    • and more!

    ⚡️ Quick Start

    Copy and paste this code into your favorite sandbox to get started with Twind right away:

    import { tw } from 'https://cdn.skypack.dev/twind'
    
    document.body.innerHTML = `
      <main class="${tw`h-screen bg-purple-400 flex items-center justify-center`}">
        <h1 class="${tw`font-bold text(center 5xl white sm:gray-800 md:pink-700)`}">This is Twind!</h1>
      </main>
    `

    Alternatively try the 🚀 live and interactive demo and take a look at the installation guide.

    Twind is also available as an NPM package:

    npm i twind
    

    For seamless integration with existing Tailwind HTML you can use twind/shim:

    <script type="module" src="https://cdn.skypack.dev/twind/shim"></script>
    
    <main class="h-screen bg-purple-400 flex items-center justify-center">
      <h1 class="font-bold text(center 5xl white sm:gray-800 md:pink-700)">This is Twind!</h1>
    </main>

    Try twind/shim in the 🚀 live and interactive shim demo

    This is just the beginning of all the awesome things you can do with Twind. Check out the handbook to learn more.

    💡 Inspiration

    It would be untrue to suggest that the design here is totally original. Other than the founders' initial attempts at implementing such a module (oceanwind and beamwind) we are truly standing on the shoulders of giants.

    • Tailwind: created a wonderfully thought out API on which the compiler's grammar was defined.
    • styled-components: implemented and popularized the advantages of doing CSS-in-JS.
    • htm: a JSX compiler that proved there is merit in doing runtime compilation of DSLs like JSX.
    • goober: an impossibly small yet efficient CSS-in-JS implementation that defines critical module features.
    • otion: the first CSS-in-JS solution specifically oriented around handling CSS in an atomic fashion.
    • clsx: a tiny utility for constructing class name strings conditionally.
    • style-vendorizer: essential CSS prefixing helpers in less than 1KB of JavaScript.
    • CSSType: providing autocompletion and type checking for CSS properties and values.

    🙏🏾 Sponsors

    Support us with a monthly donation and help us continue our activities.

    [GitHub Sponsor | Open Collective]

    @jordwalke @tylerforesthauser @holic @Andrewnt219

    🤝 Contributing

    We are excited that you are interested in contributing to this project! We've put together a whole contribution guide to get you started.

    ⚖️ License

    The MIT license governs your use of Twind.

    Install

    npm i twind

    Homepage

    twind.dev

    DownloadsWeekly Downloads

    3,229

    Version

    0.16.16

    License

    MIT

    Unpacked Size

    1.23 MB

    Total Files

    106

    Last publish

    Collaborators

    • sastan
    • lukejacksonn