Outline

Set element outline styling, thickness (width), style, color and offset.

Usage:

@live outline-*;
@live outline-thick-*;
@live outline-style-*;
@live outline-color-*;
@live outline-offset-*;

info

This page contains only the property configuration reference. Complete documentation and usage examples will be added progressively in future updates.

Reference

shilp.config.js
/** @type {import('shilpcss/types').ShilpConfig} */
const shilpConfig = {
  source: "react",

  properties: {
    live: {
      outline: {
        DEFAULT: {
          property: "outline: <v><i>;",
          values: {
            0: 0,
          },
        },

        thick: {
          property: "outline-width: <v><i>;",
          resolve: "spacing",
          themeKey: "thickness",
          values: {
            DEFAULT: "thick",
            thin: "thin",
            medium: "medium",
          },
        },

        style: {
          property: "outline-style: <v><i>;",
          themeKey: "style",
          values: {},
        },

        color: {
          property: "outline-color: <v><i>;",
          resolve: "color",
          themeKey: "colors",
          variant: true,
          values: {},
        },

        offset: {
          property: "outline-offset: <n><v><i>;",
          resolve: "spacing",
          themeKey: "thickness",
          values: {},
        },
      },
    },
  },
};

export default shilpConfig;