Autocomplete

Template: (border|b)-(solid|dashed|dotted|double|hidden|none)
Input: b-do
Suggestions: b-dotted , b-double

Autocomplete utilities for UnoCSS: @unocss/autocomplete. This is embedded in the playground and the VS Code extension.

Usage

Static rules like this will just work without any configuration.

rules: [
  ['flex', { display: 'flex' }]
]

For dynamic rules, you can provide an extra meta object to the rule and specify the autocomplete template.

rules: [
  [
    /^m-(\d)$/,
    ([, d]) => ({ margin: `${d / 4}rem` }),
    { autocomplete: 'm-<num>' }, // <-- this
  ],
]

The template uses a simple DSL to specify the autocomplete suggestions. The syntax is:

(...|...): logic OR groups using | as the separator. It will be used as suggestions when some of the groups match.
<...>: built-in shorthands. Currently supports <num>, <percent> and <directions>
$...: theme inferring. For example $colors will list all the properties of the colors object of the theme.

For multiple templates: