UnoCSS

Use the UnoCSS framework to create the CSS styles.

Options See on deno.land

options object

Configurations for UnoCSS.

See {@link https://unocss.dev/guide/config-file}

Default:
{
  presets: [
    {
      name: "@unocss/preset-uno",
      theme: {
        width: {
          auto: "auto",
          xs: "20rem",
          sm: "24rem",
          md: "28rem",
          lg: "32rem",
          xl: "36rem",
          "2xl": "42rem",
          "3xl": "48rem",
          "4xl": "56rem",
          "5xl": "64rem",
          "6xl": "72rem",
          "7xl": "80rem",
          prose: "65ch",
          screen: "100vw"
        },
        height: {
          auto: "auto",
          xs: "20rem",
          sm: "24rem",
          md: "28rem",
          lg: "32rem",
          xl: "36rem",
          "2xl": "42rem",
          "3xl": "48rem",
          "4xl": "56rem",
          "5xl": "64rem",
          "6xl": "72rem",
          "7xl": "80rem",
          prose: "65ch",
          screen: "100vh"
        },
        maxWidth: {
          none: "none",
          xs: "20rem",
          sm: "24rem",
          md: "28rem",
          lg: "32rem",
          xl: "36rem",
          "2xl": "42rem",
          "3xl": "48rem",
          "4xl": "56rem",
          "5xl": "64rem",
          "6xl": "72rem",
          "7xl": "80rem",
          prose: "65ch",
          screen: "100vw"
        },
        maxHeight: {
          none: "none",
          xs: "20rem",
          sm: "24rem",
          md: "28rem",
          lg: "32rem",
          xl: "36rem",
          "2xl": "42rem",
          "3xl": "48rem",
          "4xl": "56rem",
          "5xl": "64rem",
          "6xl": "72rem",
          "7xl": "80rem",
          prose: "65ch",
          screen: "100vh"
        },
        minWidth: {
          none: "none",
          xs: "20rem",
          sm: "24rem",
          md: "28rem",
          lg: "32rem",
          xl: "36rem",
          "2xl": "42rem",
          "3xl": "48rem",
          "4xl": "56rem",
          "5xl": "64rem",
          "6xl": "72rem",
          "7xl": "80rem",
          prose: "65ch",
          screen: "100vw"
        },
        minHeight: {
          none: "none",
          xs: "20rem",
          sm: "24rem",
          md: "28rem",
          lg: "32rem",
          xl: "36rem",
          "2xl": "42rem",
          "3xl": "48rem",
          "4xl": "56rem",
          "5xl": "64rem",
          "6xl": "72rem",
          "7xl": "80rem",
          prose: "65ch",
          screen: "100vh"
        },
        inlineSize: {
          auto: "auto",
          xs: "20rem",
          sm: "24rem",
          md: "28rem",
          lg: "32rem",
          xl: "36rem",
          "2xl": "42rem",
          "3xl": "48rem",
          "4xl": "56rem",
          "5xl": "64rem",
          "6xl": "72rem",
          "7xl": "80rem",
          prose: "65ch",
          screen: "100vw"
        },
        blockSize: {
          auto: "auto",
          xs: "20rem",
          sm: "24rem",
          md: "28rem",
          lg: "32rem",
          xl: "36rem",
          "2xl": "42rem",
          "3xl": "48rem",
          "4xl": "56rem",
          "5xl": "64rem",
          "6xl": "72rem",
          "7xl": "80rem",
          prose: "65ch",
          screen: "100vh"
        },
        maxInlineSize: {
          none: "none",
          xs: "20rem",
          sm: "24rem",
          md: "28rem",
          lg: "32rem",
          xl: "36rem",
          "2xl": "42rem",
          "3xl": "48rem",
          "4xl": "56rem",
          "5xl": "64rem",
          "6xl": "72rem",
          "7xl": "80rem",
          prose: "65ch",
          screen: "100vw"
        },
        maxBlockSize: {
          none: "none",
          xs: "20rem",
          sm: "24rem",
          md: "28rem",
          lg: "32rem",
          xl: "36rem",
          "2xl": "42rem",
          "3xl": "48rem",
          "4xl": "56rem",
          "5xl": "64rem",
          "6xl": "72rem",
          "7xl": "80rem",
          prose: "65ch",
          screen: "100vh"
        },
        minInlineSize: {
          none: "none",
          xs: "20rem",
          sm: "24rem",
          md: "28rem",
          lg: "32rem",
          xl: "36rem",
          "2xl": "42rem",
          "3xl": "48rem",
          "4xl": "56rem",
          "5xl": "64rem",
          "6xl": "72rem",
          "7xl": "80rem",
          prose: "65ch",
          screen: "100vw"
        },
        minBlockSize: {
          none: "none",
          xs: "20rem",
          sm: "24rem",
          md: "28rem",
          lg: "32rem",
          xl: "36rem",
          "2xl": "42rem",
          "3xl": "48rem",
          "4xl": "56rem",
          "5xl": "64rem",
          "6xl": "72rem",
          "7xl": "80rem",
          prose: "65ch",
          screen: "100vh"
        },
        colors: {
          inherit: "inherit",
          current: "currentColor",
          transparent: "transparent",
          black: "#000",
          white: "#fff",
          rose: [Object],
          pink: [Object],
          fuchsia: [Object],
          purple: [Object],
          violet: [Object],
          indigo: [Object],
          blue: [Object],
          sky: [Object],
          cyan: [Object],
          teal: [Object],
          emerald: [Object],
          green: [Object],
          lime: [Object],
          yellow: [Object],
          amber: [Object],
          orange: [Object],
          red: [Object],
          gray: [Object],
          slate: [Object],
          zinc: [Object],
          neutral: [Object],
          stone: [Object],
          light: [Object],
          dark: [Object],
          lightblue: [Getter],
          lightBlue: [Getter],
          warmgray: [Getter],
          warmGray: [Getter],
          truegray: [Getter],
          trueGray: [Getter],
          coolgray: [Getter],
          coolGray: [Getter],
          bluegray: [Getter],
          blueGray: [Getter]
        },
        fontFamily: {
          sans: 'ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"N'... 94 more characters,
          serif: 'ui-serif,Georgia,Cambria,"Times New Roman",Times,serif',
          mono: 'ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace'
        },
        fontSize: {
          xs: [Array],
          sm: [Array],
          base: [Array],
          lg: [Array],
          xl: [Array],
          "2xl": [Array],
          "3xl": [Array],
          "4xl": [Array],
          "5xl": [Array],
          "6xl": [Array],
          "7xl": [Array],
          "8xl": [Array],
          "9xl": [Array]
        },
        fontWeight: {
          thin: "100",
          extralight: "200",
          light: "300",
          normal: "400",
          medium: "500",
          semibold: "600",
          bold: "700",
          extrabold: "800",
          black: "900"
        },
        breakpoints: {
          sm: "640px",
          md: "768px",
          lg: "1024px",
          xl: "1280px",
          "2xl": "1536px"
        },
        verticalBreakpoints: {
          sm: "640px",
          md: "768px",
          lg: "1024px",
          xl: "1280px",
          "2xl": "1536px"
        },
        borderRadius: {
          DEFAULT: "0.25rem",
          none: "0",
          sm: "0.125rem",
          md: "0.375rem",
          lg: "0.5rem",
          xl: "0.75rem",
          "2xl": "1rem",
          "3xl": "1.5rem",
          full: "9999px"
        },
        lineHeight: {
          none: "1",
          tight: "1.25",
          snug: "1.375",
          normal: "1.5",
          relaxed: "1.625",
          loose: "2"
        },
        letterSpacing: {
          tighter: "-0.05em",
          tight: "-0.025em",
          normal: "0em",
          wide: "0.025em",
          wider: "0.05em",
          widest: "0.1em"
        },
        wordSpacing: {
          tighter: "-0.05em",
          tight: "-0.025em",
          normal: "0em",
          wide: "0.025em",
          wider: "0.05em",
          widest: "0.1em"
        },
        boxShadow: {
          DEFAULT: [Array],
          none: "0 0 rgb(0 0 0 / 0)",
          sm: "var(--un-shadow-inset) 0 1px 2px 0 rgb(0 0 0 / 0.05)",
          md: [Array],
          lg: [Array],
          xl: [Array],
          "2xl": "var(--un-shadow-inset) 0 25px 50px -12px rgb(0 0 0 / 0.25)",
          inner: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)"
        },
        textIndent: {
          DEFAULT: "1.5rem",
          xs: "0.5rem",
          sm: "1rem",
          md: "1.5rem",
          lg: "2rem",
          xl: "2.5rem",
          "2xl": "3rem",
          "3xl": "4rem"
        },
        textShadow: {
          DEFAULT: [Array],
          none: "0 0 rgb(0 0 0 / 0)",
          sm: "1px 1px 3px rgb(36 37 47 / 0.25)",
          md: [Array],
          lg: [Array],
          xl: [Array]
        },
        textStrokeWidth: {
          DEFAULT: "1.5rem",
          none: "0",
          sm: "thin",
          md: "medium",
          lg: "thick"
        },
        blur: {
          "0": "0",
          DEFAULT: "8px",
          sm: "4px",
          md: "12px",
          lg: "16px",
          xl: "24px",
          "2xl": "40px",
          "3xl": "64px"
        },
        dropShadow: {
          DEFAULT: [Array],
          sm: "0 1px 1px rgb(0 0 0 / 0.05)",
          md: [Array],
          lg: [Array],
          xl: [Array],
          "2xl": "0 25px 25px rgb(0 0 0 / 0.15)",
          none: "0 0 rgb(0 0 0 / 0)"
        },
        easing: {
          DEFAULT: "cubic-bezier(0.4, 0, 0.2, 1)",
          linear: "linear",
          in: "cubic-bezier(0.4, 0, 1, 1)",
          out: "cubic-bezier(0, 0, 0.2, 1)",
          "in-out": "cubic-bezier(0.4, 0, 0.2, 1)"
        },
        lineWidth: { DEFAULT: "1px", none: "0" },
        spacing: {
          DEFAULT: "1rem",
          none: "0",
          xs: "0.75rem",
          sm: "0.875rem",
          lg: "1.125rem",
          xl: "1.25rem",
          "2xl": "1.5rem",
          "3xl": "1.875rem",
          "4xl": "2.25rem",
          "5xl": "3rem",
          "6xl": "3.75rem",
          "7xl": "4.5rem",
          "8xl": "6rem",
          "9xl": "8rem"
        },
        duration: {
          "75": "75ms",
          "100": "100ms",
          "150": "150ms",
          "200": "200ms",
          "300": "300ms",
          "500": "500ms",
          "700": "700ms",
          "1000": "1000ms",
          DEFAULT: "150ms",
          none: "0s"
        },
        ringWidth: { DEFAULT: "1px", none: "0" },
        preflightBase: {
          "--un-rotate": 0,
          "--un-rotate-x": 0,
          "--un-rotate-y": 0,
          "--un-rotate-z": 0,
          "--un-scale-x": 1,
          "--un-scale-y": 1,
          "--un-scale-z": 1,
          "--un-skew-x": 0,
          "--un-skew-y": 0,
          "--un-translate-x": 0,
          "--un-translate-y": 0,
          "--un-translate-z": 0,
          "--un-pan-x": " ",
          "--un-pan-y": " ",
          "--un-pinch-zoom": " ",
          "--un-scroll-snap-strictness": "proximity",
          "--un-ordinal": " ",
          "--un-slashed-zero": " ",
          "--un-numeric-figure": " ",
          "--un-numeric-spacing": " ",
          "--un-numeric-fraction": " ",
          "--un-border-spacing-x": 0,
          "--un-border-spacing-y": 0,
          "--un-ring-offset-shadow": "0 0 rgb(0 0 0 / 0)",
          "--un-ring-shadow": "0 0 rgb(0 0 0 / 0)",
          "--un-shadow-inset": " ",
          "--un-shadow": "0 0 rgb(0 0 0 / 0)",
          "--un-ring-inset": " ",
          "--un-ring-offset-width": "0px",
          "--un-ring-offset-color": "#fff",
          "--un-ring-width": "0px",
          "--un-ring-color": "rgb(147 197 253 / 0.5)",
          "--un-blur": " ",
          "--un-brightness": " ",
          "--un-contrast": " ",
          "--un-drop-shadow": " ",
          "--un-grayscale": " ",
          "--un-hue-rotate": " ",
          "--un-invert": " ",
          "--un-saturate": " ",
          "--un-sepia": " ",
          "--un-backdrop-blur": " ",
          "--un-backdrop-brightness": " ",
          "--un-backdrop-contrast": " ",
          "--un-backdrop-grayscale": " ",
          "--un-backdrop-hue-rotate": " ",
          "--un-backdrop-invert": " ",
          "--un-backdrop-opacity": " ",
          "--un-backdrop-saturate": " ",
          "--un-backdrop-sepia": " "
        },
        containers: {
          xs: "(min-width: 20rem)",
          sm: "(min-width: 24rem)",
          md: "(min-width: 28rem)",
          lg: "(min-width: 32rem)",
          xl: "(min-width: 36rem)",
          "2xl": "(min-width: 42rem)",
          "3xl": "(min-width: 48rem)",
          "4xl": "(min-width: 56rem)",
          "5xl": "(min-width: 64rem)",
          "6xl": "(min-width: 72rem)",
          "7xl": "(min-width: 80rem)",
          prose: "(min-width: 65ch)"
        },
        zIndex: { auto: "auto" },
        media: {
          portrait: "(orientation: portrait)",
          landscape: "(orientation: landscape)",
          os_dark: "(prefers-color-scheme: dark)",
          os_light: "(prefers-color-scheme: light)",
          motion_ok: "(prefers-reduced-motion: no-preference)",
          motion_not_ok: "(prefers-reduced-motion: reduce)",
          high_contrast: "(prefers-contrast: high)",
          low_contrast: "(prefers-contrast: low)",
          opacity_ok: "(prefers-reduced-transparency: no-preference)",
          opacity_not_ok: "(prefers-reduced-transparency: reduce)",
          use_data_ok: "(prefers-reduced-data: no-preference)",
          use_data_not_ok: "(prefers-reduced-data: reduce)",
          touch: "(hover: none) and (pointer: coarse)",
          stylus: "(hover: none) and (pointer: fine)",
          pointer: "(hover) and (pointer: coarse)",
          mouse: "(hover) and (pointer: fine)",
          hd_color: "(dynamic-range: high)"
        },
        aria: {
          busy: 'busy="true"',
          checked: 'checked="true"',
          disabled: 'disabled="true"',
          expanded: 'expanded="true"',
          hidden: 'hidden="true"',
          pressed: 'pressed="true"',
          readonly: 'readonly="true"',
          required: 'required="true"',
          selected: 'selected="true"'
        },
        animation: {
          keyframes: [Object],
          durations: [Object],
          timingFns: [Object],
          properties: [Object],
          counts: [Object]
        },
        supports: { grid: "(display: grid)" }
      },
      rules: [
        [ /^(.+?)-(\$.+)$/, [Function (anonymous)] ],
        [ /^(.+?)-(\$.+)$/, [Function (anonymous)] ],
        [ /^\[(.*)\]$/, [Function (anonymous)] ],
        [ /^__container$/, [Function (anonymous)], [Object] ],
        [ /^contain-(.*)$/, [Function (anonymous)] ],
        [ "sr-only", [Object] ],
        [ "not-sr-only", [Object] ],
        [ "pointer-events-auto", [Object] ],
        [ "pointer-events-none", [Object] ],
        [ "pointer-events-inherit", [Object] ],
        [ "pointer-events-initial", [Object] ],
        [ "pointer-events-revert", [Object] ],
        [ "pointer-events-revert-layer", [Object] ],
        [ "pointer-events-unset", [Object] ],
        [ "visible", [Object] ],
        [ "invisible", [Object] ],
        [ "backface-visible", [Object] ],
        [ "backface-hidden", [Object] ],
        [ "backface-inherit", [Object] ],
        [ "backface-initial", [Object] ],
        [ "backface-revert", [Object] ],
        [ "backface-revert-layer", [Object] ],
        [ "backface-unset", [Object] ],
        [
          /^(?:position-|pos-)?(relative|absolute|fixed|sticky)$/,
          [Function (anonymous)],
          [Object]
        ],
        [ /^(?:position-|pos-)([-\w]+)$/, [Function (anonymous)] ],
        [ /^(?:position-|pos-)?(static)$/, [Function (anonymous)] ],
        [
          /^(?:position-|pos-)?inset-(.+)$/,
          [Function (anonymous)],
          [Object]
        ],
        [
          /^(?:position-|pos-)?(start|end)-(.+)$/,
          [Function: handleInsetValues]
        ],
        [
          /^(?:position-|pos-)?inset-([xy])-(.+)$/,
          [Function: handleInsetValues]
        ],
        [
          /^(?:position-|pos-)?inset-([rltbse])-(.+)$/,
          [Function: handleInsetValues]
        ],
        [
          /^(?:position-|pos-)?inset-(block|inline)-(.+)$/,
          [Function: handleInsetValues]
        ],
        [
          /^(?:position-|pos-)?inset-([bi][se])-(.+)$/,
          [Function: handleInsetValues]
        ],
        [
          /^(?:position-|pos-)?(top|left|right|bottom)-(.+)$/,
          [Function (anonymous)]
        ],
        [ /^line-clamp-(\d+)$/, [Function (anonymous)], [Object] ],
        [ "line-clamp-none", [Object] ],
        [ "line-clamp-inherit", [Object] ],
        [ "line-clamp-initial", [Object] ],
        [ "line-clamp-revert", [Object] ],
        [ "line-clamp-revert-layer", [Object] ],
        [ "line-clamp-unset", [Object] ],
        [ "isolate", [Object] ],
        [ "isolate-auto", [Object] ],
        [ "isolation-auto", [Object] ],
        [ /^(?:position-|pos-)?z([\d.]+)$/, [Function (anonymous)] ],
        [
          /^(?:position-|pos-)?z-(.+)$/,
          [Function (anonymous)],
          [Object]
        ],
        [ /^order-(.+)$/, [Function (anonymous)] ],
        [ "order-first", [Object] ],
        [ "order-last", [Object] ],
        [ "order-none", [Object] ],
        [ "grid", [Object] ],
        [ "inline-grid", [Object] ],
        [ /^(?:grid-)?(row|col)-(.+)$/, [Function (anonymous)] ],
        [
          /^(?:grid-)?(row|col)-span-(.+)$/,
          [Function (anonymous)],
          [Object]
        ],
        [ /^(?:grid-)?(row|col)-start-(.+)$/, [Function (anonymous)] ],
        [
          /^(?:grid-)?(row|col)-end-(.+)$/,
          [Function (anonymous)],
          [Object]
        ],
        [
          /^(?:grid-)?auto-(rows|cols)-(.+)$/,
          [Function (anonymous)],
          [Object]
        ],
        [
          /^(?:grid-auto-flow|auto-flow|grid-flow)-(.+)$/,
          [Function (anonymous)]
        ],
        [
          /^(?:grid-auto-flow|auto-flow|grid-flow)-(row|col|dense|row-dense|col-dense)$/,
          [Function (anonymous)],
          [Object]
        ],
        [ /^grid-(rows|cols)-(.+)$/, [Function (anonymous)] ],
        [
          /^grid-(rows|cols)-minmax-([\w.-]+)$/,
          [Function (anonymous)]
        ],
        [
          /^grid-(rows|cols)-(\d+)$/,
          [Function (anonymous)],
          [Object]
        ],
        [ /^grid-area(s)?-(.+)$/, [Function (anonymous)] ],
        [ "grid-rows-none", [Object] ],
        [ "grid-cols-none", [Object] ],
        [ "grid-rows-subgrid", [Object] ],
        [ "grid-cols-subgrid", [Object] ],
        [ "float-left", [Object] ],
        [ "float-right", [Object] ],
        [ "float-none", [Object] ],
        [ "float-inherit", [Object] ],
        [ "float-initial", [Object] ],
        [ "float-revert", [Object] ],
        [ "float-revert-layer", [Object] ],
        [ "float-unset", [Object] ],
        [ "clear-left", [Object] ],
        [ "clear-right", [Object] ],
        [ "clear-both", [Object] ],
        [ "clear-none", [Object] ],
        [ "clear-inherit", [Object] ],
        [ "clear-initial", [Object] ],
        [ "clear-revert", [Object] ],
        [ "clear-revert-layer", [Object] ],
        [ "clear-unset", [Object] ],
        [ /^ma?()-?(-?.+)$/, [Function (anonymous)] ],
        [ /^m-?xy()()$/, [Function (anonymous)] ],
        [ /^m-?([xy])(?:-?(-?.+))?$/, [Function (anonymous)] ],
        [ /^m-?([rltbse])(?:-?(-?.+))?$/, [Function (anonymous)] ],
        [ /^m-(block|inline)(?:-(-?.+))?$/, [Function (anonymous)] ],
        [ /^m-?([bi][se])(?:-?(-?.+))?$/, [Function (anonymous)] ],
        [ "box-border", [Object] ],
        [ "box-content", [Object] ],
        [ "box-inherit", [Object] ],
        [ "box-initial", [Object] ],
        [ "box-revert", [Object] ],
        [ "box-revert-layer", [Object] ],
        [ "box-unset", [Object] ],
        [ "inline", [Object] ],
        [ "block", [Object] ],
        [ "inline-block", [Object] ],
        [ "contents", [Object] ],
        ... 901 more items
      ],
      variants: [
        [Function: placeholderModifier],
        [Function: variantSpaceAndDivide],
        { name: "aria", match: [Function: match] },
        { name: "data", match: [Function: match] },
        { name: "layer", match: [Function: match] },
        { name: "selector", match: [Function: match] },
        { name: "uno-layer", match: [Function: match] },
        { name: "negative", match: [Function: match] },
        { name: "important", match: [Function: match] },
        { name: "supports", match: [Function: match], multiPass: true },
        {
          name: "print",
          match: [Function: match],
          autocomplete: "print:"
        },
        { name: "media", match: [Function: match], multiPass: true },
        {
          name: "breakpoints",
          match: [Function: match],
          multiPass: true,
          autocomplete: "(at-|lt-|max-|)$breakpoints:"
        },
        {
          name: "combinator:all",
          match: [Function: match],
          multiPass: true
        },
        {
          name: "combinator:children",
          match: [Function: match],
          multiPass: true
        },
        {
          name: "combinator:next",
          match: [Function: match],
          multiPass: true
        },
        {
          name: "combinator:sibling",
          match: [Function: match],
          multiPass: true
        },
        {
          name: "combinator:siblings",
          match: [Function: match],
          multiPass: true
        },
        {
          name: "pseudo",
          match: [Function: match],
          multiPass: true,
          autocomplete: "(placeholder-shown|backdrop-element|indeterminate|focus-visible|first-of-type|first-letter|user-inva"... 359 more characters
        },
        {
          match: [Function: match],
          multiPass: true,
          autocomplete: "(not|is|where|has)-(placeholder-shown|indeterminate|focus-visible|first-of-type|user-invalid|out-of-"... 282 more characters
        },
        {
          name: "pseudo:group",
          match: [Function: match],
          multiPass: true
        },
        {
          name: "pseudo:peer",
          match: [Function: match],
          multiPass: true
        },
        {
          name: "pseudo:parent",
          match: [Function: match],
          multiPass: true
        },
        {
          name: "pseudo:previous",
          match: [Function: match],
          multiPass: true
        },
        { match: [Function: match], multiPass: true },
        {
          name: "dark",
          match: [Function: match],
          autocomplete: "dark:"
        },
        {
          name: "light",
          match: [Function: match],
          autocomplete: "light:"
        },
        { name: "rtl", match: [Function: match], autocomplete: "rtl:" },
        { name: "ltr", match: [Function: match], autocomplete: "ltr:" },
        { name: "scope", match: [Function: match] },
        { name: "@", match: [Function: match], multiPass: true },
        {
          name: "variables",
          match: [Function: match],
          multiPass: true
        },
        { name: "group-data", match: [Function: match] },
        { name: "peer-data", match: [Function: match] },
        { name: "parent-data", match: [Function: match] },
        { name: "previous-data", match: [Function: match] },
        {
          name: "contrast-more",
          match: [Function: match],
          autocomplete: "contrast-more:"
        },
        {
          name: "contrast-less",
          match: [Function: match],
          autocomplete: "contrast-less:"
        },
        {
          name: "landscape",
          match: [Function: match],
          autocomplete: "landscape:"
        },
        {
          name: "portrait",
          match: [Function: match],
          autocomplete: "portrait:"
        },
        {
          name: "motion-reduce",
          match: [Function: match],
          autocomplete: "motion-reduce:"
        },
        {
          name: "motion-safe",
          match: [Function: match],
          autocomplete: "motion-safe:"
        },
        { name: "svg", match: [Function: match], autocomplete: "svg:" },
        {
          name: ".dark",
          match: [Function: match],
          autocomplete: ".dark:"
        },
        {
          name: ".light",
          match: [Function: match],
          autocomplete: ".light:"
        },
        {
          name: "@dark",
          match: [Function: match],
          autocomplete: "@dark:"
        },
        {
          name: "@light",
          match: [Function: match],
          autocomplete: "@light:"
        },
        {
          name: "@hover",
          match: [Function: match],
          autocomplete: "@hover:"
        },
        { name: "mix", match: [Function: match] }
      ],
      options: {
        dark: "class",
        attributifyPseudo: false,
        preflight: true,
        variablePrefix: "un-"
      },
      prefix: undefined,
      postprocess: undefined,
      preflights: [ { layer: "preflights", getCSS: [Function: getCSS] } ],
      extractorDefault: {
        name: "@unocss/extractor-arbitrary-variants",
        order: 0,
        extract: [Function: extract]
      },
      autocomplete: { shorthands: { position: [Array], globalKeyword: [Array] } },
      shortcuts: [ [ /^(?:(\w+)[:-])?container$/, [Function (anonymous)] ] ]
    }
  ]
}
cssFile boolean string

