Utility-First CSS Generator

Stylify is a library that generates utility-first CSS dynamically based on what you write.
Write HTML. Get CSS 💎.


Seamless integration.

Start using Stylify with your favorite tool in a minute.

Why Stylify?

Small CSS Chunks

  • CSS can be generated for each file, page, layout or component separately.
  • Selector is generated only once and reused when possible.
  • No more unwanted CSS. Load only that CSS that is necessary.

Intuitive Selectors

  • With the Native Preset you can use native CSS property:value like color:blue as a selector.
  • You don't have to remember selectors. You already know them.

Selectors Minification

  • Shrink long selectors such as font-weight:bold to _abc123.
  • Minimize your CSS even further.

Dynamic Screens

  • Combine screens using logical operands like sm&&tolg, xl||landscape and lg&&dark.
  • Use dynamic values such as minw640px. This feature minimizes the amount of defined screens and makes them more flexible.

Easily configurable

Seamless integration

Focused on rapid and fluent coding.

  • No predefined CSS - no CSS purge needed.
  • Use all 678 browser CSS properties for selectors.
  • Define custom selectors like m:20px for margin.
  • Use __ (two underscores) for spaces and ^ (hat) for quotes to define any selector you want like border:2px__dotted__#01befe.

Go ahead, try it now!

Code less. Do more.