Write CSS Faster

Stylify generates optimized utility-first CSS dynamically based on what you write.
Write Selectors. Get CSS. Without framework 💎

Write selectors as css property:value. Use __ (two underscores) instead of a space and ^ (hat) instead of a quote. You can also define your own selectors.

Loading...

Don't bloat your templates with utilities and duplicates. Components can be defined in a template (expects an object without surounding brackets) or in a Compiler config.

Loading...

Style any element with plain selectors. Can be configured within a template (expects an object without surounding brackets) or in a Compiler config.

Loading...

Avoid hardcoded values in templates. Use variables. Can be configurd within a template (expects an object without surounding brackets) or in a Compiler config.

Loading...
  • You can use any value for screen you want like mw450px and rng640px-1024px.
  • Screens can be combined using logical operands like sm&&tolg or sm||tolg.
  • Screens are automatically sorted. The sorting function can be changed.
Loading...
  • Helpers are called when a selector is found.
  • They are great for recalculating units, converting colors to different type, replacing words in selectors and etc.
Loading...

Seamless integration.

Start using Stylify with your favorite tool in a minute.

Loading...

We'd love your Feedback! ❤️

Star our repo, follow us on the Twitter, mention Stylify on a social media and let us know, what you think!

Mubashar Hashmat
Extremely awesome 😎.
Paul⭐Bear
Very cool library!
sam i am
That's nice!
Ahmad Tahir
Wow this looks neat 💯. I’ll be checking it out.
Angsuman Chakraborty
For your information stylifycss.com: Dynamic Utility-First CSS Generator.
Lukeshiru
It's like Tailwind's JIT, but without having to learn new classnames, and following a really simple set of "rules". Great library!
Tom Ravn
Have you heard about Stylify? Similar framework as #TailwindCSS. I guess when you finally learn #CSS using Tailwind you can go level deeper and use Stylify, you will basically write pure CSS into #html.😆
Tomáš Pilař
I recommend looking at stylifycss.com if you don't know that tool yet 👍. Launched on the first try with Symfony and it works like a charm! 👏
David Mario Licla
🤯 Did you know that there is an alternative to TailwindCSS but only using CSS properties? Look it's called Stylify!
Develop Greatness
Well, I guess we all need to follow @stylifycss to reduce our #CSS related nerve attacks 😂😂.
Mubashar Hashmat
Extremely awesome 😎.
Paul⭐Bear
Very cool library!
sam i am
That's nice!
Ahmad Tahir
Wow this looks neat 💯. I’ll be checking it out.
Angsuman Chakraborty
For your information stylifycss.com: Dynamic Utility-First CSS Generator.
Lukeshiru
It's like Tailwind's JIT, but without having to learn new classnames, and following a really simple set of "rules". Great library!
Tom Ravn
Have you heard about Stylify? Similar framework as #TailwindCSS. I guess when you finally learn #CSS using Tailwind you can go level deeper and use Stylify, you will basically write pure CSS into #html.😆
Tomáš Pilař
I recommend looking at stylifycss.com if you don't know that tool yet 👍. Launched on the first try with Symfony and it works like a charm! 👏
David Mario Licla
🤯 Did you know that there is an alternative to TailwindCSS but only using CSS properties? Look it's called Stylify!
Develop Greatness
Well, I guess we all need to follow @stylifycss to reduce our #CSS related nerve attacks 😂😂.

Why Stylify?

Don't study selectors

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

Copy&paste integration

Get small CSS Chunks

  • CSS can be generated for each file, page, layout or component separately.
  • Selector is generated only once and reused when possible.

Minify CSS even more

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

Style any screen

  • Combine screens using logical operands like sm&&tolg, xl||landscape and lg&&dark.
  • Dynamic sizes for screens such as minw640px minimizes the amount of screens.

Simplify your work

Go ahead, try it now!

Code less. Do more.