variantwind

variantwind

Most elegant way to work with TailwindCSS variants in Vue

Use as directive or binding, supports both Vue 2 & 3, also supports PurgeCSS🔥🔥

Installation

yarn add variantwind # or `npm i variantwind`

CDN

<script src"https://unpkg.com/variantwind"></script>

Usage

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

const app = createApp(App);

/**
 * Directives:  v-variantwind
 * Methods:     $variantwind
 */
app.use(Variantwind, "variantwind");

/* ===== OR =====*/

/**
 * Directives:  v-variantwind v-dark
 * Methods:     $variantwind $dark
 *
 * Note: This plugin doesn't provide dark mode functionality. This is just a use case example.
 */
app.use(Variantwind, ["variantwind", "dark"]);

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
  >
    Middleware
  </div>

  <div
    v-variantwind="'w-full bg-red-500 md:{w-1/3 bg-blue-500} lg:{w-1/4 bg-yellow-500 hover:bg-yellow-900}'"
  >
    Directive binding
  </div>

  <div
    v-variantwind="'w-full bg-red-500 md:{w-1/3 bg-blue-500} lg:{w-1/4 bg-yellow-500 hover:bg-yellow-900}'"
    v-dark="'dark:{bg-black-900 text-white}'"
  >
    Multiple directives
  </div>

  <div
    :class="variantwind('lg:{w-1/4 bg-yellow-500 hover:bg-yellow-900}')"
    :class="$variantwind('lg:{w-1/4 bg-yellow-500 hover:bg-yellow-900}')"
  >
    Local and Global Class binding
  </div>

  <div
    class="w-full bg-red-500 md:{w-1/3 bg-blue-500}"
    :class="$variantwind('lg:{w-1/4 bg-green-500 hover:bg-green-900}')"
    v-variantwind="'xl:{w-1/4 bg-yellow-500 hover:bg-yellow-900}'"
    v-dark="'dark:{bg-black-900 text-white}'"
  >
    You can use all of them together.
  </div>
</template>

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

  export default {
    // Pass function to template for local class binding usage
    methods: { variantwind },
  };
</script>

TailwindCSS Purge

// 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 sibbng