Utility-First CSS Generator

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

Go ahead. Try it now! Installation
Editor CSS Mangled HTML
Loading...

Seamless integration.

Start using Stylify with your favorite tool in a minute.

Browser
Star
Lukeshiru
It's like Tailwind's JIT, but without having to learn new classnames, and following a really simple set of "rules". Great library!
Mubashar Hashmat
Extremely awesome 😎.
Paul⭐Bear
Very cool library!
Tomáš Pilař
I recommend looking at Stylify.dev if you don't know that tool yet 👍. Launched on the first try with Symfony and it works like a charm! 👏 #webdevelopers #CSS #stylify
Develop Greatness
Well, I guess we all need to follow @stylify_dev to reduce our #CSS related nerve attacks 😂😂.
Angsuman Chakraborty
For your information Stylify.dev: Dynamic Utility-First CSS Generator.

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.

Dynamic selectors Components Plain selectors Variables Dynamic screens Helpers
  • 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.
Loading...

Go ahead, try it now!

Code less. Do more.