CSS Properties Alias

VBox provides convenient aliases for common CSS properties to simplify styling. You can also provide your own custom aliases

vue

<template>
  <v-box w="250px" bg="tomato" p="1rem" color="#fff" text-align="center">
    This is the box
  </v-box>
</template>

This is the box

Default Aliases

Below is a table of the default CSS property aliases provided by VBox:

Alias	CSS Property
`w`	`width`
`maxW`	`maxWidth`
`minW`	`minWidth`
`h`	`height`
`maxH`	`maxHeight`
`minH`	`minHeight`
`fs`	`fontSize`
`fw`	`fontWeight`
`ff`	`fontFamily`
`lh`	`lineHeight`
`ls`	`letterSpacing`
`m`	`margin`
`mt`	`marginBlockStart`
`mb`	`marginBlockEnd`
`ml`	`marginInlineStart`
`mr`	`marginInlineEnd`
`mx`	`marginInline`
`my`	`marginBlock`
`p`	`padding`
`pt`	`paddingBlockStart`
`pb`	`paddingBlockEnd`
`pl`	`paddingInlineStart`
`pr`	`paddingInlineEnd`
`px`	`paddingInline`
`py`	`paddingBlock`
`bg`	`background`
`bgColor`	`backgroundColor`
`bgSize`	`backgroundSize`
`bgPosition`	`backgroundPosition`
`bgImage`	`backgroundImage`
`bgClip`	`backgroundClip`
`bgRepeat`	`backgroundRepeat`
`bgAttachment`	`backgroundAttachment`
`bgOrigin`	`backgroundOrigin`
`radius`	`borderRadius`
`shadow`	`boxShadow`

You can also provide your own custom aliases.