Theme Extenders

VueVentus Theme Extenders are simple and static JSON object data files that contain Tailwind CSS specific property names and values for your app's Tailwind CSS config file.

Theme Extenders themselves extend existing Tailwind CSS defaults, and therefore follow the naming conventions of Tailwind's awesome defaults.

extend.animation.json

To import for use in a Tailwind CSS config file:

const animation = require('./node_modules/@obewds/vueventus/dist/data/extend.animation.json')

The extend.animation.json data module extends a Tailwind config object's theme.extend.animation values with the data below:

{
    "spin-2s": "spin 2s linear infinite",
    "spin-3s": "spin 3s linear infinite",
    "spin-4s": "spin 4s linear infinite",
    "spin-5s": "spin 5s linear infinite",
    "spin-reverse": "spin-reverse 1s linear infinite",
    "spin-reverse-2s": "spin-reverse 2s linear infinite",
    "spin-reverse-3s": "spin-reverse 3s linear infinite",
    "spin-reverse-4s": "spin-reverse 4s linear infinite",
    "spin-reverse-5s": "spin-reverse 5s linear infinite"
}

extend.keyframes.json

To import for use in a Tailwind CSS config file:

const keyframes = require('./node_modules/@obewds/vueventus/dist/data/extend.keyframes.json')

The extend.keyframes.json data module extends a Tailwind config object's theme.extend.keyframes values with the data below:

{
    "spin-reverse": {
        "100%": {
            "transform": "rotate(-360deg)"
        }
    }
}

extend.maxWidth.json

To import for use in a Tailwind CSS config file:

const maxWidth = require('./node_modules/@obewds/vueventus/dist/data/extend.maxWidth.json')

The extend.maxWidth.json data module extends a Tailwind config object's theme.extend.maxWidth values with the data below:

{
    "5": "5%",
    "10": "10%",
    "15": "15%",
    "20": "20%",
    "25": "25%",
    "30": "30%",
    "35": "35%",
    "40": "40%",
    "45": "45%",
    "50": "50%",
    "55": "55%",
    "60": "60%",
    "65": "65%",
    "70": "70%",
    "75": "75%",
    "80": "80%",
    "85": "85%",
    "90": "90%",
    "95": "95%",
    "100": "100%"
}

extend.rotate.json

To import for use in a Tailwind CSS config file:

const rotate = require('./node_modules/@obewds/vueventus/dist/data/extend.rotate.json')

The extend.rotate.json data module extends a Tailwind config object's theme.extend.rotate values with the data below:

{
    "10": "10deg",
    "20": "20deg",
    "30": "30deg",
    "40": "40deg",
    "50": "50deg",
    "60": "60deg",
    "70": "70deg",
    "80": "80deg",
    "90": "90deg",
    "100": "100deg",
    "110": "110deg",
    "120": "120deg",
    "130": "130deg",
    "140": "140deg",
    "150": "150deg",
    "160": "160deg",
    "170": "170deg",
    "180": "180deg",
    "190": "190deg",
    "200": "200deg",
    "210": "210deg",
    "220": "220deg",
    "230": "230deg",
    "240": "240deg",
    "250": "250deg",
    "260": "260deg",
    "270": "270deg",
    "280": "280deg",
    "290": "290deg",
    "300": "300deg",
    "310": "310deg",
    "320": "320deg",
    "330": "330deg",
    "340": "340deg",
    "350": "350deg",
    "360": "360deg"
}

extend.scale.json

To import for use in a Tailwind CSS config file:

const scale = require('./node_modules/@obewds/vueventus/dist/data/extend.scale.json')

The extend.scale.json data module extends a Tailwind config object's theme.extend.scale values with the data below:

{
    "91": "0.91",
    "92": "0.92",
    "93": "0.93",
    "94": "0.94",
    "96": "0.96",
    "97": "0.97",
    "98": "0.98",
    "99": "0.99",
    "101": "1.01",
    "102": "1.02",
    "103": "1.03",
    "104": "1.04",
    "106": "1.06",
    "107": "1.07",
    "108": "1.08",
    "109": "1.09"
}

extend.transitionDuration.json

To import for use in a Tailwind CSS config file:

const transitionDuration = require('./node_modules/@obewds/vueventus/dist/data/extend.transitionDuration.json')

The extend.transitionDuration.json data module extends a Tailwind config object's theme.extend.transitionDuration values with the data below:

{
    "25": "25ms",
    "50": "50ms",
    "125": "125ms",
    "175": "175ms",
    "225": "225ms",
    "250": "250ms",
    "275": "275ms",
    "325": "325ms",
    "350": "350ms",
    "375": "375ms",
    "425": "425ms",
    "450": "450ms",
    "475": "475ms",
    "550": "550ms",
    "600": "600ms",
    "650": "650ms",
    "750": "750ms",
    "800": "800ms",
    "850": "850ms",
    "900": "900ms",
    "950": "950ms",
    "1050": "1050ms",
    "1100": "1100ms",
    "1150": "1150ms",
    "1200": "1200ms"
}

extend.width.json

To import for use in a Tailwind CSS config file:

const width = require('./node_modules/@obewds/vueventus/dist/data/extend.width.json')

The extend.width.json data module extends a Tailwind config object's theme.extend.width values with the data below:

{
    "0-pct": "0%",
    "5-pct": "5%",
    "10-pct": "10%",
    "15-pct": "15%",
    "20-pct": "20%",
    "25-pct": "25%",
    "30-pct": "30%",
    "35-pct": "35%",
    "40-pct": "40%",
    "45-pct": "45%",
    "50-pct": "50%",
    "55-pct": "55%",
    "60-pct": "60%",
    "65-pct": "65%",
    "70-pct": "70%",
    "75-pct": "75%",
    "80-pct": "80%",
    "85-pct": "85%",
    "90-pct": "90%",
    "95-pct": "95%",
    "100-pct": "100%"
}

Current Version:

v0.61.7