twind

The smallest, fastest, most feature complete Tailwind-in-JS solution in existence. (by tw-in-js)

Twind Alternatives

Similar projects and alternatives to twind

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a better twind alternative or higher similarity.

Suggest an alternative to twind

Reviews and mentions

Posts with mentions or reviews of twind. We have used some of these posts to build our list of alternatives and similar projects. The last one was on 2021-04-27.
  • I built a simple but maybe useful "digital circuit simulador" of sorts (see comments)
    The UI uses Dominant (my React/Vue substitute) and Twind, which I heard about from this Reddit and is super cool (:
  • [RFC] Airfoil: Coding an alternative to Tailwind
    dev.to | 2021-04-21
    Tailwind (with the CSS-in-JS tool, twind) provides a mental model to organize utility classes without polluting the global stylesheet.
  • How to reproduce Death Stranding UI with react and react-three-fiber
    dev.to | 2021-04-15
    twind (styling solution based on Tailwind)
  • Created a styled-component like library for using tailwindCSS (or other class frameworks) in a meaningful and cleaner way than inlining classes in the DOM.
    reddit.com/r/reactjs | 2021-04-05
    there’s also https://github.com/tw-in-js/twind which i haven’t used yet but i really like the grouping syntax
  • Do you start a new web application completely from scratch?
    reddit.com/r/webdev | 2021-04-02
    I would rather use tailwind. and if you go vanilla route, then twind with the shim.
  • Just-In-Time: The Next Generation of Tailwind CSS
    The best one here. https://github.com/tw-in-js/twind. only the `mx-3px` still in the progress
  • Just-In-Time: The Next Generation of Tailwind CSS – Tailwind CSS
    reddit.com/r/reactjs | 2021-03-15
    There’s Twind which could be a great bridge
    reddit.com/r/reactjs | 2021-03-15
    What's the difference between this and something like Twind except this being an official approach to JIT and the arbitrary styles? That said, I'd probably make the switch when it's included in Tailwind.
  • Twind: Tailwind CSS-in-JS
    news.ycombinator.com | 2021-03-13
  • What I look forward to about web development in 2021
    For Tailwind, there’s twind which I say is just a better Tailwind.
  • How to Build A React TS Tailwind Design System
    dev.to | 2021-02-16
    Some more appealing things that came out of our DMs were that the team is working on a [styled module](https://github.com/tw-in-js/twind/pull/7) and TypeScript support. Also, the package has its own "CSS-in-JS" baked in, so no need for Styled Components, Emotion, or Goober.
    dev.to | 2021-02-16
    "Twind is a no-build-step tailwind-first CSS-in-JS library which allows seamless integration with existing Tailwind HTML using the twind/shim module. This feature can be used together with your favorite framework without any additional setup. twind/shim dynamically detects used Tailwind classes within the HTML document, creates the corresponding CSS rules, and injects these into a stylesheet. Here is an example to play with. By shipping the compiler (rather than the resultant output) there is a known and fixed cost associated with styling. No matter how many styles you write or how many variants you use, all that your users will ever have to download is approximately 12KB of code (which is less than styled-components or your average purged Tailwind build). On the server, we can use twind/shim/server to generate the initial CSS to be included in the HTML. Unlike Tailwind, Twind is not limited to the restrictions of a class name strings as input. One pain-point commonly felt when using utility CSS is long and unwieldy lines of code consisting of class names, often denoting styles at various breakpoints, which are quite hard to comprehend. It is not uncommon for a single element to have tens of rules applied to it. Twind provides a grouping syntax to combine common variants or prefixes. Both responsive and pseudo variants are supported in various combinations: bg-red-500 shadow-xs md:(bg-red-700 shadow) lg:(bg-red-800 shadow-xl). Because Twind is generating CSS during runtime there is no need to restrict the usage of variants. Every variant can be applied to every class. Additionally, variants can be stacked like hover:focus:text-blue-700. The Twind documentation site contains an overview of all extensions. As a convenient escape hatch for all those one-off styles which aren't supported by Tailwind, Twind allows writing arbitrary CSS making it a full CSS-in-JS solution."
  • Secretly Tailwindcss
    dev.to | 2021-02-04
    Twind
  • Repos interesantes de la semana #1
    dev.to | 2021-01-12
    Para mas detalles sobre esta y otras funcionalidades puedes visitar el repositorio: tw-in-js / twind
  • Boilerplate with React 17, Webpack 5, Tailwind 2, using babel, sass, with a hot dev server and an optimized production build
    reddit.com/r/reactjs | 2021-01-02
    Or Twind

Stats

Basic twind repo stats
16
1,583
9.1
about 2 months ago

tw-in-js/twind is an open source project licensed under MIT License which is an OSI approved license.

Scout APM: A developer's best friend. Try free for 14-days
Scout APM uses tracing logic that ties bottlenecks to source code so you know the exact line of code causing performance issues and can get back to building a great product faster.
scoutapm.com
Find remote TypeScript jobs at our new job board 99remotejobs.com. There are 13 new remote jobs listed recently.
Are you hiring? Post a new remote job listing for free.