awesome-repositories.com
Blog
MCP
awesome-repositories.com

Discover the best open-source repositories with AI-powered search.

ExploreCurated searchesOpen-source alternativesSelf-hosted softwareBlogSitemap
ProjectMCP serverAboutHow we rankPress
LegalPrivacyTerms
© 2026 Bringes Technology SRL·VAT RO45896025·hello@awesome-repositories.com
tw-in-js avatar

tw-in-js/twind

0
View on GitHub↗
3,930 stars·103 forks·JavaScript·mit·25 viewstwind.style↗

Twind

Twind is a utility-first styling library and JavaScript CSS-in-JS engine. It functions as a Tailwind CSS runtime compiler that transforms utility classes into CSS within the browser, as well as a build tool for extracting static CSS to improve page load performance.

The project enables a utility-first styling workflow through a system of predefined classes and customizable theme presets. It supports the extension of styling rules and the definition of custom themes and variants to align the system with specific design requirements.

The engine provides runtime CSS generation and just-in-time style compilation without requiring a build step or bundler. It includes framework-agnostic style injection and connectivity utilities to synchronize the compiler with the rendering lifecycles of various web frameworks.

Features

  • Tailwind CSS Integration - Implements a Tailwind-compatible styling system for use within JavaScript frameworks and component libraries.
  • Runtime Utility Compilers - Transforms Tailwind CSS utility classes into CSS at runtime in the browser without a build step.
  • Utility Class Conversions - Transforms utility-first CSS classes into native styles during runtime execution.
  • Runtime JIT Generators - Implements just-in-time CSS generation by analyzing DOM class names at runtime.
  • Runtime - Transforms utility-first class names into CSS at runtime to enable styling without a build step.
  • JavaScript Style Engines - Functions as a JavaScript engine that converts utility strings and theme configurations into optimized CSS.
  • Utility-First Styling - Provides a utility-first styling workflow using atomic classes and customizable theme presets.
  • CSS Build Tools - Scans source files at build time to extract utility classes into static CSS files for improved performance.
  • Styling - Uses a modular system of predefined configuration objects to extend the styling language and themes.
  • Theme Value Lookups - Resolves style properties by mapping utility tokens to values within a central JavaScript theme object.
  • Utility Interpretation Extensions - Allows modifying utility class interpretation through custom themes, variants, and language extensions.
  • Static Style Extraction - Generates static CSS files during the build process to eliminate runtime overhead and improve load times.
  • Style Sheet Injection - Provides a mechanism to inject generated CSS directly into the document head independently of any JS framework.
  • Theme Customization - Enables the definition of custom themes, variants, and rules to meet specific design requirements.

Star history

Star history chart for tw-in-js/twindStar history chart for tw-in-js/twind

How this analysis was created: This summary and feature list were written by an AI model that read the project's README and public documentation pages. Each feature links to the documentation it came from; stars, license and language come straight from the GitHub API. The model does not read the source code, and the analysis is refreshed when the project is re-analysed. Learn more on our About page.

AI search

Explore more awesome repositories

Describe what you need in plain English — the AI ranks thousands of curated open-source projects by relevance.

Start searching with AI

Open-source alternatives to Twind

Similar open-source projects, ranked by how many features they share with Twind.
  • ben-rogerson/twin.macroben-rogerson avatar

    ben-rogerson/twin.macro

    8,030View on GitHub↗

    twin.macro is a build-time style compiler and utility-first styling tool that converts Tailwind CSS utility classes into optimized style objects for JavaScript styling libraries. It acts as an integration bridge, allowing developers to use Tailwind design tokens and utility classes within a component-based architecture. The project distinguishes itself by performing transformations during the compilation phase rather than at runtime. It maps utility strings to CSS-in-JS engines such as Emotion and Styled Components, resolving design tokens directly from a Tailwind configuration file to ensure

    TypeScriptbabelbabel-macrocss-in-js
    View on GitHub↗8,030
  • tailwindlabs/tailwindcss-typographytailwindlabs avatar

    tailwindlabs/tailwindcss-typography

    6,249View on GitHub↗

    Tailwind CSS Typography is a plugin for the Tailwind CSS framework that provides hand-tuned typographic defaults for blocks of vanilla HTML content, such as content from Markdown or a CMS. It applies beautiful prose styles to HTML content using a single class, eliminating the need for custom CSS to style rich text. The plugin distinguishes itself by offering deep customization and control over typography. Users can adjust the overall font size of prose content across five predefined sizes, select from five built-in gray-scale palettes to match a project's color scheme, and seamlessly adapt ty

    JavaScript
    View on GitHub↗6,249
  • vadimdemedes/tailwind-rnvadimdemedes avatar

    vadimdemedes/tailwind-rn

    4,270View on GitHub↗

    tailwind-rn is a utility-first mobile UI kit and integration framework that allows the use of Tailwind CSS utility classes to style React Native components. It functions as a responsive mobile styling engine that transforms CSS style definitions into JSON objects compatible with native mobile view styling. The project provides a CSS-to-JSON style converter and a responsive engine that adapts styles based on screen breakpoints, dark mode preferences, and viewport orientation. This enables the implementation of mobile responsive design and state-based styling without writing manual stylesheets.

    JavaScript
    View on GitHub↗4,270
  • gluestack/gluestack-uigluestack avatar

    gluestack/gluestack-ui

    4,931View on GitHub↗

    gluestack-ui is a cross-platform React component library built with Tailwind CSS. It provides over 30 pre-built, accessible components that can be installed by copying their source files directly into a project, giving developers full control over customization without external runtime dependencies. Every component implements WAI-ARIA patterns, keyboard navigation, and screen reader support out of the box. A key differentiator is the copy-paste architecture: rather than a traditional package dependency, component source code is placed in the project, allowing direct editing and eliminating ve

    TypeScriptaccessibilitycomponent-librarycustomizable-components
    View on GitHub↗4,931
See all 30 alternatives to Twind→

Frequently asked questions

What does tw-in-js/twind do?

Twind is a utility-first styling library and JavaScript CSS-in-JS engine. It functions as a Tailwind CSS runtime compiler that transforms utility classes into CSS within the browser, as well as a build tool for extracting static CSS to improve page load performance.

What are the main features of tw-in-js/twind?

The main features of tw-in-js/twind are: Tailwind CSS Integration, Runtime Utility Compilers, Utility Class Conversions, Runtime JIT Generators, Runtime, JavaScript Style Engines, Utility-First Styling, CSS Build Tools.

What are some open-source alternatives to tw-in-js/twind?

Open-source alternatives to tw-in-js/twind include: ben-rogerson/twin.macro — twin.macro is a build-time style compiler and utility-first styling tool that converts Tailwind CSS utility classes… tailwindlabs/tailwindcss-typography — Tailwind CSS Typography is a plugin for the Tailwind CSS framework that provides hand-tuned typographic defaults for… vadimdemedes/tailwind-rn — tailwind-rn is a utility-first mobile UI kit and integration framework that allows the use of Tailwind CSS utility… gluestack/gluestack-ui — gluestack-ui is a cross-platform React component library built with Tailwind CSS. It provides over 30 pre-built,… emotion-js/emotion — This project is a styling library and framework designed for component-based architectures, enabling developers to… cssinjs/jss — jss is a CSS-in-JS styling library and dynamic style engine that allows for the authoring of CSS properties as…