CSS Function

Pixel Vue 3 introduced the CSS function to writing styles.

When to use

You can use CSS function, if you want to:

• Writing style for native HTML tag
• Override style for Pixel components

How to use

For basic usage just import CSS function and add to class attribute.

<template>
  <div
    :class="
      css({
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        background: 'background',
        padding: '12',
      })
    "
  >
    <img
      src="https://cdn.mekari.design/logo/mekari/default.svg"
      :class="cx(css({ height: '100px' }), 'mekari-logo-class')"
    />
    <MpText :class="css({ mt: '4' })" size="h1">Hello Pixel Vue 3</MpText>
  </div>
</template>

<script setup lang="ts">
  import { MpText, css, cx } from "@mekari/pixel3"
</script>

Tips

• CSS function receive all utility props and the shorthand, for ex: backgroundColor or bg
• CSS function receive all value from Design token, for ex: brand.mekari or red.400

Links

• Read more about Utility props in this docs
• Read more about Design token in this docs