variantwind

Most elegant way to work with TailwindCSS variants in Vue 3

Use as directive or binding, also supports PurgeCSS 🔥🔥

Installation

yarn add variantwind

Usage

Directive

import { createApp } from "vue";
import App from "./App.vue";
import { directive } from "variantwind";

const app = createApp(App);

app.directive("variantwind", directive);

app.mount("#app");

Or register as a Plugin

import { createApp } from "vue";
import App from "./App.vue";
import Variantwind from "variantwind";

const app = createApp(App);

// Second argument is directive name (optional) default: "variantwind"
app.use(Variantwind, "variantwind");

app.mount("#app");

<template>
  <div
    class="w-full bg-red-500 md:{w-1/3 bg-blue-500} lg:{w-1/4 bg-yellow-500 hover:bg-yellow-900}"
    v-variantwind
  >
    Hello world
  </div>
</template>

Binding

<template>
  <div
    :class="variantwind('w-full bg-red-500 md:{w-1/3 bg-blue-500} lg:{w-1/4 bg-yellow-500 hover:bg-yellow-900}')"
  >
    Hello world
  </div>
</template>

<script>
  import { variantwind } from "variantwind";

  export default {
    methods: { variantwind },
  };
</script>

Tailwind Purge Setup

// tailwind.config.js
const { extractor } = require("variantwind");

module.exports = {
  purge: {
    content: [
      "./index.html", 
      "./src/**/*.vue", 
      "./src/**/*.js"
    ],
    options: {
      extractors: [
        {
          extractor,
          extensions: ["vue"],
        },
      ],
    },
  },
};

License

MIT License © 2020 Sibbngheid