https://github.com/kimuraz/v-tw

TailwindCSS on directives for you Vue application
https://github.com/kimuraz/v-tw

css directives tailwindcss vuejs

Last synced: 1 day ago
JSON representation

TailwindCSS on directives for you Vue application

• Host: GitHub
• URL: https://github.com/kimuraz/v-tw
• Owner: kimuraz
• Created: 2020-11-12T21:32:05.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2021-01-30T20:50:49.000Z (about 4 years ago)
• Last Synced: 2025-01-19T03:11:12.319Z (24 days ago)
• Topics: css, directives, tailwindcss, vuejs
• Language: JavaScript
• Homepage:
• Size: 196 KB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

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.

## Motivation

I wanted to use TailwindCSS to make my own UI lib inside of an existing project, but it would make me develop a lot of custom components, then I though that if I could just insert tailwind classes on "native" HTML tags it would awesome.

So, if you're developing an UI library using TailwindCSS and Vue or just want some style to your Vue project without an UI component framework, this might be useful for you.

## 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-directives';

Vue.use(VTW, {

  tw: {

    button: {

      classes: 'bg-teal-300 hover:bg-teal-400 text-white py-2 px-3',

    }

  },

  card: {

      classes: 'bg-gray-100 rounded-sm p-2',

      modifiers: {

          green: 'bg-green-200',

          bordered: 'border border-gray-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

```

  

  Default button

export default {

  name: 'App',

};

```

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

```

  
A custom card


export default {

  name: 'App',

};

```

### Demo

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