# v-tw-directives

> TailwindCSS on directives for your Vue application

Latest version **0.2.1** (published 2020-11-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install v-tw-directives
pnpm add v-tw-directives
yarn add v-tw-directives
bun add v-tw-directives
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.1 |
| Published | 2020-11-18 |
| First published | 2020-11-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 17.5 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Kimura |
| Maintainers | kimuraz |

## Links

- npm: https://www.npmjs.com/package/v-tw-directives
- Repository: https://github.com/kimuraz/v-tw
- Homepage: https://github.com/kimuraz/v-tw#readme
- Issues: https://github.com/kimuraz/v-tw/issues
- npm.io page: https://npm.io/package/v-tw-directives

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^2.6.12
- [tailwindcss](https://npm.io/package/tailwindcss.md) ^1.9.6

## Recent versions

- 0.2.1 (latest) — 2020-11-18
- 0.2.0 — 2020-11-18
- 0.1.0 — 2020-11-13

## README

# V-TW-Directives

![Tests](https://github.com/kimuraz/v-tw/workflows/Tests/badge.svg?branch=main) ![Lint](https://github.com/kimuraz/v-tw/workflows/Lint/badge.svg?branch=main)

This project enables you to create UI components using tailwindcss, VueJS and bare html elements on templates.

## Installing

To install the package:

```
$ npm install v-tw-directives

# or

$ yarn add v-tw-diretives
```

and add it as a plugin for your Vue project:

```
import VTW from 'v-tw-directive';

Vue.use(VTW, {
  tw: {
    button: {
      classes: 'bg-teal-300 hover:bg-teal-400 text-white py-2 px-3',
    }
  },
  card: {
      classes: 'bg-grey-100 rounded-sm p-2',
      modifiers: {
          green: 'bg-green-200',
          bordered: 'border-grey-200',
      },
  },
});
```

:warning: Make sure to already have install TailwindCSS on your vue project.
(First time, I've used this [tutorial](https://flaviocopes.com/vue-tailwind/))

### Options

The options passed on the installation are entries for the element tags (`button`, `a`, `h1`, etc), it must contain the entry `classes` inside it so the directive will get it and apply properly to the element. For other options, please check the code and tests for now, since it doesn't have documentation yet (sorry).

### Example after installation

```
<template>
  <!-- It will apply: 'bg-teal-300 hover:bg-teal-400 text-white py-2 px-3' to the button -->
  <button v-tw>Default button</button>
</template>

<script>
export default {
  name: 'App',
};
</script>
```

For elements no bound to a tag, here known as "custom", use `v-twc`

```
<template>
  <div v-twc="card">A custom card</div>
</template>

<script>
export default {
  name: 'App',
};
</script>
```

### Demo

Check this repo: https://github.com/kimuraz/v-tw-demo

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