Beamwind

a collection of packages to compile [Tailwind CSS] like shorthand syntax into CSS at runtime

Read the docs | API | Change Log | ⚡️ Demo

---

This library takes inspiration from [Tailwind CSS] (see differences), [Oceanwind] (see differences) and [Otion] to provide means of efficiently generating mostly atomic styles from shorthand syntax and appending them to the DOM at runtime.

beamwind uses the tailwind default theme (@beamwind/preset-tailwind) and an opinionated set of base styles for modern browsers based on Tailwind Preflight (@beamwind/preflight):

import { bw } from 'beamwind'

document.body.className = bw`h-full bg-pink-700 rotate-3 scale-95`

⚡️ Check out the live and interactive demo

As an alternative @beamwind/system is a good start if you prefer a semantic naming scheme in your design system: ⚡️ Demo

For rapid prototyping @beamwind/play is the right choice. It combines @beamwind/preset-tailwind and @beamwind/preset-system with auto-conversion of unknown theme values: ⚡️ Demo

---

<details><summary>Table Of Contents (click to expand)</summary> <!-- prettier-ignore-start --> <!-- START doctoc generated TOC please keep comment here to allow auto update --> <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->

• Key Features
• Backstory
• Usage
• Packages
• Theming
• Dark Mode
• Plugins
• Configuration
• Selector Ordering
• Roadmap
• Tailwind Differences
• Oceanwind Differences
• Browser Support
• Acknowledgements
• Contribute
• License

<!-- END doctoc generated TOC please keep comment here to allow auto update --> <!-- prettier-ignore-end --> </details>

Key Features

• 📖 Supports the vast majority of Tailwind directives outlined in the docs (see differences)
• 🗜 Is smaller than the average purged css file output from the Tailwind compiler
• 🚀 Runtime generation of used styles without a build step or purging
• 💡 Variant and Directive grouping to reduce the overwhelming maze Tailwind sometimes creates
• 🧱 Extendable with plugins
• 💅 Customizable themeing
• 🍱 Reliable selector ordering
• ⏱ Performant runtime characteristics
• 💫 Works without a framework - eg framework agnostic
• ⚠️ Warns the developer when a unrecognized directive is used

Beamwind: a wind blowing against a vessel from a direction at right angles to its keel for optimal speed

Backstory

Design systems embrace a component-oriented mindset. Inspired by [Tailwind CSS], utility classes provide reusable styles with no unwanted side-effects. However, they have to be generated upfront.

Atomicity generalizes the former concept by instantiating style rules on demand. Serving as a solid foundation for constraint-based layouts, atomic CSS-in-JS has come to fluorish at scale.

Usage

The following code examples will use beamwind. But the API is the same for all packages.

To use the library, first import the module then invoke the bw ex