Theme Overrides

VueVentus Theme Overrides 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 Overrides themselves sometimes add entirely new nomenclature to Tailwind CSS defaults, and therefore don't necessarily follow the naming conventions of Tailwind's awesome defaults. That said, the naming conventions used aren't far off in most cases.

theme.fontSize.json

To import for use in a Tailwind CSS config file:

const fontSize = require('./node_modules/@obewds/vueventus/dist/data/theme.fontSize.json')

The theme.fontSize.json data module overrides a Tailwind config object's theme.fontSize values with the data below:

{
    "5xs": ["0.35rem", { "lineHeight": "0.5rem" }],
    "4xs": ["0.45rem", { "lineHeight": "0.9rem" }],
    "3xs": ["0.55rem", { "lineHeight": "1rem" }],
    "2xs": ["0.65rem", { "lineHeight": "1rem" }],
    "xxs": ["0.65rem", { "lineHeight": "1rem" }],
    "xs": ["0.75rem", { "lineHeight": "1.125rem" }],
    "sm": ["0.875rem", { "lineHeight": "1.25rem" }],
    "tiny": ["0.875rem", { "lineHeight": "1.375rem" }],
    "base": ["1rem", { "lineHeight": "1.5rem" }],
    "md": ["1rem", { "lineHeight": "1.5rem" }],
    "lg": ["1.125rem", { "lineHeight": "1.75rem" }],
    "xl": ["1.25rem", { "lineHeight": "1.75rem" }],
    "xxl": ["1.5rem", { "lineHeight": "2rem" }],
    "2xl": ["1.5rem", { "lineHeight": "2rem" }],
    "3xl": ["1.875rem", { "lineHeight": "2.25rem" }],
    "4xl": ["2.25rem", { "lineHeight": "2.5rem" }],
    "5xl": ["2.5rem", { "lineHeight": "2.875rem" }],
    "6xl": ["2.875rem", { "lineHeight": "3.25rem" }],
    "7xl": ["3.25rem", { "lineHeight": "3.5rem" }],
    "8xl": ["3.5rem", { "lineHeight": "3.875rem" }],
    "9xl": ["3.875rem", { "lineHeight": "4.25rem" }],
    "10xl": ["4.25rem", { "lineHeight": "4.5rem" }],
    "11xl": ["4.5rem", { "lineHeight": "4.875rem" }],
    "12xl": ["4.875rem", { "lineHeight": "5.25rem" }]
}

theme.listStyleType.json

To import for use in a Tailwind CSS config file:

const listStyleType = require('./node_modules/@obewds/vueventus/dist/data/theme.listStyleType.json')

The theme.listStyleType.json data module overrides a Tailwind config object's theme.listStyleType values with the data below:

{
    "none": "none",
    "circle": "circle",
    "disc": "disc",
    "decimal": "decimal",
    "square": "square",
    "lowerRoman": "lower-roman",
    "upperRoman": "upper-roman"
}

theme.opacity.json

To import for use in a Tailwind CSS config file:

const opacity = require('./node_modules/@obewds/vueventus/dist/data/theme.opacity.json')

The theme.opacity.json data module overrides a Tailwind config object's theme.opacity values with the data below:

{
    "0": "0",
    "5": ".05",
    "10": ".1",
    "15": ".15",
    "20": ".2",
    "25": ".25",
    "30": ".3",
    "35": ".35",
    "40": ".4",
    "45": ".45",
    "50": ".5",
    "55": ".55",
    "60": ".6",
    "65": ".65",
    "70": ".7",
    "75": ".75",
    "80": ".8",
    "85": ".85",
    "90": ".9",
    "95": ".95",
    "100": "1"
}

theme.screens.json

To import for use in a Tailwind CSS config file:

const screens = require('./node_modules/@obewds/vueventus/dist/data/theme.screens.json')

The theme.screens.json data module overrides a Tailwind config object's theme.screens values with the data below:

{
    "xxs": "324px",
    "xs": "492px",
    "sm": "636px",
    "md": "768px",
    "lg": "1024px",
    "xl": "1280px",
    "xxl": "1536px"
}

Current Version:

v0.61.7