{"id":45388042,"url":"https://gitlab.com/encre-org/encre-css","last_synced_at":"2026-02-21T18:05:58.259Z","repository":{"id":50527242,"uuid":"35540843","full_name":"encre-org/encre-css","owner":"encre-org","description":"A TailwindCSS-compatible utility-first CSS generation library written in Rust\r\n\r\nhttps://encrecss.uk.to","archived":false,"fork":false,"pushed_at":null,"size":null,"stargazers_count":9,"open_issues_count":3,"forks_count":3,"subscribers_count":null,"default_branch":"main","last_synced_at":"2025-10-30T17:00:05.753Z","etag":null,"topics":["MIT","css","rust","tailwindcss"],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://gitlab.com/uploads/-/system/project/avatar/35540843/logo.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-04-21T12:22:20.555Z","updated_at":"2025-10-11T14:38:13.217Z","dependencies_parsed_at":"2022-08-20T12:51:26.562Z","dependency_job_id":null,"html_url":"https://gitlab.com/encre-org/encre-css","commit_stats":null,"previous_names":[],"tags_count":7,"template":null,"template_full_name":null,"purl":"pkg:gitlab/encre-org/encre-css","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/gitlab.com/repositories/encre-org%2Fencre-css","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/gitlab.com/repositories/encre-org%2Fencre-css/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/gitlab.com/repositories/encre-org%2Fencre-css/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/gitlab.com/repositories/encre-org%2Fencre-css/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/gitlab.com/owners/encre-org","download_url":"https://gitlab.com/encre-org/encre-css/-/archive/main/encre-css-main.zip","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/gitlab.com/repositories/encre-org%2Fencre-css/sbom","scorecard":null,"host":{"name":"gitlab.com","url":"https://gitlab.com","kind":"gitlab","repositories_count":4521539,"owners_count":7348,"icon_url":"https://github.com/gitlab.png","version":null,"created_at":"2022-05-30T11:31:42.605Z","updated_at":"2026-01-12T22:45:04.389Z","status":"online","status_checked_at":"2026-02-21T02:00:07.789Z","response_time":263,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.382Z","robots_txt_url":"https://gitlab.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/gitlab.com","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/gitlab.com/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/gitlab.com/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/gitlab.com/owners"}},"keywords":["MIT","css","rust","tailwindcss"],"created_at":"2026-02-21T18:05:57.484Z","updated_at":"2026-02-21T18:05:58.254Z","avatar_url":"https://gitlab.com/uploads/-/system/project/avatar/35540843/logo.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://gitlab.com/encre-org/encre-css/raw/main/.assets/logo.png\" width=\"100\" /\u003e\n  \u003ch1\u003eencre-css\u003c/h1\u003e\n  \u003cp\u003eA TailwindCSS-compatible utility-first CSS generation library written in Rust\u003c/p\u003e\n\n  \u003ca href=\"https://gitlab.com/encre-org/encre-css/blob/main/LICENSE\"\u003e\n    \u003cimg alt=\"MIT License\" src=\"https://img.shields.io/badge/license-MIT-success\" /\u003e\n  \u003c/a\u003e\n\n  \u003ca href=\"https://gitlab.com/encre-org/encre-css/-/pipelines\"\u003e\n    \u003cimg alt=\"Pipeline status\" src=\"https://gitlab.com/encre-org/encre-css/badges/main/pipeline.svg\" /\u003e\n  \u003c/a\u003e\n\n  \u003ca href=\"https://gitlab.com/encre-org/encre-css/-/pipelines\"\u003e\n    \u003cimg alt=\"Coverage report\" src=\"https://gitlab.com/encre-org/encre-css/badges/main/coverage.svg\" /\u003e\n  \u003c/a\u003e\n\n  \u003ca href=\"https://deps.rs/repo/gitlab/encre-org/encre-css\"\u003e\n    \u003cimg alt=\"Dependency status\" src=\"https://deps.rs/repo/gitlab/encre-org/encre-css/status.svg\" /\u003e\n  \u003c/a\u003e\n\n  \u003ca href=\"https://crates.io/crates/encre-css\"\u003e\n    \u003cimg alt=\"Published on crates.io\" src=\"https://img.shields.io/crates/v/encre-css\" /\u003e\n  \u003c/a\u003e\n\n  \u003ca href=\"https://docs.rs/encre-css\"\u003e\n    \u003cimg alt=\"Documentation on docs.rs\" src=\"https://img.shields.io/docsrs/encre-css\" /\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n\u003e Since v0.16.0, this library only supports TailwindCSS v4.0.\n\u003e If you are using TailwindCSS v3.0, check the upgrade guide at\n\u003e https://tailwindcss.com/docs/upgrade-guide or pin `encre-css` to v0.15.0.\n\u003e\n\u003e This is **not** a project made by the TailwindCSS team.\n\n## Table of contents\n\n- [A brief introduction to utility-first CSS frameworks](#a-brief-introduction-to-utility-first-css-frameworks)\n- [Getting started](#getting-started)\n- [Command line interface](#command-line-interface)\n- [About the name](#about-the-name)\n- [License](#license)\n\n## A brief introduction to utility-first CSS frameworks\n\nTraditionally, whenever you need to style something on the web, you write CSS in a dedicated\nfile and apply the rules using classes in your HTML, like that:\n\n```html\n\u003cdiv class=\"notification\"\u003e\n  \u003cdiv class=\"notification-header\"\u003e\n    \u003cdiv class=\"app-icon\"\u003e\u003c/div\u003e\n    A new Javascript library has been released!\n  \u003c/div\u003e\n  \u003cdiv class=\"notification-body\"\u003e\n    The library \u003ccode\u003ereact\u003c/code\u003e has just been released, did you know it?\n    It is \u003ci\u003ea JavaScript library for creating user interfaces\u003c/i\u003e.\n  \u003c/div\u003e\n  \u003cdiv class=\"notification-footer\"\u003e\n    \u003ca href=\"#\" class=\"dismiss-button\"\u003eDismiss\u003c/a\u003e\n    \u003ca href=\"#\" class=\"try-button\"\u003eTry it here!\u003c/a\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\nHowever styling this way is pretty boring because you need to think about good class names and\nto repeatedly switch between several files, it could be better. Utility-first CSS frameworks\ntakes a new approach by using minimal and pre-defined class names directly linked to its CSS\nrule content. The CSS file will then be generated\n[on-demand](https://antfu.me/posts/reimagine-atomic-css#on-demand-way) allowing the classes\nto be very flexible and customizable. This approach lets you quickly prototype visual HTML\nelements and encourages you to turn them into components using your favorite web framework. It\nalso makes building a responsive website easier and forces it to be closer to your design\nsystem (if you have one):\n\n```html\n\u003cdiv class=\"w-128 text-md shadow-[1px_1px_10px_2px_#e5e7eb] rounded-xl\"\u003e\n  \u003cdiv class=\"p-3 flex items-center\"\u003e\n    \u003cdiv class=\"bg-blue-500 rounded-full w-5 h-5 mr-3\"\u003e\u003c/div\u003e\n    A new Javascript library has been released!\n  \u003c/div\u003e\n  \u003cdiv class=\"p-6 pt-4\"\u003e\n    The library \u003ccode\u003ereact\u003c/code\u003e has just been released, did you know it?\n    It is \u003ci\u003ea JavaScript library for creating user interfaces\u003c/i\u003e.\n  \u003c/div\u003e\n  \u003cdiv class=\"flex justify-between\"\u003e\n    \u003ca href=\"#\" class=\"p-3 text-rose-600\"\u003eDismiss\u003c/a\u003e\n    \u003ca href=\"#\" class=\"p-3 bg-blue-600 text-white rounded-br-xl rounded-tl-xl shadow-sm shadow-blue-600\"\u003eTry it here!\u003c/a\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\nThere is already a lot of utility-first frameworks like [Tailwind\nCSS](https://tailwindcss.com), [Windi CSS](https://windicss.org), [Twind](https://twind.dev)\nand [Uno CSS](https://uno.antfu.me), but `encre-css` is unique because it is written in Rust and\nuses a new architecture, making it **the fastest utility-first framework** (according to the\nbenchmark [here](https://gitlab.com/encre-org/encre-css-bench) based on\n[Uno CSS' benchmark](https://github.com/unocss/unocss/tree/main/bench)).\n\n## Getting started\n\nAdd `encre-css` to your `Cargo.toml`:\n\n```toml\n[dependencies]\nencre-css = \"0.20.1\"\n```\n\nGenerating styles takes two steps:\n- You need to _configure_ the CSS generation by making a `Config` structure.\nIt can be created by reading a [TOML](https://toml.io) file using\n`Config::from_file` or by using the default values with `Config::default`;\n- Then, you need to _generate the styles_ based on some sources using the `generate`\nfunction. This function will scan the content of the sources, extract atomic classes and\ngenerate the style needed for each class.\n\n### Example\n\n```rust\nuse encre_css::Config;\n\nlet config = Config::default();\nlet css = encre_css::generate(\n    [r#\"\u003cp class=\"w-auto bg-red-200 rounded-md\"\u003eHello world!\u003c/p\u003e\"#],\n    \u0026config,\n);\n\nassert!(css.expect(\"failed to generate the CSS\").ends_with(r#\"\n.w-auto {\n  width: auto;\n}\n\n.rounded-md {\n  border-radius: 0.375rem;\n}\n\n.bg-red-200 {\n  background-color: oklch(88.5% .062 18.334);\n}\"#));\n```\n\n## Command line interface\n\nA command line interface is also available. Install it using:\n\n```bash\ncargo install encre-css-cli\n```\n\nThen run `encrecss --help` for instructions on how to use it.\n\n## Plugins\n\n`encre-css` was built with modularity in mind and it is possible to write or use\ncustom plugins. [Learn more](https://docs.rs/encre-css/latest/encre_css/plugins)\n\n## About the name\n\n`encre` means `ink` in French.\n\n## License\n\n`encre-css` is published under the [MIT license](https://gitlab.com/encre-org/encre-css/blob/main/LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/gitlab.com%2Fencre-org%2Fencre-css","html_url":"https://awesome.ecosyste.ms/projects/gitlab.com%2Fencre-org%2Fencre-css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/gitlab.com%2Fencre-org%2Fencre-css/lists"}