Vue Tachyons Directives Plugin

Appearance

Text Align ​

Designing for readability across infinite screen-sizes often times requires setting elements to have different text-alignments across breakpoints.

These are simple utilities for setting text-alignment to the left, right, or center of an element.

Aligned Left ​

vue
<template>
  <p v-tl>Aligned Left</p>
</template>

Aligned Left

Aligned Right ​

vue
<template>
  <p v-tr>Aligned Right</p>
</template>

Aligned Right

Aligned Center ​

vue
<template>
  <p v-tc>Aligned Center</p>
</template>

Aligned Center

Justified Alignment ​

vue
<template>
  <p v-tj>Justified Alignment</p>
</template>

justified—text is aligned along the left margin, and letter- and word-spacing is adjusted so that the text falls flush with both margins, also known as fully justified or full justification;

Reference ​