Set the css filename for all generated styles, Set to false to insert a style tag per page.

Default:
"/unocss.css"
transformers object[]

Process CSS files using UnoCSS transformers.

Default:
[
  {
    name: "@unocss/transformer-variant-group",
    enforce: "pre",
    transform: [Function: transform]
  },
  {
    name: "@unocss/transformer-directives",
    enforce: undefined,
    idFilter: [Function: idFilter],
    transform: [Function: transform]
  }
]
reset boolean tailwind tailwind-compat eric-meyer

Supported CSS reset options.

See {@link https://github.com/unocss/unocss/tree/main/packages/reset}

Default:
false

Description

This plugin allows using the UnoCSS utility-first CSS framework, compatible with Tailwind and Windi CSS.

It analyzes the HTML code of the pages, searching for UnoCSS classes and generating the CSS code needed. It also processes the .css files to apply the directives transformer and variant group transformer.

---
layout: layout.vto
---
<h1 class="bg-purple-500">Hello world</h1>
</style>

The generated CSS code is output to the unocss.css file. You can customize the filename with the cssFile option, or set false to inline the code in the HTML pages using <style> elements.

Installation

Import this plugin in your _config.ts file to use it:

import lume from "lume/mod.ts";
import unocss from "lume/plugins/unocss.ts";

const site = lume();

site.use(unocss(/* Options */));

export default site;

Configuration

This plugin accepts a configuration object with the available options:

options : Configuration object for UnoCSS to define themes, shortcuts, etc. See the UnoCSS docs for more info

cssFile : Set the name of the file to export the CSS code or false to insert the CSS code a <style> tag for each page.

transformers : An array with all transformers to apply to the CSS files. By default loads variantGroup and directives. Set an empty array to disable this feature. See the UnoCSS docs for more info

reset : To apply a reset file. See the UnoCSS docs for more info. By default it's disabled.