Text Config Module

The Text Config Module holds your application's default/prototypal Tailwind CSS classes for elements/components containing rendered text string in your application, excluding color and color palette classes (see Palette Config Modules for more info about palette modules).

app.vv.ts Use

You'll usually work with the Text Config Module after it's already been merged into VueVentus VvConfig data.

Here's what that generally looks like in practice in a real world app context:

javascript

// ./src/app.vv.ts

import { VvConfig } from '@obewds/vueventus'
import type { ConfigVv } from '@obewds/vueventus'

let appVv: ConfigVv = VvConfig

appVv.text.someProperty = 'some-value'

// ...

export default appVv

Import

However, if you need to import the compiled library version of the Text Config Module, you can use:

javascript

import { Text } from '@obewds/vueventus'

Text.align

Type: String
Default: ""

The Text.align parameter is meant to isolate CSS text alignment characteristics and requirements for an application's text.

AVOID: COLOR & SIZE

Atomic classes for this property should avoid using classes related to characteristics like color and size, which are already abstracted in VueVentus.

Example

javascript

// ./src/app.vv.ts
appVv.text.align = '...'

Text.decoration

Type: String
Default: ""

The Text.decoration parameter is meant to isolate CSS text decoration characteristics and requirements for an application's text.

AVOID: COLOR & SIZE

Atomic classes for this property should avoid using classes related to characteristics like color and size, which are already abstracted in VueVentus.

Example

javascript

// ./src/app.vv.ts
appVv.text.decoration = '...'

Text.family

Type: String
Default: ""

The Text.family parameter is meant to isolate CSS text family characteristics and requirements for an application's text.

AVOID: COLOR & SIZE

Atomic classes for this property should avoid using classes related to characteristics like color and size, which are already abstracted in VueVentus.

Example

javascript

// ./src/app.vv.ts
appVv.text.family = '...'

Text.lineHeight

Type: String
Default: ""

The Text.lineHeight parameter is meant to isolate CSS text line height characteristics and requirements for an application's text.

AVOID: COLOR & SIZE

Atomic classes for this property should avoid using classes related to characteristics like color and size, which are already abstracted in VueVentus.

Example

javascript

// ./src/app.vv.ts
appVv.text.lineHeight = '...'

Text.sizes

Type: Object

Text.sizes Properties	Text.sizes Prop Values
`"5xs"`	`"text-5xs"`
`"4xs"`	`"text-4xs"`
`"3xs"`	`"text-3xs"`
`"2xs"`	`"text-2xs"`
`"xs"`	`"text-xs"`
`"sm"`	`"text-sm"`
`"md"`	`"text-base"`
`"lg"`	`"text-lg"`
`"xl"`	`"text-xl"`
`"2xl"`	`"text-2xl"`
`"2xl"`	`"text-3xl"`
`"4xl"`	`"text-4xl"`
`"5xl"`	`"text-5xl"`
`"6xl"`	`"text-6xl"`
`"7xl"`	`"text-7xl"`
`"8xl"`	`"text-8xl"`
`"9xl"`	`"text-9xl"`
`"10xl"`	`"text-10xl"`
`"11xl"`	`"text-11xl"`
`"12xl"`	`"text-12xl"`

Examples

javascript

// ./src/app.vv.ts
appVv.text.sizes = {
     '5xs': '',
     '4xs': '',
     '3xs': '',
     '2xs': '',
      'xs': '',
      'sm': '',
      'md': '',
      'lg': '',
      'xl': '',
     '2xl': '',
     '3xl': '',
     '4xl': '',
     '5xl': '',
     '6xl': '',
     '7xl': '',
     '8xl': '',
     '9xl': '',
    '10xl': '',
    '11xl': '',
    '12xl': '',
}

javascript

// ./src/app.vv.ts
appVv.text.sizes['5xs']  = ''
appVv.text.sizes['4xs']  = ''
appVv.text.sizes['3xs']  = ''
appVv.text.sizes['2xs']  = ''
appVv.text.sizes['xs']   = ''
appVv.text.sizes['sm']   = ''
appVv.text.sizes['md']   = ''
appVv.text.sizes['lg']   = ''
appVv.text.sizes['xl']   = ''
appVv.text.sizes['2xl']  = ''
appVv.text.sizes['3xl']  = ''
appVv.text.sizes['4xl']  = ''
appVv.text.sizes['5xl']  = ''
appVv.text.sizes['6xl']  = ''
appVv.text.sizes['7xl']  = ''
appVv.text.sizes['8xl']  = ''
appVv.text.sizes['9xl']  = ''
appVv.text.sizes['10xl'] = ''
appVv.text.sizes['11xl'] = ''
appVv.text.sizes['12xl'] = ''

Text.smoothing

Type: String
Default: "subpixel-antialiased"

The Text.smoothing parameter is meant to isolate CSS text smoothing/aliasing characteristics and requirements for an application's text.

Example

javascript

// ./src/app.vv.ts
appVv.text.smoothing = '...'

Text.spacing

Type: String
Default: ""

The Text.spacing parameter is meant to isolate CSS text spacing characteristics and requirements for an application's text.

Example

javascript

// ./src/app.vv.ts
appVv.text.spacing = '...'

Text.weight

Type: String
Default: ""

The Text.weight parameter is meant to isolate CSS text weight characteristics and requirements for an application's text.

Example

javascript

// ./src/app.vv.ts
appVv.text.weight = '...'

Text.wordBreak

Type: String
Default: ""

The Text.wordBreak parameter is meant to isolate CSS text flow word line break characteristics and requirements for an application's text.

Example

javascript

// ./src/app.vv.ts
appVv.text.wordBreak = '...'

Text.base()

Returns: String
Default: "subpixel-antialiased"

The Text.base() method returns a joined String of the atomic classes within the various base properties of the Text Config Module object.

Example

html

<!-- ./src/components/SomeComponent.vue -->

<script setup lang="ts">

    import appVv from '../app.vv'
    
</script>

<template>

    <div :class="appVv.text.base()">
        Base styled text
    </div>

</template>

Text.classes()

Returns: String
Default: "subpixel-antialiased text-base"

The Text.classes() method returns a joined String of the atomic classes within the various base properties of the Text Config Module object using the Text.base() method under the hood.

However, the Text.classes() method also returns Text.getSizeClasses() method classes in addition to the base property classes/values, which augments the returned value based on the optional argument value passed into the method.

Arguments

Args	Type	Status	Description
sizesKey	`String`	Optional	Property name/key of an Text.sizes object

The applicable values for the sizesKey argument are set via the Text.sizes property names/keys and atomic class values.

Examples

html

<!-- ./src/components/SomeComponent.vue -->

<script setup lang="ts">

    import appVv from '../app.vv'
    
</script>

<template>

    <div :class="appVv.text.classes()">
        Regular sized text
    </div>

    <div :class="appVv.text.classes('lg')">
        Large sized text
    </div>

</template>

Text.getSizeClasses()

Returns: String
Default: "text-base"

The Text.getSizeClasses() method returns text size related classes based on the optional argument value passed into the method. These size related classes come from the Text.sizes object property names/keys and values (of atomic classes).

Arguments

Args	Type	Status	Description
sizesKey	`String`	Optional	Property name/key of an Text.sizes object

The applicable values for the sizesKey argument are set via the Text.sizes property names/keys and atomic class values.

Examples

html

<!-- ./src/components/SomeComponent.vue -->

<script setup lang="ts">

    import appVv from '../app.vv'
    
</script>

<template>

    <div :class="appVv.text.getSizeClasses()">
        Regular sized text
    </div>

    <div :class="appVv.text.getSizeClasses('sm')">
        Small sized text
    </div>

</template>

Module Code

// ./src/configs/Text.ts

import type { ConfigText } from '../types/ConfigText'

export default <ConfigText>{
    align: '',
    decoration: '',
    family: '',
    lineHeight: '',
    smoothing: 'subpixel-antialiased',
    spacing: '',
    weight: '',
    wordBreak: '',
    base: function () {
        return [
            this.align,
            this.decoration,
            this.family,
            this.lineHeight,
            this.smoothing,
            this.spacing,
            this.weight,
            this.wordBreak,
        ].join(' ').replace(/\s+/g,' ').trim()
    },
    sizes: {
        '5xs': 'text-5xs',
        '4xs': 'text-4xs',
        '3xs': 'text-3xs',
        '2xs': 'text-2xs',
        'xs': 'text-xs',
        'sm': 'text-sm',
        'md': 'text-base',
        'lg': 'text-lg',
        'xl': 'text-xl',
        '2xl': 'text-2xl',
        '3xl': 'text-3xl',
        '4xl': 'text-4xl',
        '5xl': 'text-5xl',
        '6xl': 'text-6xl',
        '7xl': 'text-7xl',
        '8xl': 'text-8xl',
        '9xl': 'text-9xl',
        '10xl': 'text-10xl',
        '11xl': 'text-11xl',
        '12xl': 'text-12xl',
    },
    getSizeClasses: function (sizesKey) {
        const key = sizesKey && this.sizes[sizesKey] ? sizesKey : 'md'
        return this.sizes[key]
    },
    classes: function (sizesKey) {
        const sizes = sizesKey ? sizesKey : ''
        return [
            this.base(),
            this.getSizeClasses(sizes),
        ].join(' ').replace(/\s+/g,' ').trim()
    },
}

Text Config Module ​

app.vv.ts Use ​

Import ​

Text.align ​

Example ​

Text.decoration ​

Example ​

Text.family ​

Example ​

Text.lineHeight ​

Example ​

Text.sizes ​

Examples ​

Text.smoothing ​

Example ​

Text.spacing ​

Example ​

Text.weight ​

Example ​

Text.wordBreak ​

Example ​

Text.base() ​

Example ​

Text.classes() ​

Arguments ​

Examples ​

Text.getSizeClasses() ​

Arguments ​

Examples ​

Module Code ​

Text Config Module

app.vv.ts Use

Import

Text.align

Example

Text.decoration

Example

Text.family

Example

Text.lineHeight

Example

Text.sizes

Examples

Text.smoothing

Example

Text.spacing

Example

Text.weight

Example

Text.wordBreak

Example

Text.base()

Example

Text.classes()

Arguments

Examples

Text.getSizeClasses()

Arguments

Examples

Module Code