Utilities

UnoCSS

Shortcuts

shortcuts: {
  'full-height': 'h-[calc(100vh_-_var(--drupal-displace-offset-top,_0px))]',
  'border': 'border-1 border-solid border-black',
  'input': 'border',
  'menu': 'list-none flex flex-wrap gap-x-5 gap-y-2 p-0 m-0',
  'space-content': 'space-y-content',
  'container': 'max-w-screen-lg mx-auto',
  'container-layout': 'container p-layout',
  'display-block': 'block',
  'display-table': 'table',
},

Old utilities

utilities.css

Utility classes that can be used in the UI.

Display

Flex

Grid

grid-3-2-1
grid-3-3-1
grid-2-2-1
grid-2-1-1

Margin

Float

Typography

Max width

Border

Issues

UI Classes

Drupal can be a decent low code system, allowing site builders to customize things like views with utility classes.

The build system can parse templates and remove unused CSS, but this doesn't work well for classes used in the UI.