# wrapn

> 🚄 Create amazing React components using Tailwind.

Latest version **0.2.1** (published 2022-09-18) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.1 |
| Published | 2022-09-18 |
| First published | 2022-08-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 9.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | Wrapn Contributors |
| Maintainers | berzan |
| Keywords | react, tailwind, component |

## Links

- npm: https://www.npmjs.com/package/wrapn
- Repository: https://github.com/wrapn/wrapn
- npm.io page: https://npm.io/package/wrapn

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.2.1 (latest) — 2022-09-18
- 0.2.0 — 2022-09-17
- 0.1.3 — 2022-09-11
- 0.1.2 — 2022-08-09
- 0.1.1 — 2022-08-09
- 0.1.0 — 2022-08-05

## README

# ⛸️ Wrapn

⏱️ Create the fastest components using Tailwind.

🎾 Autocomplete provides a joyful experience.

🌯 Only an HTML element, but a styled one.





<br/>






# Usage

## Wrapping HTML elements
```jsx
import { wrapn } from 'wrapn'

// You can wrap any HTML element
const MyButton = wrapn('button')`
    h-12 px-6
    text-white
    bg-blue-500
`
```

```jsx
// Now, you can use it
<MyButton>Click</MyButton>
```


## Wrapping components
```jsx
// Create a base component
const ButtonBase = wrapn('button')`
    h-12 px-4
    rounded-lg
`

// <ButtonPrimary/>
const ButtonPrimary = wrapn(ButtonBase)`
    bg-blue-500
`

// <ButtonSecondary/>
const ButtonSecondary = wrapn(ButtonBase)`
    bg-gray-500
`
```







<br/>








# TailwindCSS Intellisense

 - Install `Tailwind CSS IntelliSense` Extension to VS Code.
 - Press `Ctrl` + `Shift` + `P` keys at the same time.
 - Type `Open User Settings (JSON)` in the search box.
 - Put the content below inside the settings object.
 ### The content:
 ```json
 "editor.quickSuggestions": {
     "strings": true
 },
     
 "tailwindCSS.experimental.classRegex": [
     "wrapn\\(.*?\\)`([^`]*)"
 ],
 ```
 - Done! You can now use Tailwind CSS IntelliSense.





<br/>





# Installation
```
npm install wrapn
```
or
```
yarn add wrapn
```
or
```
pnpm add wrapn
```





<br/>





# Development
Clone the repo
```
git clone https://github.com/wrapn/wrapn.git
```
Install the dependencies
```
yarn install
```

<br/>


## Made with ❤️ by Wrapn contributors...

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