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] ], ... 963 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: { important: false, dark: "class", attributifyPseudo: false, preflight: true, variablePrefix: "un-" }, prefix: undefined, postprocess: [], 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
Default:falseto insert a style tag per page."/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>
.btn {
@apply font-bold py-2 px-4 rounded;
}
.btn-blue {
@apply bg-blue-500 hover:bg-blue-700 text-white;
padding-top: 1rem;
}
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.