# tw-in-js/twind

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/tw-in-js-twind).**

3,930 stars · 103 forks · JavaScript · mit

## Links

- GitHub: https://github.com/tw-in-js/twind
- Homepage: https://twind.style
- awesome-repositories: https://awesome-repositories.com/repository/tw-in-js-twind.md

## Topics

`css` `css-in-js` `tailwind` `tailwind-in-js` `tailwindcss`

## Description

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.

## Tags

### User Interface & Experience

- [Tailwind CSS Integration](https://awesome-repositories.com/f/user-interface-experience/css-component-libraries/tailwind-css-integration.md) — Implements a Tailwind-compatible styling system for use within JavaScript frameworks and component libraries.
- [Runtime Utility Compilers](https://awesome-repositories.com/f/user-interface-experience/css-component-libraries/tailwind-css-integration/runtime-utility-compilers.md) — Transforms Tailwind CSS utility classes into CSS at runtime in the browser without a build step.
- [Utility Class Conversions](https://awesome-repositories.com/f/user-interface-experience/css-utility-classes/utility-class-conversions.md) — Transforms utility-first CSS classes into native styles during runtime execution.
- [Runtime JIT Generators](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/component-styling-tools/component-styling/css-in-js-implementations/css-in-js-compilers/runtime-jit-generators.md) — Implements just-in-time CSS generation by analyzing DOM class names at runtime.
- [Runtime](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/styling-architectures/styling-systems/class-based-styling/css-styling/atomic-css-generators/runtime.md) — Transforms utility-first class names into CSS at runtime to enable styling without a build step. ([source](https://cdn.jsdelivr.net/gh/tw-in-js/twind@main/README.md))
- [JavaScript Style Engines](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/styling-architectures/styling-systems/class-based-styling/css-styling/javascript-style-engines.md) — Functions as a JavaScript engine that converts utility strings and theme configurations into optimized CSS.
- [Utility-First Styling](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/styling-architectures/styling-systems/class-based-styling/utility-first-styling.md) — Provides a utility-first styling workflow using atomic classes and customizable theme presets.
- [Theme Value Lookups](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/theme-systems/javascript-theme-accessors/object-based-theme-systems/theme-value-lookups.md) — Resolves style properties by mapping utility tokens to values within a central JavaScript theme object.
- [Utility Interpretation Extensions](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/component-styling-tools/component-styling/styling-extensions/utility-interpretation-extensions.md) — Allows modifying utility class interpretation through custom themes, variants, and language extensions. ([source](https://cdn.jsdelivr.net/gh/tw-in-js/twind@main/README.md))
- [Static Style Extraction](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/styling-architectures/styling-systems/build-time-style-processing/static-style-extraction.md) — Generates static CSS files during the build process to eliminate runtime overhead and improve load times. ([source](https://twind.style))
- [Style Sheet Injection](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/styling-architectures/styling-systems/class-based-styling/css-styling/style-sheet-injection.md) — Provides a mechanism to inject generated CSS directly into the document head independently of any JS framework.
- [Theme Customization](https://awesome-repositories.com/f/user-interface-experience/visual-theme-configurations/visual-themes/theme-customization.md) — Enables the definition of custom themes, variants, and rules to meet specific design requirements. ([source](https://twind.style))

### Web Development

- [CSS Build Tools](https://awesome-repositories.com/f/web-development/web-infrastructure-deployment/asset-management-build-tools/style-optimization-tools/css-build-tools.md) — Scans source files at build time to extract utility classes into static CSS files for improved performance.

### Software Engineering & Architecture

- [Styling](https://awesome-repositories.com/f/software-engineering-architecture/project-management-governance/project-management/project-lifecycle-management/project-configuration-presets/configuration-presets/styling.md) — Uses a modular system of predefined configuration objects to extend the styling language and themes.