Vue Tachyons Directives Plugin

Appearance

Widths ​

The widths module contains both a five-step width scale based on powers of two as well as a series of percentage values that can be combined with floats for an infinitely nestable and fully responsive grid system.

Directive ​

Use v-w directive to set the width value.

vue
<template>
  <div v-w.100>
    <span>100% width</span>
  </div>
</template>

Width Scale ​

v-w="1"
v-w="2"
v-w="3"
v-w="4"
v-w="5"

Width Percentages ​

v-w.10
v-w.20
v-w.25
v-w.30
v-w.33
v-w.third
v-w.34
v-w.40
v-w.50
v-w.60
v-w.two-thirds
v-w.75
v-w.80
v-w.90
v-w.100
v-w.auto

Reference ​