# stichwind

> ![Stichwind](https://github.com/vinpac/stichwind/blob/main/docs/static/img/banner.jpg?raw=true)

Latest version **0.1.1** (published 2022-04-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install stichwind
pnpm add stichwind
yarn add stichwind
bun add stichwind
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.1 |
| Published | 2022-04-17 |
| First published | 2022-04-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=12 |
| Dependencies | 0 |
| Unpacked size | 53 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Vinicius Pacheco |
| Maintainers | vinpac |

## Links

- npm: https://www.npmjs.com/package/stichwind
- npm.io page: https://npm.io/package/stichwind

## Recent versions

- 0.1.1 (latest) — 2022-04-17
- 0.1.0 — 2022-04-17

## README

![Stichwind](https://github.com/vinpac/stichwind/blob/main/docs/static/img/banner.jpg?raw=true)

# Stichwind

Stitchwind is a **1.2kB**, Simple Styling Library that helps you set **when** a className should be applied to a component.

By providing Powerful Types through forward declarations, Stichwind aims to be simple yet powerful by limiting itself to be a organizer API, letting Tailwind handle the styling part.

# Install

Install Stichwind from your terminal via npm or yarn.

```bash
# With npm
npm install stichwind

# With yarn
yarn add stichwind
```

### Import it

Import `styled` from `stichwind`.

```js
import { styled } from 'stichwind';
```

You can also import `w`, which works as an alias for `styled`

```typescript
import { w } from 'stichwind';
```

### Use it

Use the `w` function to create a component and add styles to it.

```jsx line=3-11
import { w } from '@wind/react';

const Button = w.button('text-sm', {
  variants: {
    color: {
      red: 'text-red-500',
      blue: 'text-blue-500',
    },
    size: {
      small: 'text-sm',
      large: 'text-lg',
    },
  },
  defaultProps: {
    size: 'small',
  },
});
type ButtonProps = W.infer<typeof Button>;
// { color: 'red' | 'blue', size?: 'small' | 'large' }
```

---
_Source: https://npm.io/package/stichwind · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._