tailwindcss-vue

The package it easy to use Tailwind CSS with Vue.

Without this package:

<div class="bg-red-500 hover:bg-purple hover:text-white sm:bg-green-500 md:bg-blue-500 md:w-3/4 lg:bg-pink-500 lg:w-2/4 xl:bg-teal-500 xl:w-1/4">
  Text
</div>

With this package:

<div
  :class="$tailwind({
    default: 'bg-red-500',
    hover: 'bg-purple text-white',
    sm: 'bg-green-500',
    md: 'bg-blue-500 w-3/4',
    lg: 'bg-pink-500 w-2/4',
    xl: 'bg-teal-500 w-1/4'
  })"
>
  Text
</div>

Installation

yarn add tailwindcss-vue
# Or 
npm install tailwindcss-vue

Get started

1. Add Vue.use for the plugin.

import { TailwindCssVue } from 'tailwindcss-vue'

Vue.use(TailwindCssVue)

2. Use in your components. Here is a complete example:

<template>
  <div>
    <div class="bg-red-500 hover:bg-purple hover:text-white sm:bg-green-500 md:bg-blue-500 md:w-3/4 lg:bg-pink-500 lg:w-2/4 xl:bg-teal-500 xl:w-1/4">
      Text
    </div>
  
    <div
      :class="$tailwind({
        default: 'bg-red-500',
        hover: 'bg-purple text-white',
        sm: 'bg-green-500',
        md: 'bg-blue-500 w-3/4',
        lg: 'bg-pink-500 w-2/4',
        xl: 'bg-teal-500 w-1/4'
      })"
    >
      Text
    </div>
  </div>
</template>

There is another use case with the script tag (CDN version of package):

<script src="https://unpkg.com/tailwindcss-vue"></script>

Or

<script src="https://cdn.jsdelivr.net/npm/tailwindcss-vue"></script>

Write your suggestions for improvement, I will be glad to read!