wrapn

Wrapn

Create the fastest components using Tailwind.

Autocomplete provides a joyful experience.

Only an HTML element, but a styled one.

Usage

Wrapping HTML elements

import { wrapn } from 'wrapn'

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

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

Wrapping components

// 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
`

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:

"editor.quickSuggestions": {
    "strings": true
},
    
"tailwindCSS.experimental.classRegex": [
    "wrapn\\(.*?\\)`([^`]*)"
],

• Done! You can now use Tailwind CSS IntelliSense.

Installation

npm install wrapn

or

yarn add wrapn

or

pnpm add wrapn

Development

Clone the repo

git clone https://github.com/wrapn/wrapn.git

Install the dependencies

yarn install

Made with by Wrapn contributors...