0.13.0 • Published 3 years ago
variantwind v0.13.0
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
0.13.0
3 years ago
0.12.1
4 years ago
0.12.0
4 years ago
0.11.2
4 years ago
0.11.0
4 years ago
0.11.1
4 years ago
0.10.2
4 years ago
0.10.1
4 years ago
0.10.0
4 years ago
0.9.2
4 years ago
0.9.1
4 years ago
0.9.0
4 years ago
0.8.3
4 years ago
0.8.2
4 years ago
0.8.1
4 years ago
0.8.0
4 years ago
0.7.1
4 years ago
0.7.0
4 years ago
0.6.6
4 years ago
0.6.3
4 years ago
0.6.2
4 years ago
0.6.5
4 years ago
0.6.4
4 years ago
0.6.1
4 years ago
0.6.0
4 years ago
0.4.4
4 years ago
0.5.0
4 years ago
0.4.1
4 years ago
0.4.3
4 years ago
0.5.1
4 years ago
0.4.2
4 years ago
0.3.2
4 years ago
0.4.0
4 years ago
0.3.4
4 years ago
0.3.3
4 years ago
0.3.0
4 years ago
0.3.1
4 years ago
0.2.1
4 years ago
0.2.0
4 years ago
0.1.1
4 years ago
0.1.0
4 years ago