/ Css

Most elegant way to work with TailwindCSS variants in Vue 3

Most elegant way to work with TailwindCSS variants in Vue 3

variantwind

Most elegant way to work with TailwindCSS variants in Vue 3.

Use as directive or binding, also supports PurgeCSS

644 Bytes Gzipped

carbon

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);

// You can register it multiple times!
app.directive("dark", directive);

/**
 *  Or register as a Plugin
 *  Second argument is optional directive name
 *
 *  import Variantwind from "variantwind";
 *  app.use(Variantwind, "variantwind" );
 *
 *  // To register multiple directives pass array:
 *  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
    :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}')"
  >
    Class 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="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 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"],
        },
      ],
    },
  },
};

GitHub

Comments