Trainer for frontend technologies, podcaster [@workingdraft](https://twitter.com/workingdraft).

Peter Kröner

* Full issue name: **Unstyled utility example**
* Status: `ERROR`
* Related to: [Utilities](/docs/configuration/utils)
* Summary: a utility element has no styles
* How to fix: add some styles for your utility

Warhol was unable to create a style utility because the example elements that
match the source selector have no styles applied to them.


docs/getting-started/basic-concepts/content.md

Get familiar with Warhol-specific terminology

Basic concepts

Software Architecture and Development is my passion. I love agile methodologies. Co-hosting [@workingdraft](https://twitter.com/workingdraft)

Hans Christian Reinl

docs/getting-started/get-account/content.md

Register an account

docs/getting-started/get-extension/content.md

How to install and set up Warhol's browser extension

Get the browser extension

docs/getting-started/create-pattern-library/content.md

Create and set up a basic pattern library

Create a pattern library

docs/getting-started/use-the-extension/content.md

Learn how to use the browser extension to hunt design bugs

Debug with the extension

docs/getting-started/define-components/content.md

Learn how to configure your first component

Define a component

docs/getting-started/component-variants/content.md

Configure Warhol to deal with several variants of the same component

Component variants

docs/getting-started/component-content/content.md

Learn how to define component children and directives

Component content

docs/getting-started/define-typography/content.md

Introduce typography rules for components and non-components

Define typography rules

docs/getting-started/create-utilities/content.md

Learn about two different ways to build flexible style utilities

Create utilities

docs/getting-started/composed-components/content.md

Combine everything we learned in one big example

Putting everything together

Contact us and connect with the community

Get help and support

Getting started

Register an account go through initial setup

The start page which provides an initial overview

Dashboard

Pattern libraries

Set up projects to fine-tune how Warhol's tests work

Projects

docs/app/account-settings-user/content.md

Account/User

docs/app/account-settings-teams/content.md

Account/Teams

docs/app/account-settings-billing/content.md

Account/Billing

Web app

docs/browser-extension/getting-started/content.md

Installing, signing in and getting started with the extension

docs/browser-extension/basic-concepts/content.md

Important concepts for working with the browser extension

Dive deep into design errors with Warhol's devtools panel

Panel

docs/browser-extension/panel-collection/content.md

Download and activate snapshots in the extension's collection tab

Panel/Collection

docs/browser-extension/panel-patterns/content.md

Get an overview over the currently active snapshots

Panel/Patterns

docs/browser-extension/panel-reports/content.md

See everything that's wrong with your page in excruciating detail

Panel/Reports

docs/browser-extension/panel-options/content.md

Panel/Options

docs/browser-extension/toolbar-button/content.md

Use the toolbar button for quick access to Warhol's functions

Toolbar button

docs/browser-extension/overlay/content.md

Get an overview of design errors overlaid onto your page

Overlay

Browser extension

docs/configuration/patternLibUrl/content.md

Pattern Lib URL

docs/configuration/breakpoints/content.md

Breakpoints

Components

Theme

docs/configuration/theme-colors/content.md

Theme.Colors

docs/configuration/theme-typography/content.md

Theme.Typography

docs/configuration/theme-icons/content.md

Theme.Icons

Configure Warhol to recognize helper classes and style mixins

Utilities

Configuration

docs/snapshot-issues/ambiguous-component-example/content.md

An element matches more than one component source selector

Ambiguous component example

docs/snapshot-issues/color-element-not-found/content.md

Color source element not found in the pattern library

Color element not found

docs/snapshot-issues/color-property-not-declared/content.md

A color property that was configured as a source is not declared

Color property not declared

docs/snapshot-issues/component-not-found/content.md

Component not found

docs/snapshot-issues/conflicting-utilities/content.md

Conflicting utilities

docs/snapshot-issues/empty-utility-rule/content.md

A style utility rule contains no declarations

Empty utility rule

docs/snapshot-issues/feature-not-supported/content.md

A Warhol feature is currently not supported

Feature not supported

docs/snapshot-issues/hyperactive-dom/content.md

The pattern library's DOM did not stop updating after loading

Hyperactive DOM

docs/snapshot-issues/icon-source-not-found/content.md

Icon source element not found in the pattern library

Icon source not found

docs/snapshot-issues/inaccessible-style-sheet/content.md

Warhol was unable to process style sheets in the pattern library

Inaccessible style sheet

docs/snapshot-issues/inconsistent-component-styles/content.md

Component element styles are not consisitent

Inconsistent component styles

docs/snapshot-issues/inconsistent-utility/content.md

Utility element styles are not consistent

Inconsistent utility

docs/snapshot-issues/invalid-color-property/content.md

A non-color property was defined as a theme color property

Invalid color property

docs/snapshot-issues/invalid-color-source-selector/content.md

The selector for color sources is not a valid CSS selector

Invalid color source selector

docs/snapshot-issues/invalid-component-selector/content.md

The selector for a component source is not a valid CSS selector

Invalid component selector

docs/snapshot-issues/invalid-icon-source-selector/content.md

The selector for an icon source is not a valid CSS selector

Invalid icon source selector

docs/snapshot-issues/invalid-layout-mode/content.md

An invalid value was used in a layout-mode directive

Invalid layout mode

docs/snapshot-issues/invalid-must-match-selector/content.md

A selector in a must-(not)-match directive is not a valid CSS selector

Invalid must-match selector

docs/snapshot-issues/invalid-options/content.md

Invalid options were passed to the snapshot function

Invalid options

docs/snapshot-issues/invalid-typography-source-selector/content.md

The selector for a typography source is not a valid CSS selector

Invalid typography source selector

docs/snapshot-issues/invisible-typography/content.md

Typography examples contain no visible text

Invisible Typography

docs/snapshot-issues/no-colors-found/content.md

Failed to read colors from the pattern library

No colors found

docs/snapshot-issues/non-unique-component-selector/content.md

Warhol is not quite sure about a component match in the pattern library

Non-unique component selector

docs/snapshot-issues/no-typography-found/content.md

Failed to read typography data from the pattern library

No typography found

docs/snapshot-issues/typography-not-explicitly-declared/content.md

Typography not explicitly declared

docs/snapshot-issues/unstyled-utility-example/content.md

Unstyled utility example

docs/snapshot-issues/redundant-utilities/content.md

Redundant utilities

docs/snapshot-issues/unsupported-rule/content.md

Warhol does not understand on or more CSS rules on the page

Unsupported rule

docs/snapshot-issues/utility-not-found/content.md

Utility not found

Snapshot errors

Relex Warhol's style checking for element dimensions and positioning

layout-mode

docs/directives/must-not-match/content.md

Require elements to (not) match specific css selectors

must-match/must-not-match

theme-checks

Directives

Conforms

docs/report-types/excess-declarations/content.md

Unexpected CSS declarations on a component or child element

Excess declarations

docs/report-types/excess-pseudo-element/content.md

Excess pseudo element

docs/report-types/hybrid-child/content.md

Multiple equally matching child snapshots

Hybrid child

docs/report-types/hybrid-component/content.md

Hybrid component

docs/report-types/hyperactive-dom/content.md

the web page's DOM did not stop updating after the load event

docs/report-types/illegal-typography/content.md

Invalid typography

docs/report-types/illegal-value/content.md

Invalid values on a non-component element

Illegal value

docs/report-types/inaccessible-stylesheet/content.md

Warhol was unable to process style sheets on the page

Warhol

Unstyled utility example

Join our Slack Community