@beamwind/preset-play NPM

@beamwind/preset-play

rapid prototyping for beamwind using auto-conversion of values

Read the docs | API | Change Log

This is a only a preset. @beamwind/play provides a ready to use bw export. This preset should be used for prototyping only as it usually prevents a consistent UI experience.

Installation

npm install @beamwind/preset-play

Usage

Please refer to the main documentation for further information.

import { setup, warn } from '@beamwind/core'
import play from '@beamwind/preset-play'

// Use warn as fallback if no conversion could be made
setup(play(warn))

See preset-play/src/play.ts which conversions are applied.

Most tailwind classes use a deterministic number calculation scheme (for example width). If beamwind detects a number in a directive and there is not mapped value in the theme it uses the following algorithm to generate a CSS value which aligns with the tailwind rules for that directive:

decimal numbers (2 or 1.5) are divided by a divisor and a unit is added (w-2.5 becomes width: 0.625rem;)
fractions (1/6 or 3/5) are evaluated and % is used as a unit (w-4/5 becomes width: 80%;)
most directives are lenient when a value is not found in the theme:
- decimal numbers (2 or 1.5) are divided by a divisor and a unit is added (w-2.5 becomes width: 0.625rem;)
- fractions (1/6 or 3/5) are evaluated and % is added as a unit (w-4/5 becomes width: 80%;)
- color names (text-rebeccapurple) and hex colors (text-#009900)
bg-gradient accepts additionally to the side-or-corner parameter (bg-gradient-to-tr) an angle or mixed parameters:
- bg-gradient - defaults to 180deg eg to bottom
- bg-gradient-45
- bg-gradient-0.25turn
- bg-gradient-to-bottom-left

Contribute

Thanks for being willing to contribute!

This project is free and open-source, so if you think this project can help you or anyone else, you may star it on GitHub. Feel free to open an issue if you have any idea, question, or you've found a bug.

Working on your first Pull Request? You can learn how from this free series How to Contribute to an Open Source Project on GitHub

We are following the Conventional Commits convention.