twind

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

Stats

Basic twind repo stats
16
1,237
9.6
10 days ago

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

Twind Alternatives

Similar projects and alternatives to twind

  • GitHub repo Tailwind CSS

    A utility-first CSS framework for rapid UI development.

  • GitHub repo PostCSS

    Transforming styles with JS plugins

  • GitHub repo classnames

    A simple javascript utility for conditionally joining classNames together

  • GitHub repo twin.macro

    🦹‍♂️ Twin blends the magic of Tailwind with the flexibility of css-in-js (emotion, styled-components and goober) at build time.

  • GitHub repo cssnano

    A modular minifier, built on top of the PostCSS ecosystem.

  • GitHub repo react-webpack-5-tailwind-2

    React 17 Boilerplate with Webpack 5, Tailwind 2, using babel, SASS/PostCSS, HMR, dotenv and an optimized production build

  • GitHub repo twin.examples

    Packed with examples for different frameworks, this repo helps you get started with twin a whole lot faster.

  • GitHub repo Visual Studio Code

    Visual Studio Code

  • GitHub repo material-ui

    Material-UI is a simple and customizable component library to build faster, beautiful, and more accessible React applications. Follow your own design system, or start with Material Design.

  • GitHub repo parcel

    📦🚀 Blazing fast, zero configuration web application bundler

  • GitHub repo DefinitelyTyped

    The repository for high quality TypeScript type definitions.

  • GitHub repo snapdrop

    A Progressive Web App for local file sharing

  • GitHub repo patch-package

    Fix broken node modules instantly 🏃🏽‍♀️💨

  • GitHub repo styletron

    :zap: Toolkit for component-oriented styling

  • GitHub repo eslint-config-prettier

    Turns off all rules that are unnecessary or might conflict with Prettier.

  • GitHub repo valtio

    💊 Valtio makes proxy-state simple for React and Vanilla

  • GitHub repo eslint-plugin-prettier

    ESLint plugin for Prettier formatting

  • GitHub repo compiled

    A familiar and performant compile time CSS-in-JS library for React.

  • GitHub repo hubs

    Duck-themed multi-user virtual spaces in WebVR. Built with A-Frame.

  • GitHub repo actions

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

Posts

Posts where twind has been mentioned. 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