A fast and flexible css framework built in Rust

encre-css provides CSS utility classes with high performance generation

Blog About RSS feed

My blog post

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate.

Subscribe

Lightning fast

Tired of waiting for your browser to refresh your styles? encre-css leverages Rust's speed to outperform traditional frameworks like TailwindCSS and UnoCSS, ensuring rapid style generation and application for enhanced efficiency

Learn more

Modular

encre-css is designed for modularity, allowing you to easily create or integrate custom plugins to extend functionality

Learn more

Design-friendly

Do you need particular colors or screen breakpoints? Or do you have a clear idea of what a button should look like but you don't want to copy-paste the same list of classes every time? encre-css makes creating a design system very easy. You just have to write a TOML config file to define your own design system.

Learn more

Easy migration

Do you just want to try out encre-css without spending too much time? Your codebase is already ready! Just replace the `tailwindcss` command with `encrecss` and it will work!

Learn more
$ tailwindcss --content source.js | grep "{" | wc -l

Rebuilding...

Done in 477ms.
1115

$ encrecss build -i source.js | grep "{" | wc -l
1115

Avoid repetition

encre-css supports variant groups to avoid repetition and all existing CSS values (where possible) instead of being limited to an opinionated list

Learn more
<div class="border-3 dark:(text-white,hover:text-red-400)">
  <div class="order-12 rotate-23"></div>
  <button class="bg-blue-500 (hover,focus-within):bg-blue-400"></button>
</div>

Arbitrary utilities

encre-css supports custom CSS selectors, values and properties with auto-infered property name based on the property value

Learn more
<div class="[&_.keyword]:text-red-400 bg-[url('/image.png')]">
  <span class="keyword">fn</div>
</div>