wrapn v0.2.1

⛸️ 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...