Utility classes

Utility classes are an optimal way to apply general styling. They remove large amounts of duplication from your stylesheets and lend visual harmony to your app.


As a basis of styleguides utility classes are unparalleled in providing a usable system for developers and a cohesive appearance to your users.

Ready to go

Enhance comes preconfigured with a customizable utility class system. During development you can use the stylesheet found in public/styles.css. For production you can inline this stylesheet into the head of your document since utility class stylesheets tend to be tiny — around ~30k on disk and 9k over the wire.


Apply utility classes to your element markup

export default function MyParagraph({ html }) {
  return html`
    <p class="font-serif p1 mb-1">


It is possible to completely customize your project’s utility classes. To do so you will need to do two things:

Add these lines at the bottom of your .arc file in the root of your project.

config styleguide.json

Community Resources

Visit Enhance on GitHub.
Join our Discord server to chat about development and get help from the community.