# @dblechoc/twind-forms

> A twind extension that provides a basic reset for form styles that makes form elements easy to override with utilities.

Latest version **0.1.32** (published 2021-02-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install @dblechoc/twind-forms
pnpm add @dblechoc/twind-forms
yarn add @dblechoc/twind-forms
bun add @dblechoc/twind-forms
```

## 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.1.32 |
| Published | 2021-02-13 |
| First published | 2021-02-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=10.13 |
| Dependencies | 0 |
| Unpacked size | 77.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 10 |
| Maintainers | dblechoc |
| Keywords | twind, extension, twind-extension, plugin, twind-plugin, tailwind, tw-in-js, tailwind-in-js |

## Links

- npm: https://www.npmjs.com/package/@dblechoc/twind-forms
- Repository: https://github.com/tw-in-js/twind-forms
- Homepage: https://twind.dev
- Issues: https://github.com/tw-in-js/twind-forms/issues
- npm.io page: https://npm.io/package/@dblechoc/twind-forms

## Alternatives

- [@sveltejs/kit](https://npm.io/package/@sveltejs/kit.md) — 2.2M weekly downloads
- [@atlaskit/theme](https://npm.io/package/@atlaskit/theme.md) — 402.0K weekly downloads
- [@tangle-network/brand](https://npm.io/package/@tangle-network/brand.md) — 10.0K weekly downloads
- [seneca](https://npm.io/package/seneca.md) — 7.4K weekly downloads
- [@bsb/base](https://npm.io/package/@bsb/base.md) — 7.2K weekly downloads

## Recent versions

- 0.1.32 (latest) — 2021-02-13
- 0.1.31 — 2021-02-13
- 0.1.30 — 2021-02-12

## README

# @twind/forms

A [Twind](https://twind.dev) extension that provides a basic reset for form styles that makes form elements easy to override with utilities.

[![MIT License](https://flat.badgen.net/github/license/tw-in-js/twind-forms)](https://github.com/tw-in-js/twind-forms/blob/main/LICENSE)
[![Latest Release](https://flat.badgen.net/npm/v/@twind/forms?icon=npm&label&cache=10800&color=blue)](https://www.npmjs.com/package/@twind/forms)
[![Github](https://flat.badgen.net/badge/icon/tw-in-js%2Ftwind-forms?icon=github&label)](https://github.com/tw-in-js/twind-forms)
[![Module Size](https://flat.badgen.net/badgesize/brotli/https:/unpkg.com/@twind/forms/forms.js?icon=jsdelivr&label&color=blue&cache=10800)](https://unpkg.com/@twind/forms/forms.js 'brotli module size')
[![Typescript](https://flat.badgen.net/badge/icon/included?icon=typescript&label)](https://unpkg.com/browse/@twind/forms/forms.d.ts)

> Based on [@tailwindcss/forms](https://github.com/tailwindlabs/tailwindcss-forms) and [with form classes](https://github.com/tailwindlabs/tailwindcss-forms/pull/39).

## Installation

Install from npm:

```sh
# Using npm
npm install @twind/forms

# Using Yarn
yarn add @twind/forms
```

## Usage as Directive

```js
import { forms } from '@twind/forms'

document.body.innerHTML = `
  <form class="${tw`max-w-xs mx-auto ${forms}`}">
    <!-- ... -->
  </form>
`
```

## Usage as Plugin

```js
import { forms } from '@twind/forms'

setup({
  plugins: {
    forms,
  },
})
```

```html
<form class="max-w-xs mx-auto forms">
  <!-- ... -->
</form>
```

## Usage as Preflight

Add to the `preflight` of your setup call:

```js
import { withForms } from '@twind/forms'

setup({
  preflight: withForms(),
})

setup({
  preflight: withForms({
    /* custom preflight */
  }),
})

setup({
  preflight: withForms((preflight, context) => {
    /* custom preflight */
  }),
})
```

## Usage as form field Directive


```js
import { formCheckbox, formField, formFile, formInput, formRadio, formSelect, formTextarea } from '@twind/forms'

document.body.innerHTML = `
  <input class="${tw`${formInput}`}">
`
```

## Usage as form field Plugins

```js
import { forms } from '@twind/forms'

setup({
  plugins: {
    'form-checkbox': formCheckbox,
    'form-field': formField,
    'form-file': formFile,
    'form-input': formInput,
    'form-radio': formRadio,
    'form-select': formSelect,
    'form-textarea': formTextarea,
  },
})
```

```html
<input class="${tw`form-input`}">
```

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