encre-css 0.9.1

A TailwindCSS-compatible utility-first CSS generation library written in Rust.

A brief introduction to utility-first CSS frameworks

Traditionally, whenever you need to style something on the web, you write CSS in a dedicated file and apply the rules using classes in your HTML, like that:

However styling this way is pretty boring because you need to think of good class names and you have to repeatedly switch between several files, it could be better. Utility-first CSS frameworks takes a new approach by using minimal and pre-defined class names directly linked to its CSS rule content. The CSS file will then be generated on-demand allowing the classes to be very flexible and customizable. This approach lets you quickly prototype visual HTML elements and encourages you to turn them later into components using your favorite web framework. It also makes building a responsive website easier and forces it to be closer to your design system:

There is already a lot of utility-first frameworks like Tailwind CSS, Windi CSS, Twind and Uno CSS, but encre-css is unique because it is written in Rust and uses a new architecture, making it the fastest utility-first framework (according to the benchmark here based on Uno CSS' benchmark).

Getting started

Add encre-css to your Cargo.toml:

Generating styles takes three steps:

• First, you need to configure the main [EncreGenerator] structure by making a [Config] structure. It can be created by reading a TOML file using [Config::from_file] or by using the default values with [Config::default];
• Then, you need to scan content to extract and collect all useful atomic classes using [EncreGenerator::scan] or [EncreGenerator::add_selector] to manually add a single previously scanned selector or [EncreGenerator::add_selectors] to manually add several previously scanned selectors;
• Finally, you need to generate the styles using [EncreGenerator::generate].

Example

use encre_css::{EncreGenerator, Config};

let config = Config::default();
let mut generator = EncreGenerator::new(&config);
generator.scan(r#"<p class="w-auto bg-red-200 rounded-md">Hello world!</p>"#);

assert!(generator.generate().ends_with(".w-auto {
width: auto;
}

.rounded-md {
border-radius: 0.375rem;
}

.bg-red-200 {
--en-bg-opacity: 1;
background-color: rgb(254 202 202 / var(--en-bg-opacity));
}"));

What to do next

1. The documentation about the composition of a class (also named selector) is here.
2. The documentation about all utility classes (handled by plugins) is here.
3. The documentation about the reset CSS commonly used (also named preflight) is here.

Command line interface

A command line interface is also available. Install it using:

cargo install encre-css-cli

Then run encrecss --help for instructions on how to use it.