Vue Tachyons Directives Plugin

Appearance

Links ​

Tachyons doesn’t style links by default, but provides the necessary classes to generate a wide variety of link styles.

To keep the default underline, but animate the color transition, combine classes from skins and skins-pseudo.

vue
<template>
  <a v-blue v-hover.orange v-link v-underline href="#">
    link text
  </a>
</template>
link text

Underline on Hover ​

To add an underline on hover and focus, use the v-underline.hover directive.

vue
<template>
  <a v-link v-red v-underline.hover href="#">
    link text
  </a>
</template>
link text

Dim on Hover ​

To dim a link on hover, add the v-dim directive.

vue
<template>
  <a v-dim href="#">link text</a>
</template>
link text

Add Background Color on Hover ​

You can add any background color from the skins-pseudo module.

vue
<template>
  <a v-black v-hover.bg-light-blue v-link href="#">
    link text
  </a>
</template>
link text

Animate Background Color on Hover ​

You can add any background color from the skins-pseudo module.

vue
<template>
  <a v-bg.animate v-black v-hover.bg-light-blue v-link href="#">
    link text
  </a>
</template>
link text

Colors ​

Below are examples of combining each color in the skins module with the dim class.

black<a v-link v-dim v-black href="#">black</a>
near-black<a v-link v-dim v-near.black href="#">near-black</a>
dark-gray<a v-link v-dim v-dark.gray href="#">dark-gray</a>
mid-gray<a v-link v-dim v-mid.gray href="#">mid-gray</a>
gray<a v-link v-dim v-gray href="#">gray</a>
black-90<a v-link v-dim v-black.90 href="#">black-90</a>
black-80<a v-link v-dim v-black.80 href="#">black-80</a>
black-70<a v-link v-dim v-black.70 href="#">black-70</a>
black-60<a v-link v-dim v-black.60 href="#">black-60</a>
black-50<a v-link v-dim v-black.50 href="#">black-50</a>
navy<a v-link v-dim v-navy href="#">navy</a>
dark-blue<a v-link v-dim v-dark.blue href="#">dark-blue</a>
blue<a v-link v-dim v-blue href="#">blue</a>
dark-red<a v-link v-dim v-dark.red href="#">dark-red</a>
silver<a v-link v-dim v-silver href="#">silver</a>
light-silver<a v-link v-dim v-light.silver href="#">light-silver</a>
moon-gray<a v-link v-dim v-moon-gray href="#">moon-gray</a>
light-gray<a v-link v-dim v-light.gray href="#">light-gray</a>
near-white<a v-link v-dim v-near.white href="#">near-white</a>
white<a v-link v-dim v-white href="#">white</a>
white-90<a v-link v-dim v-white.90 href="#">white-90</a>
white-80<a v-link v-dim v-white.80 href="#">white-80</a>
white-70<a v-link v-dim v-white.70 href="#">white-70</a>
white-60<a v-link v-dim v-white.60 href="#">white-60</a>
white-50<a v-link v-dim v-white.50 href="#">white-50</a>
red<a v-link v-dim v-red href="#">red</a>
light-red<a v-link v-dim v-light.red href="#">light-red</a>
orange<a v-link v-dim v-orange href="#">orange</a>
gold<a v-link v-dim v-gold href="#">gold</a>
yellow<a v-link v-dim v-yellow href="#">yellow</a>
light-yellow<a v-link v-dim v-light.yellow href="#">light-yellow</a>
purple<a v-link v-dim v-purple href="#">purple</a>
light-purple<a v-link v-dim v-light.purple href="#">light-purple</a>
dark-pink<a v-link v-dim v-dark.pink href="#">dark-pink</a>
hot-pink<a v-link v-dim v-hot.pink href="#">hot-pink</a>
pink<a v-link v-dim v-pink href="#">pink</a>
light-pink<a v-link v-dim v-light.pink href="#">light-pink</a>
dark-green<a v-link v-dim v-dark.green href="#">dark-green</a>
green<a v-link v-dim v-green href="#">green</a>
light-green<a v-link v-dim v-light.green href="#">light-green</a>
light-blue<a v-link v-dim v-light.blue href="#">light-blue</a>
lightest-blue<a v-link v-dim v-lightest-blue href="#">lightest-blue</a>
washed-blue<a v-link v-dim v-washed.blue href="#">washed-blue</a>
washed-green<a v-link v-dim v-washed.green href="#">washed-green</a>
washed-yellow<a v-link v-dim v-washed.yellow href="#">washed-yellow</a>
washed-red<a v-link v-dim v-washed.red href="#">washed-red</a>

Reference ​